效果不一样
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>KZ0902广告网</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="icon" href="image/jj.jpg" type="image/x-icon">
<script type="text/javascript" src="js/myfocus-2.0.1.min.js" ></script>
<script type="text/javascript" src="js/mf-pattern/mF_qiyi.js"></script>
<link rel="stylesheet" type="text/css" href="js/mf-pattern/mF_qiyi.css">
<script type="text/javascript">
myFocus.set({
id:'picBox'}
)
</script>
</head>
<body>
<div id="top">
<div class="top orta">
<div class="top-top">
<div class="top-logo"><a href="#"><img src="image/dalogo.jpg"></a></div>
<div class="top-daohang">
<ul>
<li><a href="#">本站介绍</a></li>
<li><a href="#">广告投放</a></li>
<li><a href="#">休闲论坛</a></li>
<li><a href="#">租售买卖</a></li>
<li><a href="youke.html">游客必访</a></li>
<li><a href="#">网站首页</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="da-guanggao" id="picBox">
<div class="guanggao orta pic" >
<ul>
<li>
<a href="#"><img src="image/jingdian2.jpg"></a>
<a href="#"><img src="image/jingdian2.jpg"></a>
<a href="#"><img src="image/jingdian2.jpg"></a>
</li>
</ul>
</div>
</div>
<div id="jieshao">
<div class="jieshaotu orta">
<div class="jieshao-biaoti">
<h2><a>本站推荐</a></h2>
</div>
<div class="tupian">
<ul>
<li><a href="#"><img src="image/balikun1.jpg"><span>这是效果</span></a></li>
<li><a href="#"><img src="image/balikun2.jpg"><span>这是效果</span></a></li>
<li><a href="#"><img src="image/balikun3.jpg"><span>这是效果</span></a></li>
<li><a href="#"><img src="image/balikun4.jpg"><span>这是效果</span></a></li>
<li><a href="#"><img src="image/balikun5.jpg"><span>这是效果</span></a></li>
</ul>
</div>
</div>
</div>
<div id="neirong">
<div class="neirong-dongtai orta">
<div class="jieshao-biaoti">
<h2><a>动态栏</a></h2>
</div>
<div class="neirong">
<div class="neirong-left">
<div class="dongtai1 taitai">
<a href="#"> 这是动态内容</a>
<i>2016-12-19</i>
</div>
<div class="dongtai2 taitai">
<a href="#"> 这是动态内容</a>
<i>2016-12-19</i>
</div>
<div class="dongtai3 taitai">
<a href="#"> 这是动态内容</a>
<i>2016-12-19</i>
</div>
<div class="dongtai4 taitai">
<a href="#"> 这是动态内容</a>
<i>2016-12-19</i>
</div>
<div class="dongtai5 taitai">
<a href="#"> 这是动态内容</a>
<i>2016-12-19</i>
</div>
</div>
<div class="neirong-center">
<a href="#"><img src="image/heh.png"></a>
<p>这是动态内容这是动态内容这是动态内容这是动态内容这是动态内容这是动态内容这是动态内容这是动态内容这是动态内容这是动态内容</p>
</div>
<div class="neirong-right">
</div>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* 初始化CSS */
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0;}
fieldset,img{border:none;}
img{display: block;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ul,ol{list-style:none;}
body{padding:0 0;font:12px/20px "SimSun","微软雅黑","Microsoft YaHei",HELVETICA;/* overflow-y:scroll;*/ overflow-x:hidden;}
a{color:#666;text-decoration:none; font-family: "KazNet"; font-size: 16px;}
a:visited{color:#666;}
a:hover,a:active,a:focus{color:#ff8400;text-decoration:underline;}
.orta{ width: 1260px; margin-left: auto; margin-right: auto; }
/*顶部logo导航区*/
#top{
width: 100%; height: 76px;
}
.top-top{
width: 1260px; height: 76px;
}
.top-logo{
width: 420px; height: 76px; float: left;
}
.top-logo img{
padding-top: 15px;
}
.top-daohang{
width: 840px; height: 74px; float: right; font-family:
}
.top-daohang li{
display: block; float: right; width: 100px;
}
.top-daohang li a{
float: right; display: block; text-align: center; width: 100px; height: 74px; line-height: 74px; font-size: 16px; font-family :"STHeiti",黑体;
}
.top-daohang li a:hover{
border: solid 1px #e6e7e9; border-bottom: solid 4px #12aaf8; color:#12aaf8;
}
/*大图广告区*/
.da-guanggao{
width: 100&; height: 500px; padding-bottom: 20px;
}
.guanggao{
overflow: hidden; height: 500px;
}
.da-guanggao img{
width: 100%; height: 500px;
}
/*介绍区*/
.jieshao-biaoti{
width: 150px; height: 46px; font-family :"STHeiti",黑体;
}
.jieshao-biaoti h2 a{
display: block; width: 150px; height: 36px; line-height: 36px; text-align: center;
}
.jieshao-biaoti h2 a:hover{
display: block; border: solid 1px #e6e7e9; color: #000;
}
#jieshao{
width: 100%; height: 96px; padding-bottom: 170px;
}
.tupian{
width: 1260px; height: 96px;
}
.tupian li {
width: 200px; width: 248px; float: left;
}
.tupian li img{
width: 248px; height: 200px;
}
.tupian li a{
display: block; width: 248px; height: 96px; float: left; padding-right: 1px; padding-left: 1px;
}
.tupian li a:hover{
display: block; width: 248px; height: 96px; border: solid 3px #e6e7e9;
}
.tupian span{
width: 248px; height: 50px; position: relative; z-index: 33; top:-50px; filter: alpha(Opacity=50);
-moz-opacity:0.5; opacity: 0.5; -khtml-opacity:0.5; -webkit-opacity:0.5; background: #000; color: #fff; line-height: 50px; text-align: left; display: none; text-align: center;
}
.tupian li a:hover span{
display: block;
}
/*内容区*/
#neitong{
width: 100%; height: 128px;
}
.neirong{
width: 1252px; height: 250px;
}
.neirong-left{
width: 316px; height: 250px; float: left;
}
.taitai{
width: 316px; height: 40px; line-height: 40px; border-bottom: solid 1px #e6e7e9;
}
.taitai a{
}
.taitai i{
float: right;
}
.neirong-center{
width: 630px; height: 150px; float: left;
}
.neirong-center img{
width: 600px;px; height: 130px; padding-left: 15px;
}
.neirong-center p {
padding-left: 15px; width: 600px;
}
.neirong-right{
width: 314px; height: 250px;
}
