全国服务热线:4008-888-888

技术知识

导航栏栏的多样设定简易案例

留意:感觉简易的人,别讲话,偷偷的。。。。我也纯属是纪录

网页页面默认设置存在margin值和padding值,而且后边的元素对margin、padding的改动全过程中其实不会起效,因而在款式设定全过程中最先对全部的元素的margin和padding值清0;

编码:*{padding:0px;margin:0px;}     //*号意味着全部

能够在后边的元素上设定你要想的margin和padding值,都会起效;

举1个事例:(便是由于这1个缘故,累死宝宝了,念头是挺合乎逻辑性的,但是便是并不是你要想的)

我是模仿imooc网站的的导航栏做的(全当练手,由于我是初学者,甚么都想试1试)

下列是编码一部分

XML/HTML Code拷贝內容到剪贴板
  1. <div class="nav">  
  2. <ul>  
  3.     <li><a href="#">评价</a></li>  
  4.     <li><a href="#">问与答</a></li>  
  5.     <li><a href="#">笔记</a></li>  
  6.     <li><a href="#">同学编码</a></li>  
  7. </ul>  
  8.  </div>  

css款式

CSS Code拷贝內容到剪贴板
  1. *{   
  2.      margin:0px;   
  3.      padding:0px;   
  4.   }   
  5.      .nav{   
  6.         border-bottom:1px solid #c0c0c0;   
  7.         width:1000px;   
  8.         height:60px;   
  9.         margin-left:40px;   
  10.         //background-color:#c3ffdd;   
  11.         }   
  12.            
  13.       ul li{   
  14.        list-style-type:none;   
  15.        width:120px;   
  16.        float:left;   
  17.         
  18.      }   
  19.       li a{   
  20.             display:block;   
  21.             text-decoration:none;   
  22.         color:black;   
  23.         font-family:"微软雅黑";   
  24.         text-align:center;   
  25.         line-height:60px;      
  26.      }   
  27.      li a:hover,li a:active{   
  28.          color:#f00;   
  29.      }   
  30.      li a:focus{   
  31.         border-bottom:2px solid #f00;  
  32.  }
     

实际效果图

先前我是死活标识hover的设定內容顶不到下边框的最左侧,设定完编码后便可以了

以上这篇导航栏栏的多样设定简易案例便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/king-ying/archive/2016/05/19/5509276.html



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服