20160603 html5学习代码

标签：

接上部分index.html

<!--导航-->
   <nav >
       <div class="wp">
         <ul>
            <li class="on">
                <a href=""  >首页</a>
            </li>
            <li>
                <a href="">整体家装</a>
            </li>
            <li>
                <a href="">装修案例 </a>
                        <dl>
                            <dd><a href="">0001</a></dd>
                            <dd><a href="">0002</a></dd>
                            <dd><a href="">0003</a></dd>
                       </dl>
             </li>
             <li>
                <a href="" >设计明星</a>
                    <dl>
                        <dd><a href="">0001</a></dd>
                        <dd><a href="">0002</a></dd>
                        <dd><a href="">0003</a></dd>
                </dl>
            </li>
            <li>
                <a href="">走进都都</a>
            </li>
            <li>
                <a href=""> 服务规范</a>
            </li>  
            <li>
                <a href="">施工管理</a>
           </li>
            <li>
                <a href="">在线服务</a>
           </li>     
        </ul>
     </div>
   </nav>

接上部分index.css

 /*导航*/
   
  nav{
    background-color: #4b4948;
    height: 46px;
   }
 nav ul li{
     list-style: none;
     /*list-style-type: none;*/
     float: left;
     position: relative;
    
 }
 nav ul li a{
    /* position: relative;*//*相对定位*/
     width: 150px;
     height: 46px;
     display: block;
     text-align: center;
     line-height: 46px;
     font-size: 18px;
     color: #ffffff;
     
 }
 nav ul li.on a,nav ul li a:hover{
     background-color: #f08300;
 }
 
 nav ul li dl{
     left: 0;
     top: 100%;/*相对父级a来说*/
     position: absolute;/*绝对定位，根据上面的相对定位来定位*/
     width: 100%;
     z-index: 333;
     color: rebeccapurple;
     background-color: #666;
     display: none;
 }

nav ul li:hover dl{/*鼠标到li上面dl显示出来*/
    display: block;
}
    /*
    绝对定位会脱离文档流，要找到它最近的父元素有position：relative
    或者有position：absolute ；或者position：fixed的元素进行定位
    如果所有父元素没有找到相关position元素，则直接定位body。
    */

20160603 html5学习代码

标签：

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