頁面首部布局
首部布局預覽圖：
首部布局預覽圖.jpg
html布局代碼：
<div id="head">
<div class="top">
<img src="image/2.jpg" alt="" align="absmiddle"> 全省免費服務熱線:
<span>96556</span>
<span>0731-84635555</span>7
旅行社同行熱線:
<span>0731-84402588</span>
<a href="#">登錄 </a>
<a href="#">注冊</a>
</div>
<div id="banner">
<div class="logo">
<img src="image/3.jpg" alt="">
<a href="#"></a>
</div>
<div class="nav">
<a href="#">首頁</a>
<a href="#">出境游</a>
<a href="#">國內游</a>
<a href="#">特價游</a>
<a href="#">簽證</a>
</div>
<div class="search">
<form>
<input type="text" value="輸入目的地" class="text">
<input type="submit" value="" class="sub">
</form>
</div>
</div>
<div class="Nav">
<div class="mainNav">
<ul>
<li>
<a href="#">出境跟團游</a>
<div class="menu"></div>
</li>
<li>
<a href="#">出境自由行</a>
<div class="menu"></div>
</li>
<li>
<a href="#">國內跟團游</a>
<div class="menu"></div>
</li>
<li>
<a href="#">國內自由行</a>
<div class="menu"></div>
</li>
<li>
<a href="#">湖南周邊游</a>
<div class="menu"></div>
</li>
</ul>
</div>
<div class="subNav">
<a href="#">中國</a>
<a href="#">臺灣</a>
<a href="#">泰國</a>
</div>
</div>
CSS樣式代碼：
/*頁面頭部開始*/
/*額頭開始*/
#head{
width: 100%;
height: 200px;
background:url("../image/1.jpg");
}
#head .top{
width:1000px;
height: 47px;
margin:0 auto;
line-height: 47px;
color: #666;
font-family: "微軟雅黑";
font-size:13px;
}
#head .top span{
color: #E20076;
font-weight: bold;
padding: 0px 4px;
}
#head .top a{
text-decoration: none;
color: #666;
padding: 0 5px;
font-weight: 800;
}
#head .top a:hover{
color: #E20076;
}
/*額頭結束*/
/*面部開始*/
#banner{
width:1200px;
height:100px;
margin:0 auto;
}
/*logo開始*/
#banner .logo{
width:341px;
height: 78px;
padding-top: 10px;
float: left;
}
/*logo結束 */
/*搜索框開始*/
#banner .search{
width: 300px;
height:70px;
float: right;
position: relative;
}
#banner .search input.text{
width: 230px;
height: 33px;
font-size:12px;
color: #999;
text-indent: 10px;
border:1px solid #e1e1e1;
position: absolute;left:6px;top:25px;
}
#banner .search input.sub{
width:35px;
height:35px;
border: 0;
position: absolute;right:30px;top:25px;
background:url("../image/4.jpg");
}/*搜索框結束 */
/*上下的導航欄開始*/
#banner .nav{
width: 500px;
height: 80px;
font-size:16px;
font-family:"微軟雅黑";
float: left;
line-height:100px;
padding-left: 50px;
}
#banner .nav a{
text-decoration: none;
color: #000;
font-weight:bold;
padding: 0 20px;
}
#banner .nav a:hover{
color: #E20076;
}
#head .Nav{
width:1000px;
height:52px;
margin:0 auto;
}
#head .Nav .mainNav{
width:550px;
height: 52px;
float:left;
}
#head .Nav .mainNav ul li{
list-style: none; /*清除li的默認原點*/
float:left;
width: 100px;
height: 52px;
line-height: 52px;
text-align: center;
font-size:14px ;
font-family: "微軟雅黑";
position: relative;
}
#head .Nav .mainNav ul li a{
color: #fff;
text-decoration: none;
}
#head .Nav .mainNav .menu{
width: 350px;
height: 300px;
border: 2px solid #E20076;
border-top:0px;
position: absolute;
background: #fff;
filter:Alpha(opacity-90);-moz-opacity:0.9;opacity: 0.9;-webkit-opacity:0.9;
left:0px;top:52px;
display: none;
z-index: 3;
}
#head .Nav .mainNav ul li.hover{
background: #B80064;
}
#head .Nav .subNav{
width: 150px;
height: 52px;
float:right;
font-size:14px;
}
#head .Nav .subNav a{
line-height: 52px;
color:#fff;
text-decoration: none;
float:left;
padding:0px 5px;
}
#head .Nav .subNav a:hover{
text-decoration: underline;
}
/*上下導航欄結束*/
/*頁面頭部結束*/
Javascript特效代碼：
// 搜索框特效
var d_Value=$(".search input.text").val();
//獲取焦點
$(".search input.text").focus(function(){
if($(this).val()==d_Value){
$(this).val("");
}
})
//失去焦點
$(".search input.text").blur(function(){
if($(this).val()==""){
$(this).val(d_Value);
}
});
代碼釋義：
$ 代表獲取頁面中的元素
var 定義變量的關鍵字
function 函數方法 // 干活的勞動人民
val()方法值 value值
focus 焦點獲取
blur 失去焦點
效果圖
WEB項目實戰布局1（首部）.jpg
頁面廣告輪播圖布局：
html布局代碼：
<div id="Adv">
<div class="ImgList" style="background: url('image/a1.jpg'); center"></div>
<div class="ImgList" style="background: url('image/a2.jpg');center"> </div>
<div class="ImgList" style="background: url('image/a1.jpg'); center"></div>
<div class="ImgList" style="background: url('image/a2.jpg'); center"></div>
<ul class="button">
<li class="hover"></li>
<li></li>
<li></li>
<li></li>
</ul></div>
CSS樣式代碼：
/*頁面廣告開始*/
#Adv{
width: 100%;
height:421px;
position:relative;
}
#Adv .ImgList{
width: 100%;
height: 421px;
position: absolute;
}
#Adv .button{
position: absolute;
left: 45%;
bottom: 30px;
z-index: 3;
}
#Adv .button li{
list-style: none;
width: 15px;
height:15px;
background: #E20076;
border: 1px solid #fff;
border-radius:10px;
margin:0px 2px;
float: left;
}
#Adv .button li.hover{
background: #dddddd;
}
/*頁面廣告結束*/
Jquery控制特效代碼：
// 廣告輪播圖
// 鼠標輪播
var _index=0; //初始化序列號
var timePlay=null; //初始化定時器
$("#Adv .ImgList").eq(0).show().siblings("div").hide();
$("ul.button li").hover(function(){ //鼠標滑入
// body...
clearInterval(timePlay);
_index=$(this).index();
$(this).addClass("hover").siblings().removeClass("hover");
$("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();
},function(){ //鼠標滑出
autoPlay();
})
// 定時自動輪播
function autoPlay(){
timePlay=setInterval(function(){ //設定定時器實現定時
_index++;
if(_index<4){
$("ul.button li").eq(_index).addClass("hover").siblings().removeClass("hover");
$("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();
}else{
_index=-1;
}
},2000);
};
autoPlay();
效果圖：
廣告輪播效果圖
頁面主要內容區域布局:
主要內容布局預覽圖(左)：
主要內容布局預覽圖(左).jpg
html布局代碼：
<div id="Content">
<div class="ConL">
<p class="biaoti">
<img src="image/lx1.jpg" alt=""></p>
<ul class="select_but">
<li class="hover">新品推薦</li>
<li>熱門推薦</li>
<li>高端定制</li>
</ul>
<div class="select_con">
<div class="se_con">
<ul class="se_ImgList">
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈斯卡還貸款撒嬌還貸款技術開發季后賽卡</p>
</li>
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈斯卡還貸款撒嬌還貸款技術開發季后賽卡</p>
</li>
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈斯卡還貸款撒嬌還貸款技術開發季后賽卡</p>
</li>
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈斯卡還貸款撒嬌還貸款技術開發季后賽卡</p>
</li>
</ul>
</div>
<div class="se_con">
<ul class="se_ImgList">
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈斯卡還貸款撒嬌還貸款技術開發季后賽卡</p>
</li>
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈斯卡還貸款撒嬌還貸款技術開發季后賽卡</p>
</li>
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈斯卡還貸款撒嬌還貸款技術開發季后賽卡</p>
</li>
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈斯卡還貸款撒嬌還貸款技術開發季后賽卡</p>
</li>
</ul>
</div>
<div class="se_con">
<ul class="se_ImgList">
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈哈哈啊哈哈哈啊哈哈哈哈</p>
</li>
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈哈哈啊哈哈哈啊哈哈哈哈</p>
</li>
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈哈哈啊哈哈哈啊哈哈哈哈</p>
</li>
<li><img src="image/da.jpg" alt="" width="156px" height="124px">
<p>哈哈哈啊哈哈哈啊哈哈哈哈</p>
</li>
</ul>
</div>
</div>
</div>
<div class="ConR">
<img src="image/lun1.jpg" alt="">
</div>
</div>
CSS樣式代碼：
/*頁面廣告結束*/
/*頁面主內容開始*/
#Content{
width: 1200px;
height:560px;
margin:35px auto;
}
#Content .ConL{
width: 700px;
height: 560px;
padding:0px 30px;
background:url("../image/p1.jpg") no-repeat,url("../image/p2.jpg") no-repeat right top;
float: left;
}
#Content .ConL p.biaoti{
height: 120px;
margin: 0px 23px;
border-bottom:1px dashed #c9c9c9;
background: white url("../image/lx2.jpg") no-repeat right top;
}
#Content .ConL ul.select_but{
height: 46px;
border-bottom:1px solid #eee;
}
#Content .ConL ul.select_but li{
list-style: none;
float:left;
width: 122px;
height: 46px;
background: url("../image/b2.jpg") no-repeat right bottom;
line-height: 50px;
text-align:center;
font-size: 14px;
}
#Content .ConL ul.select_but li.hover{
background-image: url("../image/b1.jpg");
}
#Content .ConL .select_con{
height: 382px;
overflow:hidden;
}
#Content .ConL .select_con .se_con{
height: 360px;
border:1px solid #000;
margin-top: 20px;
}
#Content .ConL .select_con .se_con ul.se_ImgList li{
list-style: none;
width: 156px;
height: 124px;
background: red;
margin:0px 5px;
float: left;
position: relative;
}
#Content .ConL .select_con .se_con ul.se_ImgList li p{
height: 0px;
margin:0;
color: #fff;
font-size: 12px;
padding: 0px 2px;
text-align:center;
background:rgba(187,14,115,0.6);
position: absolute; left:0;bottom:0;
overflow: hidden;
}
#Content .ConR{
width: 350px;
height: 560px;
background:green;
float:right;
}
Javascript代碼：
//推薦選項卡切換
$("ul.select_but li").mouseover(function(){
$(this).addClass("hover").siblings().removeClass("hover");
$(this).index();
$(".select_con .se_con").eq($(this).index()).show().siblings().hide();
});
//圖片說明顯示隱藏
$("ul.se_ImgList li").hover(function(){
$(this).find("p").animate({height:"40px"},200);
},function(){
$(this).find("p").animate({height:"0px"},200);
})
}
效果圖：
內容效果圖.jpg
內容效果圖2.png
