许愿墙的制作_微信应用开发许愿墙csdn

作者：凡人多烦事01 | 2024-04-22 03:47:05

踩

微信应用开发许愿墙csdn

学号后四位：0217
邀请人ID：（非必填）

学有所思、学有所获、学有所得。在接下来的日子里，我们共同分享学习的点滴。CSDN针对我们石家庄邮电职业技术学院学习软件技术专业的同学们，特此建立了【校园前端学习分享】活动。大家可以交流在学习前端时的心得体会，也可以分享在日常学习生活中的前端课程作业，欢迎大家积极参与投稿！

你可以从以下几个方面着手（不强制），或者根据自己对话题主题的理解创作，参考如下：

知识点

CSS3圆角边框和渐变颜色的运用。

项目名称及描述

许愿墙最初是承载愿望的实体，一种建筑，人们在上面涂涂画画或贴上小纸片，写上自己的愿望、期盼、祝福等；也用在网络上，一般是网站独立的一个空间页面，供人们展示许愿、祈祷、祝福等。

项目代码

<style>
body {
height: 950px;
background: linear-gradient(181deg, #7BBBE3 25%, #569ABF 54%) no-repeat;
}

.container {
display: flex;
justify-content: center;
}

设置三个许愿纸的样式

.container div {
width: 180px;
height: 190px;
border-bottom-right-radius: 80px 20px;
/* 左下边框 */
border-bottom-left-radius: 10px 100px;
/* 右下边框 */
box-shadow: 0 0 5px 2px rgba(0, 0, 5, .3);
/* 背景阴影 */
float: left;
margin-left: 40px;
padding: 10px 30px;
}

设置关闭文字

span {
position: relative;
top: 110px;
left: 150px;
color: white;
}
</style>
</head>

<body>

构建许愿墙结构

<div class="container">
<div class="item" style="background:#E3E197">
<p>路漫漫其修远兮...</p>
<span>关闭</span>
</div>
<div class="item" style="background: #F8B3D0;">
<p>I have a dream...</p>
<span>关闭</span>
</div>
<div class="item" style="background: #BBE1F1;">
<p>既然选择了远方，便只顾风雨兼程...</p>
<span>关闭</span>
</div>
</div>

</body>

项目完成思路

运用圆角边框、背景颜色渐变来实现页面效果，先将许愿墙框架搭建出来，再在style标签中将样式设计出来。

项目实现过程中遇到的问题及解决方案

需要用到的文件存放位置应自己设置，也可以使用代码中的存放位置。

在设置圆角属性时牢记四个角可以分别设置。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/466630