这是跟着老师做的一个小案例，小小的有了一点成就感，下次努力
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css 网页布局</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--头部-->
<div class="header">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="nav">
<ul>
<li>首页</li>
<li>图片</li>
<li>视频</li>
<li>手记</li>
</ul>
</div>
</div>
<!--主体-->
<div class="main">
<!-- 主体的上部-->
<div class="top">
<img src="img/1.png">
</div>
<!-- 遮罩层-->
<div class="topLayer"></div>
<!-- 遮罩层的上部，包括文字和按钮-->
<div class="topLayer-top">
<div class="word">MY BEAUTIFUL LIFE</div>
<button>LOOK MORE ></button>
</div>
<!-- 主体的中间部分-->
<div class="middle">
<div class="m-top">
<div class="commen weibo">
<img src="img/weibo.png">
<div class="comm">MTCROBLOG</div>
</div>
<div class="commen weixin">
<img src="img/weixin.png">
<div class="comm">WECHAT</div>
</div>
<div class="commen qq">
<img src="img/QQ.png">
<div class="comm">QQ</div>
</div>
<div class="clear"></div> <!--清除浮动-->
</div>
<div class="m-middle">
"I want to give good things to record down,<br/>
after the recall will be very beautiful."
</div>
<div class="m-bottom">
<div class="m-com">
<img src="img/03-01.jpg">
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="img/03-02.jpg">
<div class="des1">Great Picture</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="img/03-03.jpg">
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
</div>
<div class="clear"></div>
<!--主体的下部-->
<div class="bottom">
<div class="content">
<div class="title">FROM THE PHOTO ALBUM</div>
<div class="pic-content">
<dl>
<dt> <img src="img/04-01.jpg"></dt>
<dd class="word1">Life is like a book, just read more and more<br/>
refined, more write more carefully.When<br/>
read, mind open, all things have been<br/>
indifferent to heart. Life is the precipitation.</dd>
</dl>
<dl>
<dt> <img src="img/04-02.jpg"></dt>
<dd class="word1">Life is like a cup of tea, let people lead a<br/>
person to endless aftertastes. You again good<br/>
taste, it will always have a different taste,<br/>
different people will have different taste more.</dd>
</dl>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
<!--底部-->
<div class="footer">
<p>作者：浅浅谦谦芊芊</p>
</div>
</body>
</html>
*{
margin:0;
padding:0;
}
.header{
width:100%;
height:100px;
}
.header img{
width:300px;
height:85px;
padding-left:100px;
padding-top:8px;
}
.header .logo{
float:left;
}
.header .nav{
float:right;
}
.header .nav ul li{
float:left;
list-style-type: none;
width:80px;
height:100px;
line-height:100px;
font-size: 15px;
font-weight:bolder;
color:#7d7d7d;
}
.main .top{
width:100%;
height:600px;
}
.main .top img{width:100%;
height:600px;
}
.main .topLayer{
position:absolute;
top:100px;
left:0px;
background-color: #000;
width:100%;
height:600px;
opacity:0.5;
}
.main .topLayer-top{
width:500px;
height:300px;
position:absolute;
top:400px;
margin-top:-150px;
z-index:2;
right:50%;
margin-right:-250px;
}
.main .topLayer-top .word{
padding-top:100px;
color:#fff;
font-size:45px;
font-weight: bolder;
text-align: center;
font-family:" 微软雅黑";
}
.main .topLayer-top button{
width:200px;
height:60px;
margin-top:50px;
color:#fff;
background-color:#f5704f;
font-size:14px;
font-weight: bolder;
text-align: center;
font-family:" 微软雅黑";
border-radius:8px; /*设置圆角*/
margin-left:150px;
}
.main .middle{
width:1000px;
margin:0 auto;/*居中*/
}
.main .middle .m-top .commen{
float:left;
width:33.3%;
padding-top:50px;
text-align:center;
}
.main .middle .m-top .commen img {
width:100px;
height:100px;
}
.main .middle .m-top .commen .comm{
font-size:20px;
color:#7d7c7f;
font-weight:bolder;
padding-top:20px;
}
.main .middle .m-middle{
font-size:22px;
color:#e19796;
font-weight:bold;
padding-top:50px;
font-style:italic; /*斜体*/
text-align:center;
padding-bottom: 50px;
}
.clear{
clear:both;/* 清除浮动*/
}
.main .middle .m-bottom .m-com{
float:left;
padding:10px 10px;
font-size:20px;
font-weight:bold;
text-align: center;
}
.main .middle .m-bottom .m-com img{
width:310px;
height:260px;
}
.main .middle .m-bottom .m-com .des1{
padding-top:20px;
color:#7d7d7f;
}
.main .middle .m-bottom .m-com .des2{
padding-top:10px;
color:#bdbdbc;
}
.main .bottom{
background-color:#f9f9f9;
}
.main .bottom .content{
width:1000px;
margin:0 auto;
}
.main .bottom .content .title{
text-align: center;
font-size:30px;
font-weight:bold;
font-family:"微软雅黑";
color:#7d7c7f;
padding-top:50px;
padding-bottom:50px;
}
.main .bottom .content .pic-content dl{
float:left;
width:470px;
padding:10px 12px;
}
.main .bottom .content .pic-content dl img{
width:470px;
height:460px;
}
.main .bottom .content .pic-content dl .word1{
padding-top:20px;
font-size:20px;
font-weight:bold;
color:#7d7c7f;
padding-bottom:50px;
}
.footer{
width:100%
height:500px;
background-color:#040410;
}
.footer p{
color:#f9f9f9;
font-size:20px;
text-align: center;
padding:20px;
}
标签中一个单词的颜色