大年三十晚-初一
CSS布局案例
1.开发习惯
2.难易程度
3.可维护性
开发顺序
从整体到部分
从左到右
从上到下
css布局案例.html：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS网页布局</title> ???<link rel="stylesheet" href="css/index.css"></head><body> ???<!-- 头部 --> ???<div class="header"> ???????<div class="logo"> ???????????<img src="image/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="image/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"> ???????????????????<img src="image/weibo.png" alt=""> ???????????????????<div class="comm">MICROBLOG</div> ???????????????</div> ???????????????<div class="commen"> ???????????????????<img src="image/weixin.png" alt=""> ???????????????????<div class="comm">WECHAT</div> ???????????????</div> ???????????????<div class="commen"> ???????????????????<img src="image/QQ.png" alt=""> ???????????????????<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="image/03-01.jpg" alt=""> ???????????????????<div class="des1">Cool Image</div> ???????????????????<div class="des2">Record The Picture</div> ???????????????</div> ???????????????<div class="m-com"> ???????????????????<img src="image/03-02.jpg" alt=""> ???????????????????<div class="des1">Great Picture</div> ???????????????????<div class="des2">Record The Picture</div> ???????????????</div> ???????????????<div class="m-com"> ???????????????????<img src="image/03-03.jpg" alt=""> ???????????????????<div class="des1">Cool Image</div> ???????????????????<div class="des2">Record The Picture</div> ???????????????</div> ???????????</div> ???????????<div class="clear"></div> ???????</div> ???????<div class="footer"> ???????????<div class="content"> ???????????????<div class="title">FROM THE PHOTO ALBUM</div> ???????????????<div class="pic-content"> ???????????????????<dl> ???????????????????????<dt> ???????????????????????????<img src="image/04-01.jpg"> ???????????????????????</dt> ???????????????????????<dd> ???????????????????????????<div 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. ???????????????????????????</div> ???????????????????????</dd> ???????????????????</dl> ???????????????????<dl> ???????????????????????<dt> ???????????????????????????<img src="image/04-02.jpg"> ???????????????????????</dt> ???????????????????????<dd> ???????????????????????????<div 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. ???????????????????????????</div> ???????????????????????</dd> ???????????????????</dl> ???????????????</div> ???????????????????<div class="clear"></div> ???????????</div> ???????</div> ???</div> ???<!-- 尾部 --> ???<div class="footer"> ???????<div class="message"> ???????????? 2016 imooc.com ?京ICP备13046642号 ???????</div> ???</div></body></html>
index.css:
*{ ???margin: 0; ???padding: 0;}.header{ ???width: 100%; ???height: 100px; ???background-color: #ccc;}.header img{ ???padding-left: 250px; ???height: 85px; ???padding-top: 8px;}.header .logo{ ???float: left;}.header .nav{ ???float: right;}.header .nav ul li{ ???list-style-type: none; ???width: 80px; ???height: 100px; ???line-height: 100px; ???float: left; ???font-size: 15px; ???font-style: "微软雅黑"; ???color: #7d7d7d;}.header .nav ul{ ???padding-right: 300px;}.main .top{ ???width: 100%; ???height: 600px;}.main .top img{ ???width: 100%; ???height: 600px;}.main .toplayer{ ???position: absolute; ???top: 100px; ???left: 0; ???background-color: #000; ???opacity: 0.5; ???width: 100%; ???height: 600px;}.main .toplayer-top{ ???width: 500px; ???height: 300px; ???position: absolute; ???top: 350px; ???left: 50%; ???margin-top: -150px; ???margin-left: -250px; ???z-index: 2;}.main .toplayer-top .word{ ???text-align: center; ???width: 100%; ???height: 100px; ???padding-top: 100px; ???color: #fff; ???font-family: "微软雅黑"; ???font-size: 45px; ???font-weight: bolder;}.main .toplayer-top button{ ???width: 200px; ???height: 60px; ???background-color: #f5704f; ???font-family: "微软雅黑"; ???text-align: center; ???border-radius: 8px; ???font-weight: bolder; ???margin-left: 150px;}.main .middle{ ???width: 55%; ???margin: 0 auto;}.main .middle .m-top .commen{ ???float: left; ???padding-top: 50px; ???width: 33.3%; ???text-align: center;}.main .middle .m-top .commen img{ ???width: 100px; ???height: 100px;}.main .middle .m-top .commen .comm{ ???padding-top: 20px; ???font-size: 20px; ???font-weight: bold; ???color:#7C7D7F}.clear{ ???clear: both;}.main .middle .m-middle{ ???padding-top: 50px; ???padding-bottom: 50px; ???font-size: 22px; ???color: #E19796; ???font-weight: bold; ???font-style: italic; ???text-align: center;}.main .middle .m-bottom{ ???width: 100%;}.main .middle .m-bottom .m-com{ ???width: 33.3%; ???float:left;}.main .middle .m-bottom .m-com img{ ???width: 310px; ???height: 260px;}.main .middle .m-bottom .m-com .des1{ ???text-align: center; ???font-weight: bold; ???font-size: 20px; ???padding-top: 20px; ???color: #7C7D7F;}.main .middle .m-bottom .m-com .des2{ ???text-align: center; ???font-weight: bold; ???font-size: 20px; ???padding-top: 10px; ???color: #BDBDBC; ???padding-bottom: 20px;}.main .footer{ ???width: 100%; ???background-color: #F9F9F9;}.main .footer .content{ ???width: 55%; ???margin: 0 auto;}.main .footer .content .title{ ???text-align: center; ???font-size: 20px; ???font-weight: bold; ???font-family: "微软雅黑"; ???padding-bottom: 50px; ???padding-top: 50px; ???color: #7C7D7F;}.main .footer .content .pic-content dl img{ ???width: 470px; ???padding-left: 15px;}.main .footer .content .pic-content dl{ ???width: 50%; ???float: left;}.main .footer .content .pic-content .word{ ???font-size: 20px; ???font-weight: bold; ???padding:20px 15px 50px 15px; ???color: #7c7d7f;}.footer .message{ ???width: 100%; ???height: 100px; ???text-align: center; ???line-height: 100px; ???color: #fff; ???background-color: rgb(41, 44, 53);}图示：
02css布局案例
原文地址：https://www.cnblogs.com/shink1117/p/8450269.html