20160606 html5学习代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20160606 html5学习代码相关的知识，希望对你有一定的参考价值。
index.html部分
<!--banner-->
<div class="banner">
<div id="slideBox" class="slideBox">
<div class="hd">
<ul><li></li><li></li><li></li></ul>
</div>
<div class="bd">
<ul>
<li><a href="#" ><img src="images/banner1.png" /></a></li>
<li><a href="#"><img src="images/banner2.png" /></a></li>
<li><a href="#"><img src="images/banner3.png" /></a></li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<div class="curPosition">
<div class="wp">
<span>您所在的位置:</span>
<a href="#">首页></a>
<a href="#">装修案例</a>
</div>
</div>
</div>
<!--主体部分-->
<main>
<div class="wp fix">
<div class="pro-info ">
<ul class="ul-pro">
<li>
<span>装修风格：</span>
<a href="javascript:;" class="cur">全部</a>
<a href="javascript:;">现代简约</a>
<a href="javascript:;">田园</a>
<a href="javascript:;">欧式</a>
<a href="javascript:;">地中海</a>
<a href="javascript:;">混搭</a>
<a href="javascript:;">美式乡村</a>
<a href="javascript:;">其他</a>
</li>
<li>
<span>房屋面积：</span>
<a href="javascript:;" class="cur">全部</a>
<a href="javascript:;">70㎡ 以下</a>
<a href="javascript:;">70-100㎡</a>
<a href="javascript:;">100-140㎡</a>
<a href="javascript:;">140-200㎡</a>
<a href="javascript:;">200-300㎡</a>
<a href="javascript:;">300㎡以上</a>
</li>
<li>
<span>装修户型： </span>
<a href="javascript:;" class="cur">全部</a>
<a href="javascript:;">普通住宅</a>
<a href="javascript:;">跃层</a>
<a href="javascript:;">公寓</a>
<a href="javascript:;">别墅</a>
<a href="javascript:;">其他</a>
</li>
<li>
<span>装修预算：</span>
<a href="javascript:;" class="cur">全部</a>
<a href="javascript:;">顶级</a>
<a href="javascript:;">豪装</a>
<a href="javascript:;">精装</a>
<a href="javascript:;">简装</a>
</li>
</ul>
<div class="case-list ">
<div class="tit-a1 ">
<strong>案例列表</strong>
<div class="so fix">
<input type="text" value="查找您想要的案例" class="ss"
onfocus="if(this.value=‘查找您想要的案例‘){this.value=‘‘;}"
onblur="if(!this.value){this.value=this.defaultValue;}">
<input type="submit" value="" class="sub-inp">
</div>
</div>
<div class="pic">
<ul class="ul-casePic fix">
<li class="on">
<a href="javascript:;">
<img src="images/001.png" >
<h4>港湾家园</h4>
<span>公寓-欧式风格</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/001.png" >
<h4>海威国际</h4>
<span>公寓-欧式风格</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/001.png" >
<h4>太和广场</h4>
<span>公寓-欧式风格</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/001.png" >
<h4>港湾家园</h4>
<span>公寓-欧式风格</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/001.png" >
<h4>海威国际</h4>
<span>公寓-欧式风格</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/001.png" >
<h4>太和广场</h4>
<span>公寓-欧式风格</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/001.png" >
<h4>港湾家园</h4>
<span>公寓-欧式风格</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/001.png" >
<h4>海威国际</h4>
<span>公寓-欧式风格</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/001.png" >
<h4>太和广场</h4>
<span>公寓-欧式风格</span>
</a>
</li>
</ul>
</div>
</div>
</div>
index.css部分
/*banner*/
.banner img{
width: 100%;/*自适应*/
vertical-align: bottom;/*去除白边*/
/*display: block;*/
}
/* 本例子css */
.slideBox{ width: 100%; overflow:hidden; position:relative;
border: 1px solid #cccccc;
box-sizing: border-box;/*防止滚动条*/
}
.slideBox .hd{
left: 50%;
margin-left: -37px;
height:15px; overflow:hidden; position:absolute; right:5px; bottom:15px; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }
.slideBox .hd ul li{border-radius: 50%; float:left; margin-right:20px;
width:20px; height:16px; line-height:15px; text-align:center; background:pink; cursor:pointer; }
.slideBox .hd ul li.on{ background:#f00; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:0; }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ width:100%; display:block; }
/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev{position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px;
filter:alpha(opacity=50);opacity:0.5;
background:url(../images/slider-left.png) 0px 5px no-repeat;
}
.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px;
background:url(../images/slider-right.png) 0px 5px no-repeat;
filter:alpha(opacity=50);opacity:0.5; }
.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }
.slideBox .prevStop{ display:none; }
.slideBox .nextStop{ display:none; }
/*.banner{
width: 100%;
overflow: hidden;
cursor: pointer;
}*/
.banner .curPosition{
height: 46px;
line-height: 46px;
/*border: 1px dotted seagreen;*/
background-color: #f9f9f9;
text-align: right;
font-size: 13px;
color: #878787;
border-bottom: 1px solid #e5e5e5;
}
.banner .curPosition a {
color: #878787;
}
.banner .curPosition a:nth-last-child(1){/*从后数第一个*/
color: #f08300;
}
/*main部分*/
main{
padding-top: 45px;
}
main .pro-info{
border: 1px solid #c9c9c9;
width: 905px;
height: 1200px;
float: left;
}
main .pro-info .ul-pro li{
padding: 10px 0 10px 32px;
height: 27px;
line-height: 27px;
border-bottom: 1px dashed #b1b1b1;/*dashed虚线*/
color: #505152;
}
.ul-pro li a{
padding: 0 19px;
height: 27px;
line-height: 28px;
display:inline-block;
color: #505152;
}
.ul-pro li a.cur{
background-color: #f1890c;
color: white;
}
.pro-info .ul-pro li:nth-child(1){
margin-top: 28px;
}
/*.case-list*/
.pro-info .case-list{
height: 76px;
/*line-height: 76px;*/
border-bottom: 1px solid #ccc;
}
.pro-info .case-list strong{
height: 46px;
line-height: 46px;
width: 150px;
margin-top: 27px;
margin-left: 30px;
display:inline-block;
font-size: 24px;
border-bottom: 4px solid #f1890c;
}
.tit-a1 .so{
float: right;
margin-right: 35px;
margin-top:40px;
position: relative;
}
.pro-info .case-list .ss{
display: block;
float: right;
width: 178px;
height: 27px;
line-height: 27px;
margin-right: 87px;
color: #7e7f80;
margin-bottom: 7px;
}
.sub-inp{
display: block;
float: right;
width: 52px;
height: 27px;
margin-left: 178px;
background:url("../images/search.png") no-repeat center center;
background-color: #f1890c;
position: absolute;
/*background: transparent;*/
border: none;
}
/*ul-casePic*/
main .pro-info .pic .ul-casePic {
overflow: hidden;
margin-top: 20px;
margin-left: 27px;
}
main .pro-info .pic ul{
width: 900px;
}
main .pro-info .ul-casePic li{
display: block;
float: left;
width: 254px;
padding: 8px 8px 8px 8px;
height: 258px;
margin-left: 5px;
border: 2px solid white;
}
main .pro-info .ul-casePic li.on{
border: 2px solid #f08300;
}
main .pro-info .ul-casePic li img{
width: 254px;
height: 173px;
display: block;
}
main .pro-info .ul-casePic li h4{
font-size: 13px;
margin-top:18px;
margin-left: 13px;
color: #505152
}
main .pro-info .ul-casePic li span{
font-size: 12px;
margin-top:10px;
margin-left: 13px;
color: #7e7f80;
display: inline-block;
}
以上是关于20160606 html5学习代码的主要内容，如果未能解决你的问题，请参考以下文章