添加微信好友
演示网址：
http://www.qieban.cn/html/fujiandiantai
html代码：
[codesyntax lang=”div”]
<!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>
[/codesyntax]
css代码：
[codesyntax lang=”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;
}
[/codesyntax]
文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。
