本篇博客实现一个HTML与CSS简单页面效果实例
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 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="#">VIP会员</a></li> 22 </ul> 23 </div> 24 <div class="heading_img"> 25 <img src="img.jpg"> 26 </div> 27 <div class="heading_soptlight"> 28 <form> 29 <input type="text"> 30 </form> 31 </div> 32 </div> 33 </div> 34 <div class="body"> 35 <div class="body_title"> 36 <h3>熟悉极客学院</h3> 37 <p>加入极客学院，学习最新实战教程，全面提升你的技术能力</p> 38 </div> 39 <hr/> 40 <hr/> 41 </div> 42 43 </div> 44 45 <div class="footing"> 46 @极客学院 47 </div> 48 49 </div> 50 </body> 51 </html>
css代码：
1 *{ 2 margin:0px; 3 padding:0px; 4 } 5 6 body{ 7 background-color: snow; 8 } 9 .wrapper{ 10 80%; 11 height:1000px; 12 background-color: antiquewhite; 13 margin:0px auto; 14 } 15 .heading{ 16 100%; 17 height:160px; 18 background-color: snow; 19 margin:0px auto; 20 } 21 ul{ 22 margin-left:40px; 23 float:left; 24 list-style-type:none; 25 padding-top:40px; 26 padding-bottom:6px; 27 } 28 a:link,a:visited{ 29 font-weight:bold; 30 color:darkgray; 31 text-align:center; 32 padding:6px; 33 text-decoration: none; 34 } 35 a:hover,a:active{ 36 color:blue; 37 } 38 .heading_title{ 39 float:left; 40 font-family:Arial,Helvetica,sans-serif; 41 font-size:30px; 42 color:burlywood; 43 } 44 .heading_nav{ 45 padding-bottom:30px; 46 padding-top:30px; 47 100%; 48 height:30px; 49 position:relative; 50 } 51 li{ 52 padding-left:10px; 53 display:inline; 54 } 55 56 .heading_img img{ 57 border-radius:30px; 58 display:inline; 59 46px; 60 height:46px; 61 box-shadow:0 1px 1px rgba(0,0,0,0.2); 62 float:right; 63 } 64 65 .heading_soptlight form{ 66 float:right; 67 100px; 68 height:26px; 69 position:relative; 70 margin-right:82px; 71 margin-top:16px; 72 } 73 form input{ 74 height:26px; 75 border-radius:30px; 76 } 77 .body{ 78 auto; 79 height:auto; 80 padding:30px; 81 } 82 .body_title h3{ 83 font-size:30px; 84 font-family:Arial,Helvetical,sans-serif; 85 color:#333333; 86 } 87 .body_title p{ 88 margin-top:20px; 89 margin-bottom:20px; 90 } 91 .footing{ 92 padding-top:20px; 93 text-align:center; 94 fon-size:10px; 95 color:darkgray; 96 }
效果：
