<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css布局实战练习项目</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <!-- 头部开始 --> <div class="heard"> <div class="logo"><img src="img/logo.png"/></div> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">图片</a></li> <li><a href="#">视频</a></li> <li><a href="#">手记</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </div> <!-- 头部结束 --> <!-- 内容开始 --> <div class="min"> <div class="top"> <img src="img/1.jpeg"/> <div class="topLayer"></div> <div class="topLayer-top"> <div class="word">MY BEAUTTFOL LIFE</div> <button>LOOK MORE ></button> </div> </div> <div class="middle"> <div class="m-top"> <div class="commen weibo"> <img src="img/weibo.png"/> <div class="comm">MICROBLOC</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."nfgbknfncbfgfdb </div> <div class="m-buttom"> <div class="m-com"> <img src="img/03-01.jpg"/> <div class="des1">Great Picture</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 class="clear"></div> </div> <!--中间的底部部分--> <div class="buttom"> <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="word"> Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation. </dd> </dl> <dl> <dt><img src="img/04-02.jpg"/></dt> <dd class="word"> Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more. </dd> </dl> <div class="clear"></div> </div> </div> </div> </div> </div> <!-- 内容结束 --> <!-- 尾部开始 --> <div class="footer"> © 2016 imooc.com 京ICP备13046642号c </div> <!-- 尾部结束 --> </body> </html>
*{ margin: 0; padding: 0; list-style: none; text-align: center; text-decoration: none; } .clear{ clear: both; } .heard{ width: 100%; height: 100px; /* background-color: #eeeeee;*/ } .heard .logo{ float: left; } .heard .nav{ float: right; } .logo img{ width: 300px; height: 85px; margin-top: 8px; padding-left: 30px; } .nav ul li{ float: right; padding-right:30px ; margin-left:30px ; line-height: 100px; font-size: 15px; font-weight: 700; color: #EEEEEE; } ul li a:hover{ color: red; } .min .top{ width: 100%; height: 600px; position: relative; } .min .top img{ width: 100%; height: 600px; } .min .topLayer{ position: absolute; top: 0px; left: 0; width: 100%; height: 600px; background-color:#000; opacity: 0.5; } .min .topLayer-top{ width: 500px; height: 300px; /*background-color: #FF0000;*/ position: absolute; top: 400px; left: 50%; margin-left: -250px; margin-top: -270px; z-index: 2; } .min .topLayer-top .word{ padding-top: 100px; font-size: 45px; font-family: "微软雅黑"; color: #fff; font-weight: 700; } .min .topLayer-top button{ width: 200px; height: 60px; color: #FFFFFF; margin-top: 50px; font-family: "微软雅黑"; font-size: 14px; font-weight: 700; background-color: #f5704f; border-radius:8%; } .min .middle{ width: 100%; margin: 0 auto; /* background-color: #000000;*/ } .min .middle .m-top .commen{ float: left; width: 33.3%; padding-top: 50px; } .min .middle .m-top .commen .comm{ font-size: 20px; font-family: "微软雅黑"; color: #7d7d7d; font-weight: 700; padding-top: 20px; } .min .middle .m-top .commen img{ width: 100px; height: 100px; } .min .middle .m-middle{ font-size: 22px; padding-top:50px ; font-weight: 700; font-style: italic; padding-bottom:50px ; } .min .middle .m-buttom .m-com{ font-size: 20px; font-weight: 700; float: left; width: 33.3%; } .min .middle .m-buttom .m-com img{ width: 310px; height: 260px; } .min .middle .m-buttom .m-com .des1{ color: #7d7d7f; padding-top: 20px; } .min .middle .m-buttom .m-com .des2{ color: #bdbdbc; padding-top: 10px; padding-bottom: 50px; } .min .middle .buttom{ width: 100%; background-color:#EEEEEE; /*height: 650px;*/ } .min .middle .buttom .content{ width: 1000px; margin: 0 auto; } .min .buttom .content .title{ font-size: 20px; color: #7D7D7F; font-weight: 700; padding-top: 50px; padding-bottom:50px ; } .min .buttom .content .pic-content dl{ float: left; width: 470px; margin: 10px 12px; } .min .buttom .content .pic-content dl img{ width: 470px; height: 460px; } .min .buttom .content .pic-content dl .word{ font-size: 20px; color: #7D7D7D; font-weight: 700px; padding-top: 20px; padding-bottom:50px ; text-align: left; } .footer{ width: 100%; height: 100px; background-color: #292c35; font-size: 15px; color: #FFFFFF; line-height: 100px; }
原文：https://www.cnblogs.com/zhangbozi/p/12775266.html