制作简单许愿墙

最新推荐文章于 2023-11-29 10:28:07 发布

艾海达鸭

最新推荐文章于 2023-11-29 10:28:07 发布

阅读量2.1k

点赞数 5

文章标签：前端 html css3

本文链接：https://blog.csdn.net/weixin_68841941/article/details/127520167

版权

学号后四位：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之间的区域为颜色过渡区

参数类型	取值说明
<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;
}

提醒：在发布作品前请把不用的内容删掉

艾海达鸭

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
制作简单许愿墙

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

扫一扫