html+css布局
2018-04-21 本文已影响47人
WEtcmind
页面首部布局
首部布局预览图：
首部布局预览图.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
