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

时间： 2024-11-05 13:38:08

20160606 html5学习代码的相关文章

20160614 html5学习代码（图册）

index.html部分 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图册</title>    <link rel="stylesheet" href="css/index.css">     <script src="js

20160614 html5学习代码（选项卡）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>选项卡</title>      <style>      *{margin: 0;padding: 0;}      ul li{              padding: 3%;              list-style: n

20160607 html5学习代码

index.html 部分 <!--footer部分--> <footer>   <div class="bottom">      <div class="wp fix">        <div class="box-bottom1 fix">         <div class="messages fix">            <div

20160617 html5学习代码（banner滚屏不用插件版）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>单页-01</title>    <script src="js/jquery.js"></script>               <style>      *{margin:0;paddi

20160603 html5学习代码

接上部分index.html <!--导航-->   <nav >       <div class="wp">         <ul>            <li class="on">                <a href=""  >首页</a>            </li>            <li>       

20160602 html5学习代码

index.html部分 <!DOCTYPE html><html lang="zh-cn">    <head>        <meta charset="utf-8">        <title>我的第一个网站首页面</title>        <link rel="stylesheet" href="css/index.css"> 

20160608 html5学习代码

滚动 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>        <style>        *{margin: 0;padding: 0;}        body{            height: 100%;            /*p

20160612 html5学习代码（雪花特效）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>snow</title>    <style>    *{margin: 0;padding: 0;}    html{        height:100%;    }    body{        height:100%;     

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h