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

news2024/11/15 17:27:01

项目展示

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

项目目录结构

在这里插入图片描述

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