福建电视台

切版网专注网页切版服务


演示网址：

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;
}
免费索取报价