快捷搜索:   服务器  PHP  安全  linux 安全  IIS

css 等宽导航栏设计技巧

等宽导航栏(我不知道这个名称合不合适,知道的朋友指点一下)的设计一般要遵守以下两个要素:
1.导航栏的背景和页面的最大宽度相等;
2.导航的内容的位置在页面主框架以内(导航的内容在主框架以外的话不好看,用户体验也不好)。
文字看不懂的话,可以看下面这幅草图。
等宽导航栏
先看看导航栏的HTML代码。
 

 

  1. <div id="navigation">   
  2. <ul>   
  3. <li><a href="#">Home</a></li>   
  4. <li><a href="#">Links</a></li>   
  5. <li><a href="#">FAQs</a></li>   
  6. <li><a href="#">Contact</a></li>   
  7. <li><a href="#">Guestbook</a></li>   
  8. </ul>   
  9. </div>   

 

从这里看出结构和一般的导航栏是完全一样的,知道的朋友应该猜出了,真正起作用的是CSS。
CSS这样写。
 

  1. #navigation {   
  2. width100%/*宽度为100%,以填充整个屏幕的宽度*/   
  3. floatleft/*左浮动*/   
  4. margin0 0 1px 0/*设置margin的关键是左右的值都为零*/   
  5. padding0;   
  6. background-color#F7F7F7;   
  7. }   
  8. #navigation ul {   
  9. list-stylenone/*不显示列表项前面的黑点*/   
  10. width800px/*宽度必须和主框架的宽度相等*/   
  11. margin0 auto/*整个列表居中*/   
  12. padding0;   
  13. }   
  14. #navigation li {   
  15. floatleft/*使导航栏编程水平导航栏*/   
  16. }   
  17. #navigation li a {   
  18. displayblock/*把导航栏里的链接设置为块元素*/   
  19. padding8px 15px;   
  20. text-decorationnone;   
  21. }   

CSS的关键已经加上了注释。

顶(5)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论