响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初体验 项目1-2 许愿墙

发布时间：2024年01月16日

项目展示在这里插入图片描述

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

项目目录结构在这里插入图片描述

在这里插入图片描述

index.html具体代码

<!DOCTYPE html >
<html>
<head>
<meta  charset="utf-8" >
<title>许愿墙</title>
<link rel="stylesheet" href="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>I have a dream...</p>
    <span>关闭</span></div>
    <div class="item" style="background:#BBE1F1;">
    <p>既然选择了远方，便只顾风雨兼程...</p>
    <span>关闭</span></div>
</div>
</body>
</html>

上述代码中：
第6行代码引入了许愿墙页面的样式代码；
第10行代码定义了许愿墙页面的最外层容器；
第10~13行代码定义了许愿墙中许愿卡片的结构，并且为许愿卡片设置了不同的背景颜色。

style.css具体代码

@charset "utf-8";
/* CSS Document */
html{
	height:100%;
	}
body{
	background:linear-gradient(to bottom, #CBEBDB 0%, #3794C0 120%);
	height:100%;
	margin:0;
}
.container{
	margin:0 auto;
	padding:50px 0;
	width:720px;
	overflow:hidden;
}
.container p{
	height:80px;
	margin:30px 10px;
	overflow:hidden;
	word-wrap:break-word;
	line-height:1.5;
}
.container span{
	text-decoration:none;
	color:white;
	position:relative;
	left:150px;
	font-size:14px;
}
.item{
	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;
 }

上述代码中：
第3~5行代码设置html的高度为100%；
第6~10行代码设置body背景颜色渐变效果；
第11~16行代码设置许愿墙页面的最外层容器样式；
第17~23行代码设置许愿卡片内容的样式；
第24~30行代码设置许愿墙卡片“关闭”功能的样式；
第31行代码设置许愿墙卡片的样式。

建议

在编码时，先编写许愿墙页面的整体结构，主要包括< div >、< p >和< span >标签，然后再使用圆角边框和渐变来实现许愿墙页面的样式。编写完成后保存文件，用浏览器打开index.html页面，即可出现三栏布局页面效果。

文章来源:https://blog.csdn.net/m0_73657966/article/details/135636241
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章