许愿墙许下你的愿望

最新推荐文章于 2024-03-19 11:57:00 发布

bibaokesi

最新推荐文章于 2024-03-19 11:57:00 发布

阅读量874

点赞数 2

文章标签： html 前端 css

本文链接：https://blog.csdn.net/bibaokesi/article/details/127560484

版权

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

知识点

CSS3圆角边框和渐变的简单运用。

项目名称及描述

在生活中，许愿墙是一种承载愿望的实体，来源于“许愿树”的习俗。后来人们逐渐改变观念，开始将愿望写在小纸片上，然后贴在墙上，这就是许愿墙。随着互联网的发展，人们又将许愿墙搬到了网络上，通过网站上的一个空间页面，来发表和展示愿望。

我们可以用来寄托对逝者的思念；许下自己的期望；表达对亲友的祝福；铭刻对恋人的真爱；浏览其他用户的许愿，品味人间真情。

许愿墙项目效果图：

项目代码

<style>

html{
       height: 100%;
       }

/*1-3行代码设置html的高度为100%*/
       body{
       background: linear-gradient(to bottom,#7ec7a2 0%,#3794c0 100%);

height: 100%;

margin: 0;
       }

/*4-8行代码设置body背景颜色渐变效果*/
       .container {
           margin: 0 auto;
           padding: 50px 0;
           width: 720px;
           overflow: hidden;
       }

/*9-14行代码设置许愿墙页面的最外层容器样式*/
       .container p {
           height: 80px;
           margin: 30px 10px;
           overflow: hidden;
           word-wrap: break-word;
           line-height: 1.5;
       }

/*15-21行代码设置许愿卡片内容的样式*/
       .container span {
           text-decoration: none;
           color: white;
           position: relative;
           left: 150px;
           font-size: 14px;
       }

/*22-28行代码设置许愿卡片 "关闭 " 功能的样式*/
       .item {
           background: #E3E197;
           width: 200px;
           height: 200px;
           line-height: 30px;
           box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
           float: left;
           margin: 0 20px;
           border-bottom-left-radius: 20px 500px;
           border-bottom-right-radius: 500px 30px;
           border-top-right-radius: 5px 100px
       }

/*29-39行代码设置许愿卡片内容的样式*/

<style>

<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>