学习此案例需要具备的基础：
1.HTML基础（div、ul、li、dl、dt、dd、img……）
2.CSS基础（字体、背景、图片……）
3.CSS定位、浮动（position、盒子模型、float）
板块分割原则：
开发习惯；
难易程度；
可维护性；
开发的顺序：
从整体到部分；
从左到右；
从上到下；
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS网页布局</title> <link href="img/index.css" rel="stylesheet" type="text/css"> </head> <body> <!-- 头部 --> <div class="header"> <div class="logo"> <img src="img/logo.png" alt="logo"><!-- alt是什么意思哎，有神么作用呢 --> </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.jpeg" > </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">MICROBLOG</div> </div> <div class="commen weixin"> <img src="img/weixin.png"> <div class="comm">WECHANT</div> </div> <div class="commen qq"> <img src="img/QQ.png"> <div class="comm">QQ</div> </div> </div> <div class="clear"></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">Cool Image</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> <div class="clear"></div> <div class="bottom"> <div class="content"> <div class="title">FROM THE 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 carefully. when read mind open , all things have indifference to heart. life is the precipitation.</dd> </dl> <dl> <dt><img src="img/04-02.jpg"</dt> <dd class="word">life is like a tea,just read more and more refined, more write carefully. when read mind open , all things have indifference to heart. life is the precipitation.</dd> </dl> </div> <div class="clear"></div> </div> </div> </div> <!-- 底部 --> <div class="footer"></div> </body> </html>
index.css
*{ padding:0; margin:0; } .header{ width:100%; height:100px; background-color:#eee; } .header img{ width:300px; height:85px; padding-left:100px; padding-top:8px; } .header .logo{ float:left; } .header .nav{ float:right; } .header .nav ul{ padding-right:100px; } .header .nav ul li{ float:right; list-style: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:0; 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;/*上面那个也脱离文档流了，所以要加z-index 上层显示 */ 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-family: "微软雅黑"; text-align:center; font-weight:bolder; font-size:14px; border-radius:8px;/*圆角*/ clear:both;/*清除浮动*/ margin-left:150px; } .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:bold; padding-top:20px; } .main .middle .m-middle{ font-size:22px; color:#e19795; font-weight:bold;/*字体加粗*/ padding-top:50px; font-style:italic;/*斜体*/ text-align:center; padding-bottom:50px; } .clear{ clear:both;/*在代码中要加入空的clear标签，清除浮动*/ } .main .middle .m-bottom .m-com{ width:33.3%; float:left; padding:0.1px; text-align:center; font-size:20px; font-weight:bold; } .main .middle .m-bottom .m-com img{ width:310px; height:260px; } .main .middle .m-bottom .m-com .des1{ color:#7d7d7f; padding-top:20px; } .main .middle .m-bottom .m-com .des2{ color:#bdbdbc; padding-top:10px; } .main .bottom{ background-color:#f9f9f9; } .main .bottom .content{ width:1000px; margin:0 auto; } .main .bottom .content .title{ text-align:center; font-size:20px; font-weight:bold; color:#7d7c7f; font-famliy:"微软雅黑"; padding-top:50px; padding-bottom:50px; } .main .bottom .content .pic-content dl{ float:left; width:470px; margin:10px 12px; } .main .bottom .content .pic-content dl img{ width:470px; height:460px; } .main .bottom .content .pic-content dl .word{ padding-top:20px; font-size:20px; font-weight:bold; color:#7d7c7f; padding-bottom:50px; }