效果展示：
HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>标题</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <div class="container"> 10 <div class="wrapper"> 11 <div class="heading"> 12 <div class="heading_nav"> 13 <div class="heading_title"> 14 新闻实战 15 </div> 16 <div class="heading_navbar"> 17 <ul> 18 <li><a href="#">首页</a></li> 19 <li><a href="#">推荐</a></li> 20 <li><a href="#">军事</a></li> 21 <li><a href="#">财经</a></li> 22 <li><a href="#">娱乐</a></li> 23 <li><a href="#">体育</a></li> 24 <li><a href="#">科技</a></li> 25 <li><a href="#">游戏</a></li> 26 <li><a href="#">汽车</a></li> 27 <li><a href="#">房产</a></li> 28 </ul> 29 </div> 30 <div class="heading_image"> 31 <img src="image.jpg"> 32 </div> 33 <div class="heading_spotlight"> 34 <form> 35 <input type="text"> 36 </form> 37 </div> 38 </div> 39 </div> 40 <div class="body"> 41 <div class="body_title"> 42 <h3>热点要闻</h3> 43 <p>每天关注全球发生的新鲜事</p> 44 </div> 45 <hr/> 46 <hr/> 47 </div> 48 </div> 49 <div class="footing"> 50 @新闻实战 51 </div> 52 </div> 53 </body> 54 </html>
CSS
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 body{ 6 background-color: snow; 7 } 8 .wrapper{ 9 width: 80%; 10 height: 1000px; 11 background-color: antiquewhite; 12 margin: 0px auto; 13 } 14 .heading{ 15 margin: 0px auto; 16 width: 100%; 17 height: 90px; 18 background-color: snow; 19 } 20 .heading_title{ 21 float: left; 22 font-family: Arial, Helvetica, sans-serif; 23 font-size: 30px; 24 color: burlywood; 25 } 26 .heading_nav{ 27 padding-bottom: 30px; 28 padding-top: 30px; 29 width: 100%; 30 height: 30px; 31 position: relative; 32 } 33 ul{ 34 margin-left: 40px; 35 float: left; 36 list-style-type: none; 37 padding-top: 6px; 38 padding-bottom: 6px; 39 } 40 li{ 41 padding-left: 10px; 42 display: inline; 43 } 44 a:link,a:visited{ 45 font-weight: bold; 46 color: darkgray; 47 text-align: center; 48 padding: 6px; 49 text-decoration: none; 50 } 51 a:hover,a:active{ 52 color: dimgray; 53 } 54 .heading_image img{ 55 border-radius: 30px; 56 display: inline; 57 width: 26px; 58 height: 26px; 59 box-shadow: 0 1px 1px rgba(0,0,0,0.2); 60 float: right; 61 } 62 .heading_spotlight form{ 63 float: right; 64 width: 150px; 65 height: 26px; 66 position: relative; 67 margin-right: 50px; 68 } 69 form input{ 70 height: 26px; 71 border-radius: 30px; 72 } 73 .body{ 74 padding: 30px; 75 height: auto; 76 width: auto; 77 } 78 .body_title h3{ 79 font-size: 30px; 80 font-family: Arial, Helvetica, sans-serif; 81 color: dimgray; 82 } 83 .body_title p{ 84 margin-top: 20px; 85 margin-bottom: 20px; 86 } 87 .footing{ 88 padding-top: 20px; 89 text-align: center; 90 font-size: 10px; 91 color: darkgray; 92 }