演示网址：
http://www.qieban.cn/html/fujiandiantai
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>1MantMedia </title>
<link rel="stylesheet" href="css/glide.css">
<link rel="stylesheet" href="css/style.css">
<!--[IF lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="header">
<div class="wrapper">
<div class="logo">
<a href="#"><img src="imgs/logo1.png"/></a>
<a href="#" class="logo2"><img src="imgs/logo2.png"/></a>
</div>
<div class="nav">
<ul>
<li class="selected li1"><strong><a href="#">首页</a></strong></li>
<li><strong><a href="#">我要上电视</a></strong></li>
<li><strong><a href="#">森林广场</a></strong></li>
<li><strong><a href="#">家长资讯</a></strong></li>
<li>
<strong><a href="#">更多<i class="arr-ico"></i></a></strong>
<dl>
<dt></dt>
<dd><a href="#">顽瞳活动</a></dd>
<dd><a href="#">教育机构</a></dd>
</dl>
</li>
</ul>
<div class="red-line"></div>
</div>
<div class="sear">
<form action="" method="post">
<input TYPE="text" class="text" name="" placeholder="输入关键词" ID="" value="" />
<input TYPE="submit" class="submit" value=""/>
</form>
</div>
</div>
</div>
<div class="wrapper">
<div class="glide">
<ul class="slides">
<li class="slide"><a href="#"><img src="imgs/zp2.jpg"/></a></li>
<li class="slide"><a href="#"><img src="imgs/zp2.jpg"/></a></li>
<li class="slide"><a href="#"><img src="imgs/zp2.jpg"/></a></li>
</ul>
</div>
</div>css代码：
/*公共样式*/
.header {
height: 101px;
width: 100%;
background: url(../imgs/bg1.jpg) repeat-x bottom;
}
.wrapper {
width: 1000px;
margin: 0 auto;
}
.header .logo {
float: left;
width: 200px;
margin-top:6px
}
.header .logo2 {
margin-left: 25px;
}
.header .nav {
width: 500px;
float: left;
position: relative;
}
.header .nav ul {
height: 101px;
position: relative;
}
.header .nav li {
float: left;
line-height: 95px;
font-size: 15px;
width: 82px;
margin: 0 7px;
text-align: center;
}
.header .nav li a {
display: inline-block;
}
.header .nav li.li1 {
margin: 0;
}
.header .nav li strong {
font-weight: normal !important;
}
.header .nav .red-line {
height: 6px;
background: #EC6B17;
width: 82px;
width: 82px;
position: absolute;
bottom: 0;
}
.header .nav li.selected a {
color: #ec6b18;
}
.header .nav li.selected dd a {
color: #5b6873;
}
.header .nav li a {
color: #5b6873;
}
.header .nav li a:hover {
text-decoration: none;
color: #EC6B18;
}
.header .nav li .arr-ico {
background: url(../imgs/arrow.png) no-repeat;
width: 8px;
height: 4px;
display: inline-block;
position: relative;
top: -4px;
margin-left: 4px;
}
.header .nav li dl {
position: absolute;
display: none;
top: 80px;
z-index: 99;
background: #fff;
height: auto;
width: 110px;
border: 1px solid #DDDDDD;
}
.header .nav li dl dt {
background: url(../imgs/bg2.jpg) no-repeat top center;
position: absolute;
top: -8px;
left: 0;
width: 110px;
display: inline-block;
height: 10px;
}
.header .nav li dd {
line-height: 32px;
height: 32px;
border-bottom: 1px solid #EEEEEE;
margin:0 5px;
}
.header .nav li dl a {
color: #5b6873;
}
.header .sear {
float: left;
margin-top: 30px;
width: 224px;
height: 39px;
border: 1px solid #F2D2BE;
border-right: none;
}
.header .sear .text {
border: none;
color: #ffa56b;
float: left;
padding-left: 5px;
width: 177px;
margin-top: 10px;
}
.header .sear .submit {
float: right;
border: none;
background: #EC6B17 url(../imgs/sear.png) no-repeat center;
cursor: pointer;
width: 39px;
height: 39px;
}
/*侧边栏*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 68px;
background: #363636;
text-align: center;
z-index: 999;
}
.sidebar h4 {
color: #fff;
color: #ffffff;
}
.sidebar .sidebar-btn {
padding: 8px 0;
}
切版- 切图网（qietu.com）旗下psd转html，前端外包的“切图客”团体。
