- 石家庄邮电职业技术学院专属活动第2期：【校园前端学习笔记】主题征文
- 石家庄邮电职业技术学院社区
学号后四位：0238
邀请人ID：（非必填）
在生活中，许愿墙是一种承载愿望的实体，来源于“许愿树”的习俗。后来人们逐渐改变观念，开始将愿望写在小纸片上，然后贴在墙上，这就是许愿墙。随着互联网的发展，人们又将许愿墙搬到了网络上，通过网站上的一个空间页面，来发表和展示愿望。
本项目的页面效果如图：
项目思路
本项目是由<div>、<p>和<spen>等标签构成的，并使用圆角边框、背景颜色渐变来实现页面的效果。
先进行页面结构分析，如图所示：
根据页面结构在html文档中编写相应的代码结构。
页面框架完成后，编写css样式，实现效果图显示的效果，并使页面更加美观（大家可以根据个人喜好，把许愿墙设置成自己喜欢的样子）
知识点
圆角边框
在css3以前，如果要制作圆角边框效果，需要在元素标签中加上4个空标签，再在每个空标签中应用一个圆角的背景，然后对这几个应用了圆角的标签进行相应的定位，这个过程十分麻烦。而css3中新增了boder-radius属性，现在我们用它来实现圆角边框效果就十分简单了！
css3的圆角边框实际上是在矩形的4个角分别做内切圆，然后通过设置内切圆的半径来控制圆角是弧度。
border-radius属性的4个值是按照top-left、top-right、bottom-right和bottom-left的顺序来设置的。
border-radius是一种缩写的方式，我们还可以把各个角单独拆分出来，也就是以下4种写法，其参数都是先y轴然后x轴，具体写法如下。
border-top-left-radius: <length> <length>; //左上角 border-top-right-radius: <length> <length>; //右上角 border-bottom-left-radius: <length> <length>; //左下角 border-bottom-right-radius: <length> <length>; //右下角
线性渐变
渐变两种或多种颜色之间的平滑过渡，渐变背景一直以来在Web页面中都是一种常见的视觉元素。在css3以前，必须使用图像来实现这些效果。css3的渐变属性主要包括线性渐变、径向渐变和重复渐变，本次项目中我们使用的是线性渐变。
css3中的线性渐变通过“background-image:linear-gradient(参数值);”来设置，其基本语法格式如下：
background-image:linear-gradient([<angle>|<side-or-corner>,]color stop,color stop[,color stop]*);其中，【】中的参数表示可选值。linear-gradient的参数取值说明表如下图所示：
参数类型 取值说明 <angle> 表示渐变的角度，角度是的取值范围是0~360°。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变 <side-or-corner> 描述渐变线的起始点位置。它包含to和两个关键词：第1个指出水平位置left or right，第2个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的 color stop 用于设置颜色边界，color为边界的颜色，stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100%则表示该边界位于可视区域外。两个color stop之间的区域为颜色过渡区
项目代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>许愿墙</title>
<link rel="stylesheet" herf="css/style.css">
</head>
<body>
<div class="container">
<div class="item" style="background:#E3E197">
<p>这是第一个便签</p>
<span>关闭</span>
</div>
<div class="item" style="background: #F8B3D0;">
<p>这是第二个便签</p>
<span>关闭</span>
</div>
<div class="item" style="background: #BBE1F1;">
<p>这是第三个便签</p>
<span>关闭</span>
</div>
</div>
</body>
</html>
编写许愿墙页面css样式
*{
margin: 0;
padding: 0;
}
.container{
width: 1160px;
height: 440px;
background-image: linear-gradient(#B6E8DB,#15B0C9);
padding: 200px 153px 200px 150px;
}
.item{
width: 300px;
height: 350px;
float: left;
margin: 0 20px;
padding: 20px;
box-shadow: 0 2px 10px 1px #7F7F7F;
border-bottom-left-radius: 20px 500px;
border-bottom-right-radius: 500px 30px;
border-top-right-radius: 5px 100px;
}
p{
margin: 50px 30px;
}
span{
color: white;
position: relative;
left: 220px;
top: 120px;
font-size: 14px;
}
提醒：在发布作品前请把不用的内容删掉
