CSS列表及导航条

2018-06-24 02:08:54来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条。

 
  • 垂直导航条

注意要点:

  1. 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0。
  2. 以em设置导航列表的宽度。.nav{width:8em;}
  3. 讲锚的display属性设置为block,这样就可以给它设置宽高了,设置height后与line-height保持相同,达到文字垂直水平居中。
  4. 去除链接下划线 ,a{text-decoration:none} 
  5. 去除最后一个链接的底边框与列表的底边框形成的双线  .nav .last{border-bottom: 0px;}
  6. 用a:hover,a:focus与.selected a{}为菜单增加交互效果。
 
  • 简单的水平导航条

注意要点:

  1. 浮动列表项 使用外边距把他们分开,也可以把display属性设置为inline。
  2. 控制好li中的元素与li之间的距离。
  3. 让prev与next链接的样式稍有不同,的用属性选择器寻找他们的rel属性(指定当前文档与被链接文档的关系).home a[rel="prev"],.home a[rel="next"]
 
 
  • 图形化水平导航条

把垂直导航条变成水平导航条

 
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端之html

下一篇:修改placeholder的样式