                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /企業網站綜合布局實戰

效果不一樣

<!doctype html>

<html>

<head>

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 class="da-guanggao" id="picBox">

? ? ?<div class="guanggao orta pic" >

? ? ? ? <ul>

? ? ? ? <li>

? ? ? ? ? ? ? ? ?<a href="#"><img src="image/jingdian2.jpg"></a>

? ? ? ? ?</li>

? ? ? ? </ul>

? </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 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 ?class="neirong-center">

? <a href="#"><img src="image/heh.png"></a>

? <p>這是動態內容這是動態內容這是動態內容這是動態內容這是動態內容這是動態內容這是動態內容這是動態內容這是動態內容這是動態內容</p>

? </div>

? <div ?class="neirong-right">

? </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;?
}