HTML与CSS简单页面效果实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML与CSS简单页面效果实例</title> <style> * { 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-top: 30px; padding-bottom: 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: 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: #333333; } .body_title p { margin-top: 20px; margin-bottom: 20px; } .footing { padding-top: 20px; padding-bottom: 20px; text-align: center; font-size: 10px; color: darkgray; } </style> </head> <body> <div class="container"> <div class="wrapper"> <div class="heading"> <div class="heading_nav"> <div class="heading_title"> HTML与CSS简单页面效果实例 </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="Scripts/img/bg.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"> @kikyo </div> </div> </body> </html>