国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSSオンラインマニュアル / CSS 導(dǎo)航欄

CSS 導(dǎo)航欄

CSS 導(dǎo)航欄


垂直

2.gif

水平

1.gif


導(dǎo)航欄

熟練使用導(dǎo)航欄,對于任何網(wǎng)站都非常重要。

使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。


導(dǎo)航欄=鏈接列表

作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個導(dǎo)航欄是必須的。

在我們的例子中我們將建立一個標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。

導(dǎo)航條基本上是一個鏈接列表,所以使用 <ul> 和 <li>元素非常有意義:

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>注意:我們用 href="#"作為測試連接.用在一個真正的web站點的url。</p>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

現(xiàn)在,讓我們從列表中刪除邊距和填充:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

例子解析:

  • list-style-type:none - 移除列表前小標(biāo)志。一個導(dǎo)航欄并不需要列表標(biāo)記

  • 移除瀏覽器的默認(rèn)設(shè)置將邊距和填充設(shè)置為0

上面的例子中的代碼是垂直和水平導(dǎo)航欄使用的標(biāo)準(zhǔn)代碼。


垂直導(dǎo)航欄

上面的代碼,我們只需要 <a>元素的樣式,就可建立一個簡單的垂直導(dǎo)航欄:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
a
{
	display:block;
	width:60px;
	background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

示例說明:

  • display:block - 顯示塊元素的鏈接,讓整體變?yōu)榭牲c擊鏈接區(qū)域(不只是文本),它允許我們指定寬度

  • width:60px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個60像素的寬度

在這個基礎(chǔ)上進行樣式的添加,就可制作一個簡單又漂亮的垂直導(dǎo)航欄:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯(lián)系</a></li>
<li><a href="#about">關(guān)于</a></li>
</ul>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

注意: 請務(wù)必指定 <a>元素在垂直導(dǎo)航欄的的寬度。如果省略寬度,IE6可能產(chǎn)生意想不到的效果。


水平導(dǎo)航欄

有兩種方法創(chuàng)建橫向?qū)Ш綑?。使?strong>內(nèi)聯(lián)或浮動的列表項。

這兩種方法都很好,但如果你想鏈接到具有相同的大小,你必須使用浮動的方法。

內(nèi)嵌列表項

建立一個橫向?qū)Ш綑诘姆椒ㄖ皇侵付ㄔ兀?上述代碼是標(biāo)準(zhǔn)的內(nèi)嵌:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	padding-top:6px;
	padding-bottom:6px;
}
li
{
	display:inline;
}
a:link,a:visited
{
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-align:center;
	padding:6px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>注意:</b>如果您只為 a 元素設(shè)置內(nèi)邊距(而不設(shè)置 ul 元素),那么鏈接會出現(xiàn)在 ul 元素之外。所以,我們?yōu)?nbsp;ul 元素添加了 top 和 bottom 內(nèi)邊距。 </p>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例解析:

  • display:inline; -默認(rèn)情況下,<li>元素是塊元素。在這里,我們刪除換行符之前和之后每個列表項,以顯示一行。

浮動列表項

在上面的例子中鏈接有不同的寬度。

對于所有的鏈接寬度相等,浮動 <li>元素,并指定為 <a>元素的寬度:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li
{
	float:left;
}
a:link,a:visited
{
	display:block;
	width:120px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p><b>注意:</b> 如果!DOCTYPE 沒有定義, floating 可以產(chǎn)生意想不到的結(jié)果.</p>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>

<p><b>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例解析:

    • float:left - 使用浮動塊元素的幻燈片彼此相鄰

    • display:block - 顯示塊元素的鏈接,讓整體變?yōu)榭牲c擊鏈接區(qū)域(不只是文本),它允許我們指定寬度

    • width:120px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個120像素的寬度


更多實例

實例:如何使用 CSS3 媒體查詢來創(chuàng)建一個響應(yīng)式導(dǎo)航。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {margin: 0;}

ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
ul.sidenav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.sidenav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

div.content {
    margin-left: 25%;
    padding: 1px 16px;
    height: 1000px;
}

@media screen and (max-width: 900px) {
    ul.sidenav {
        width: 100%;
        height: auto;
        position: relative;
    }
    ul.sidenav li a {
        float: left;
        padding: 15px;
    }
    div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
    ul.sidenav li a {
        text-align: center;
        float: none;
    }
}
</style>
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">主頁</a></li>
  <li><a href="#news">新聞</a></li>
  <li><a href="#contact">聯(lián)系</a></li>
  <li><a href="#about">關(guān)于</a></li>
</ul>

<div class="content">
  <h2>響應(yīng)式邊欄導(dǎo)航實例</h2>
  <p>該實例在屏幕寬度小于 900px 時導(dǎo)航欄為頂部水平導(dǎo)航欄,如果大于 900px 導(dǎo)航欄會在左邊,且是固定的。</p>
  <p>如果屏幕寬度小于 400px 會變?yōu)榇怪睂?dǎo)航欄。</p>
  <h3>重置瀏覽器窗口大小,查看效果。</h3>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例:如何使用 CSS3 媒體查詢來創(chuàng)建一個邊欄導(dǎo)航。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
  <li><a class="active" href="#home">主頁</a></li>
  <li><a href="#news">新聞</a></li>
  <li><a href="#contact">聯(lián)系</a></li>
  <li class="right"><a href="#about">關(guān)于</a></li>
</ul>

<div style="padding:0 16px;">
  <h2>響應(yīng)式導(dǎo)航欄實例</h2>
  <p>在屏幕寬度小于 600px 會重置導(dǎo)航欄。</p>
  <h4>重置瀏覽器窗口大小,查看效果。</h4>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例:導(dǎo)航下拉菜單--在導(dǎo)航條內(nèi)部設(shè)置下拉菜單

<!DOCTYPE html>
<html>
<head>
<title>下拉菜單實例</title>
<meta charset="utf-8">
<style>
  ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color:#333;
  }
  
  li{
    float:left;
  }
  
  li a, .dropbtn
  {
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
  }
  
  li a:hover, .dropdown:hover, .dropbtn
  {
    background-color:#111;
  }
  
  .dropdown
  {
    display:inline-block;
  }
  
  .dropdown-content
  {
    display:none;
    position:absolute;
    background-color:#f9f9f9;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  .dropdown-content a
  {
    color:black;
    padding:12px 16px;
    text-decoration:none;
    display:block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content
  {
    display:block;
  }
  
  </style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主頁</a></li>
  <li><a href="#news">新聞</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜單</a>
    <div class="dropdown-content">
      <a href="#">鏈接 1</a>
      <a href="#">鏈接 2</a>
      <a href="#">鏈接 3</a>
    </div>
  </div>
</ul>

<h3>導(dǎo)航欄上的下拉菜單</h3>
<p>鼠標(biāo)移動到 "下拉菜單" 鏈接先顯示下拉菜單。</p>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例