index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="wrapper"> <div class="heading"> <div class="heading_nav"> <div class="heading_title"> 宇宙学院 </div> <div class="heading_navbar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">职业课程</a></li> <li><a href="#">技术问答</a></li> <li><a href="#">VIP会员</a></li> </ul> </div> <div class="heading_img"> <img src="images/06.jpg" /> </div> <div class="heading_soptlight"> <form> <input type="text" /> </form> </div> </div> </div> <div class="body"> <div class="body_title"> <h3>熟悉宇宙学院</h3> <p>加入宇宙学院，学习最新实战教程，全面提升你的技术能力</p> </div> <hr /> <hr /> </div> </div> <div class="footing"> @宇宙学院 </div> </div> </body> </html>style.css
*{ margin:0; padding:0; } body{ background-color:snow; } .wrapper{ width:80%; height:1000px; background-color:antiquewhite; margin:0 auto; } .heading{ margin:0; width:100%; height:90px; background-color:snow; margin:0 auto; } .heading_title{ float:left; font-family:Arial, Helvetica, sans-serif; font-size:30px; color:burlywood; } .heading_nav{ padding-bottom:30px; padding-top:30px; width:100%; height:30px; position:relative; } ul{ margin-left:40px; float:left; list-style-type:none; padding-top:6px; padding-bottom:6px; } li{ padding-left:10px; display:inline-block; } a:link,a:visited{ font-weight:bold; color:darkgray; text-align:center; padding:6px; text-decoration:none; } a:hover,a；active{ color:dimgray; } .heading_img img{ border-radius:30px; display:inline; width:26px; height:26px; box-shadow:0 1px 1px rgba(0,0,0,0.2); float:right; } .heading_soptlight form{ float:right; width:100px; height:26px; position:relative; margin-right:80px; } form input{ height:26px; border-radius:30px; } .body{ padding:30px; height:auto; width:auto; } .body_title h3{ font-size:30px; font-family:Arial, Helvetica, sans-serif; color:#333; } .body_title p{ margin-top:20px; margin-bottom:20px; } .footing{ padding-top:20px; text-align:center; font-size:10px; color:darkgray; padding-bottom:20px; }