DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> Html如何設置橫向導航結構
Html如何設置橫向導航結構
編輯:HTML和Xhtml     

本文為大家分享的兩種橫向導航結構的設置方法,主要借助列表結構。

方法一 塊狀結構與行內結構的結合。

這裡首先介紹一下塊狀元素與行內結構的區別。

(1)塊狀結構可以設置行高、寬(width、height),邊距(margin、padding)、邊框(border)等屬性。行內元素只能設置行高,左右邊距,但不具備外邊距,上下內邊距和邊框等屬性。

(2)塊狀結構比較霸道,並不與其他元素分享一行。行內元素則可以嵌套在其他元素中。

常見的塊狀元素有ul,ol,p,form等。常見的行內元素有meta,img,span,h1-h6,label等。

但有時候,為了使塊狀結構具有行內元素的特性,或者使行內元素具有塊狀元素的特性,會對兩者進行結合。舉一個使行內元素具有塊狀元素特性的例子:a標簽是最重要的行內標簽之一,用戶可以根據它指定的鏈接訪問相應頁面。為了使a標簽下的元素表現更加美觀,我們想要給這個鏈接設置一些屬性,包括比如邊框、邊距、背景顏色等等。我們知道這些屬性都是塊狀結構才具有的,所以我們此刻既想繼續使用a這個行內標簽來容納鏈接內容,又希望這個行內元素也能擁有塊狀結構的相關屬性。

我們可以通過”a{display:block}“的設置來解決這一問題。

類似的,當我們想要借助列表,達到設置橫向導航目的時,我們希望列表的每一行能夠在同一行顯示,這時我們也可以通過塊狀結構與行內結構的結合來達到此目的。

我們只需要為list添加一行代碼:list{display:inline;}

方法二 利用float屬性設置。

屬性float可以設置兩個方向浮動,包括left和right。設置橫向導航,就是將列表橫置向左浮動,其中向左浮動是因為我們希望設置浮動後,導航的順序從左到右被橫置,即從左到右依次是導航一到導航四,這更符合更多用戶的習慣。

代碼:

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         ul{   
  8.             float:right;   
  9.         }   
  10.         li{   
  11.             padding-right:30px;   
  12.             float:left;   
  13.         }   
  14.         a{   
  15.             margin-left:20px;   
  16.             font-size:20px;   
  17.             font-weight:bold;   
  18.             color:white;   
  19.             display:block;   
  20.             border:1px solid black;   
  21.             width:100px;   
  22.             text-decoration:none;   
  23.             text-align:center;   
  24.             background-color:darkseagreen;   
  25.         }   
  26.         a:hover{   
  27.             color:red;   
  28.         }   
  29.     </style>  
  30. </head>  
  31. <body>  
  32. <ul>  
  33.     <li>導航一</li>  
  34.     <li>導航二</li>  
  35.     <li>導航三</li>  
  36. </ul>  
  37.   
  38. <a href="#">百度</a>  
  39. </body>  
  40. </html>  

以上就是本文的全部內容,希望對大家的學習有所幫助。

原文:http://www.cnblogs.com/xiaoqqmin/p/5317551.html

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved