<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <link href="css/MasterPage.css" type="text/css" rel="Stylesheet" /> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <div> <div class="top_nav"> <div class="top_nav_bg"> <div class="top_nav_left"> <!--未登录--> <a target="_blank" href="" rel="nofollow">QQ登录</a> <a href="">请登录</a> <a href="">免费注册</a> </div> <div class="top_nav_right"> <a href="">我的主页</a> <a href="" target="_blank" rel="nofollow">消息</a> <a href="" target="_blank"> 邀请好友 </a><a href="" target="_blank">帮助中心</a> <a href="" target="_blank">客服在线</a> </div> </div> </div> <div class="serch"> <div class="serch_bg"> <div class="serch_bg_left"> <img src="" alt="网站logo" /></div> <div class="serch_bg_center"> <div class="serch_bg_center_top"> <input class="serch_bg_center_input" /> <button type="button" class="serch_bg_center_button"> 搜索</button></div> <div class="serch_bg_center_bottom"><span>热门搜索：</span></div> </div> <div class="serch_bg_by"> <img src="" alt="网站标语" /></div> </div> </div> <div class="main-nav"> <ul> <li><a href="" class="select" title="首页">首页</a></li> <li><a href="" title="品牌特卖">导航1</a></li> <li><a href="" title="10元购">导航2</a></li> <li><a href="" title="优品惠">导航3</a></li> <li><a href="" class="" title="购物返利">导航4</a></li> <li><a href="" target="_blank" title="手机客户端">导航5</a></li> </ul> </div> <div class="container"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div class="footer"> <div class="footer-nav"> <a rel="nofollow" href="">首页</a> | <a rel="nofollow" href="/help/about.html">关于</a> | <a rel="nofollow" href="/help/contact.html">联系我们</a> | <a rel="nofollow" href="/help/partner.html"> 商务合作</a> | <a rel="nofollow" href="/help/center.html">帮助中心</a>| <a rel="nofollow" href="/help/contact.html">客服在线</a> | <a href="/">手机客户端</a> | <a href="">网站地图</a> </div> <div class="copyright"> © 2011-2015 克拉玛依淘宝网 - <a href="#" target="_blank" rel="nofollow" class="outer-url" data-url="aHR0cDovL3d3dy5odXNvci5jb20uY24">****电子商务有限公司</a> - <a href="#" target="_blank" rel="nofollow" class="outer-url" data-url="aHR0cDovL3d3dy5taWliZWlhbi5nb3YuY24v"> 新ICP备12005806</a></div> </div> </div> </body> </html>
css代码：
* { margin: 0px; padding: 0px; } body { font: 12px/1.5 'Tahoma' , 'simsun'; font-family: arial; background: url( 'http://s0.husor.cn/image/bg.png' ) repeat #f1efeb; } .top_nav { background-color: #fff; height: 36px; border-bottom: 1px solid #eee; padding: 2px; min-width: 1010px; color: #666; } .top_nav .top_nav_bg { width: 1010px; margin: 0 auto; height: 36px; } .top_nav .top_nav_left { text-align: left; height: 36px; line-height: 36px; width: 200px; float: left; } .top_nav .top_nav_left a { margin-left: 10px; color: #666; text-decoration: none; } .top_nav .top_nav_right { text-align: right; height: 36px; line-height: 36px; width: 800px; float: left; } .top_nav .top_nav_right a { margin-left: 10px; color: #666; text-decoration: none; } .serch { margin-top: 1px; background-color: #fff; width: 100%; height: 100px; } .serch .serch_bg { position: relative; margin: 0 auto; width: 1010px; } .serch .serch_bg .serch_bg_left { position: relative; width: 200px; float: left; height: 80px; line-height: 80px; } .serch .serch_bg .serch_bg_left img { border: 0px; width: 100%; height: 100%; } .serch .serch_bg .serch_bg_center { position: relative; padding: 10 0 10 0; width: 600px; float: left; height: 80px; line-height: 80px; } .serch_bg_center_top { width: 100%; height: 50%; } .serch_bg_center_bottom { width: 100%; height: 50%; } .serch_bg_center_input { width: 480px; height: 30px; border: solid 2px #f60; } .serch_bg_center_button { color: #fff; background-color: #f60; font-size: 20px; width: 80px; margin-left: 10px; height: 35px; } .serch .serch_bg .serch_bg_by { position: relative; width: 150px; float: left; height: 80px; line-height: 80px; margin-left: 10px; } .main-nav { background-color: #f60; height: 40px; min-width: 1010px; } .main-nav ul { width: 1010px; margin: 0 auto; } .main-nav ul a { display: inline-block; color: #fff; font-family: '黑体'; font-size: 16px; line-height: 40px; height: 40px; padding: 0 16px; text-decoration: none; } .main-nav ul li { display: inline-block; display: inline; zoom: 1; cursor: pointer; } .main-nav ul li a:hover { background-color: #e50; text-decoration: none; } .main-nav ul li a.select { background-color: #d40 !important; } .container { margin: 0px auto; width: 1010px; min-height: 400px; box-shadow: 0 1px 3px #E1E1E1; } .footer { margin: 20px 0 0; padding: 40px 0 10px; text-align: center; background: url( 'http://s0.husor.cn/image/footer_bg.png' ) repeat-x #fff; height: 100px; } .footer-nav { color: #999; } .footer-nav a { margin: 0 10px; color: #666; text-decoration: none; } .copyright { color: #999; } .copyright a { color: #999; text-decoration: none; }