<!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;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.head-content{
width: 1016px;
background-color:#396bb3;
height: 44px;
line-height: 44px;
margin: 0 auto;/*居中*/
position: relative;/*相对定位*/
}
.head-content .logo{
display: inline-block;/*块级*/
background: url("123.jpg");
width: 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;
width: 91px;
height: 25px;
padding: 2px 2px 2px 5px;
}
.key-search a{
display: inline-block;/*可以设置长款*/
width: 31px;
height: 32px;
background: #f4f4f4;
}
.key-search a span.ico{/*span标签名点类名调用*/
display: inline-block;
width: 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>
