CSS+DIV 實現個人網頁簡單樣板
阿新 • • 發佈：2018-11-06
實現如圖：
HTML：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="部落格實戰"> <meta name="description" content="htmlcss實戰"> <meta name="autor" content="twilight"> <title>羅毅峰的作業</title> <link rel="stylesheet" type="text/css" href="css.css"/> </head> <body> <!--頭部--> <div id="header"> <div class="logo_title"> <h3>LinuxCast.net Demo Site</h3> <p>LinuxCast.net演示頁面，Linux學習不再晦澀難懂</p> </div> <div class="navi"> <ul> <li><a href="">首頁</a></li> <li><a href="">閒言碎語</a></li> <li><a href="">我是誰</a></li> </ul> </div> <div class="clear"></div> </div> <!--中部--> <div id="wrapper"> <div class="main"> <div class="item"> <div class="item_img"> <img src="素材/1.png" alt="image"/> </div> <div class="item_content"> <h3>示例標題示例標題</h3> <p class="item_info">作者:twilight 日期：2017-2-2</p> <p class="item_desc">示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容</p> </div> </div> <div class="item"> <div class="item_img"> <img src="素材/1.png" alt="image"/> </div> <div class="item_content"> <h3>示例標題示例標題</h3> <p class="item_info">作者:twilight 日期：2017-2-2</p> <p class="item_desc">示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容</p> </div> </div> <div class="item"> <div class="item_img"> <img src="素材/1.png" alt="image"/> </div> <div class="item_content"> <h3>示例標題示例標題</h3> <p class="item_info">作者:twilight 日期：2017-2-2</p> <p class="item_desc">示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容</p> </div> </div> <div class="item"> <div class="item_img"> <img src="素材/1.png" alt="image"/> </div> <div class="item_content"> <h3>示例標題示例標題</h3> <p class="item_info">作者:twilight 日期：2017-2-2</p> <p class="item_desc">示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容</p> </div> </div> <div class="item"> <div class="item_img"> <img src="素材/1.png" alt="image"/> </div> <div class="item_content"> <h3>示例標題示例標題</h3> <p class="item_info">作者:twilight 日期：2017-2-2</p> <p class="item_desc">示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容</p> </div> </div> <div class="item"> <div class="item_img"> <img src="素材/1.png" alt="image"/> </div> <div class="item_content"> <h3>示例標題示例標題</h3> <p class="item_info">作者:twilight 日期：2017-2-2</p> <p class="item_desc">示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容示例內容</p> </div> </div> </div> <div class="sidebar"> <div class="author"> <div class="author_img"> <img src="3.jpg"/> </div> <div class="author_info"> <h4>twilight</p> <p>cease to struggle and you cease to live</p> </div> </div> <div class="article"> <h3>推薦文章</h3> <ul> <li>推薦文章1</li> <li>推薦文章2</li> <li>推薦文章3</li> <li>推薦文章4</li> <li>推薦文章5</li> <li>推薦文章6</li> </ul> </div> <div class="site_info"> <p>訪客100</p> <p>文章數100</p> </div> </div> <div class="clear"></div> </div> <!--尾部--> <div id="footer"> <div class="left">Copyright © 1999-2016, balalalalal, All Rights Reserved</div> <div class="right"> <ul> <li>關於我們</li> <li>聯絡我們</li> <li>使用條款</li> <li>意見反饋</li> </ul> </div> </div> </body> </html>
CSS：
body{ background-image:url("2.jpg"); } /*-------------頭部-------------*/ #header{ width:960px; color:gray; border-bottom:dashed 1px white; margin:0 auto; margin-bottom:10px; } .logo_title{ float:left; } .logo_title h3{ font-size:30px; margin-top:14px; } .logo_title p{ font-size:20px; } /*---------------------------------*/ .navi{ float:right; margin:0 auto; margin-top:66px; color: red; } .navi a{ color:grey; text-decoration:none; } .navi ul { list-style:none; } .navi ul li{ display:inline; margin-right:8px; border:1px solid grey; padding:4px 8px; border-radius:6px; } .clear{ clear:both; } /*----------------主體-----------------*/ #wrapper{ width:960px; margin:0 auto; margin-bottom:15px; } .main{ width:610px; background-color:white; border-radius:8px; float:left; padding:20px; } .item_img{ float:left; margin:10px; margin-top:4px; } .item_img img{ width:80px; height:80px; } .item_content{ margin-left:100px; } .item_content h3{ font-size:22px; color:#a5612d; margin:0; } .item_info{ font-size:12px; font-style:italic; margin:0; color:#999; } .item_desc{ font-size:14px; margin:0; color:gray; margin-top:10px; padding-left:5px; border-left:solid 1px #999; } .item{ border-bottom:dashed 1px #999; padding :20px; } .sidebar{ width:300px; background-color:white; border-radius:8px; float:right; padding-top:10px; } .author_img img{ width:120px; height:120px; border-radius:10px; } .author_img{ width:120px; height:120px; margin: 0 auto; } .author_info{ margin: 10px 10px; padding:0; border:solid #ddd 1px; border-radius:8px; background-color:#eee; } .author_info h4{ margin:0; padding:0; text-align:center; font-weight:bold; } .article h3{ font-style:italic; margin-left:10px; border-bottom:dashed 1px #aaa; padding-bottom:4px; } .article ul { list-style:none; padding:0; margin-left:40px; } .site_info{ border-top :dashed 1px #aaa; } .site_info p { text-align:center; font-size:12px; color:gray; } /*---------------尾部-----------------*/ #footer{ width:960px; height:100px; margin:0 auto; background-color:blue; border-top:dashed white 1px; } #footer .left{ color:grey; float:left; margin-top:10px; } #footer .right{ color:grey; float:right; font-size:14px; } #footer .right ul { margin-top:10px; list-style:none; } #footer .right ul li { display:inline-block; margin-right:5px; }