零基礎html5網頁開發教程第008期 導航欄開發案例

  • 2019 年 11 月 23 日
  • 筆記

導航欄，有的人又喜歡叫菜單欄。確實和菜單有點像。導航欄幾乎會用在所有的網站中。那麼導航欄是怎麼開發出來的呢？今天我們就來開發一個最為簡單的導航欄。

重要知識點：鏈接標籤<a>

基本舉例<a href="index.html">首頁</a>

這是最基本的標籤的使用舉例。我們可以形成一個最為簡單的鏈接文字。用在瀏覽器中，會在同一個窗口標籤中進行跳轉網頁。

<a>標籤還有其它更為有用的屬性，以下我們來簡單介紹一下：

  • href屬性：

鏈接的目標，如果要鏈接外部網站，那麼要加http://www.bcczcs.com

  • target屬性：

使用_blank，可以打開新窗口鏈接出去。默認如果沒寫，意味着在本窗口打開鏈接。

<a>標籤在不同的css包裝下，可以形成完全不同的效果。我們可以通過普通的點擊效果進行跳轉。也可以使用js控件a標籤來進行跳轉。

總結

1、掌握鏈接標籤<a> 成對出現的，標籤的中間寫鏈接的文字

2、掌握href屬性

3、掌握target屬性

文件結構：

index.html源代碼

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>劉金玉編程首頁</title>  </head>  <body>    <div id="wrapper">      <div class="header">        <div class="nav">          <a href="index.html">首頁</a>          <a href="#">編程開發</a>          <a href="#">人生旅程</a>          <a href="#">攝影攝像</a>          <a href="#">網賺技巧</a>          <a href="#">電腦技巧</a>          <a href="http://ljy.kim" target="_blank">編程創造城市</a>        </div>      </div>      <div class="main"></div>      <div class="footer"></div>    </div>  </body></html>

VirMach 便宜 VPS

QNews

QNews