HTML与CSS绘制简单DIV布局

HTML代码
<!
DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>极客学院</title> <link href="style.css" type="text/css" rel="stylesheet"> </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="1.jpg"> </div> <div class="heading_spotlight"> <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>

图片源1.jpg如下
HTML与CSS绘制简单DIV布局_第1张图片

效果如下HTML与CSS绘制简单DIV布局_第2张图片


 

CSS代码
*
{ margin: 0px; padding: 0px; } body{ background-color: snow; } .wrapper{ width: 80%; height: 1000px; background-color: antiquewhite; margin:0px auto; } .heading{ width: 100%; height: 90px; background-color: snow; margin: 0px 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; } 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: 50px; } form input{ float: right; height: 26px; border-radius: 30px; } .body{ width: auto; height: auto; padding: 30px; } .body_title h3{ font-size: 30px; font-family: Arial, Helvetica, sans-serif; color: #333333; } .body_title p{ margin-top: 20px; margin-bottom: 20px; } .footing{ padding-top: 20px; text-align: center; font-size: 10px; color: darkgray; }

 

你可能感兴趣的:(html)