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学习代码

标签：

原文地址：http://www.cnblogs.com/liaoliao985786516/p/5565242.html