许愿墙的制作

官方提醒433

已于 2022-10-28 15:03:28 修改

阅读量442

点赞数

文章标签：前端 html5 html

于 2022-10-28 14:59:42 首次发布

本文链接：https://blog.csdn.net/weixin_74789316/article/details/127571704

版权

学号后四位：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>