<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0;/*无边距*/ padding: 0;/*无边距*/ } a{ text-decoration: none;/*默认不加下划线*/ } body{ font-family: "Times New Roman"; font-size: 12px; } /*----------head部分开始*/ .head-box{ background-color: #2459a2; height: 44px; 100%; position: fixed; top: 0; left: 0; } .head-content{ 1016px; background-color:#396bb3; height: 44px; line-height: 44px; margin: 0 auto;/*居中*/ position: relative;/*相对定位*/ } .head-content .logo{ display: inline-block;/*块级*/ background: url("123.jpg"); 121px; height: 23px; float: left; margin-top: 11px; } .head-content .action-menu{ float: left; margin-left: 5px; } .head-content .action-menu a.tb{ display: inline-block; float: left; margin-left: -3px; /*border: 1px solid red;*/ padding: 0 16px 0 13px; } .head-content .action-menu a.tb:hover{/*a标签名点类名调用*/ color: white; background: #396bb3; /*a:link {color: #FF0000} /* 未访问时的状态 。 a:visited {color: #00FF00} /* 已访问过的状态 a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态。 a:active {color: #0000FF} /* 鼠标按下去时的状态 。 */ } .head-content .action-menu a.active,.head-content .action-menu a.active:hover{/*a标签名点类名调用*/ color: white; background: #204982; } .key-search{ float: right; margin-top: 5px; } .key-search .search-txt{ float: left; 91px; height: 25px; padding: 2px 2px 2px 5px; } .key-search a{ display: inline-block;/*可以设置长款*/ 31px; height: 32px; background: #f4f4f4; } .key-search a span.ico{/*span标签名点类名调用*/ display: inline-block; 11px; height: 13px; background: url("123.jpg"); margin-left: 10px;/*2个div之间用margin或者inlineblock*/ margin-top: -3px; } .action-nav{ position: absolute;/*这里绝对定位（脱离文档流)，上面head-congtent相对定位*/ right: 150px; } .action-nav a{ display: inline-block; line-height: 44px; color: white; margin: 0 5px; padding: 0 20px; } .action-nav a:hover{ background-color: #396bb3; } </style> </head> <body> <div class="head-box"> <div class="head-content"> <a href="#"class="logo"></a> <div class="action-menu"> <a href="#" class="tb active">全部</a> <a href="#"class="tb">段子</a> <a href="#"class="tb">图片</a> <a href="#"class="tb">你问我答</a> <a href="#"class="tb">42区</a> <a href="#"class="tb">挨踢1024</a> </div> <div class="key-search"> <form action="/" method="post"> <input type="text" class="search-txt"> <a href="#" class="i"> <span class="ico"></span> </a> </form> </div> </div> </div> <div class="main-content-box"> <div class="content-L"></div> <div class="content-R"></div> <div class="footer-box"></div> </div> </body> </html>