首页
/
每日頭條
/
生活
/
html導航欄全部代碼
html導航欄全部代碼
更新时间:2025-07-06 07:22:26

導航條效果圖:

html導航欄全部代碼(前端入門教程網頁導航欄制作教程)1

我們先來看一下,首先這個整體我們可以看成一個大盒子,盒子的背景顔色為白色。

html導航欄全部代碼(前端入門教程網頁導航欄制作教程)2

然後看一下整體的話是占到整個導航條的80%左右,上圖紅色框圈出的範圍。

html導航欄全部代碼(前端入門教程網頁導航欄制作教程)3

這個盒子又分為兩個部分,左側的logo部分,右側的導航部分。

整個布局用到的是flex布局:

大家可以去看一下阮一峰老師的教程:

阮一峰flex布局

左側logo部分我們用到的标簽有:

1、h3标簽:

<h3><ahref="index.HTML">多多魚網頁</a></h3>

h3是一對有開始有閉合的标簽組合。以<h3>開始,以</h3>結束。

html h3标簽主要用于布局标題、欄目類内容,h3與h1最大标題标簽相比,h1标簽一般一個網頁中使用一次,而h3标簽可以在一個網頁中多次使用。默認CSS h3又比h2文字大小小一點。

html h3标簽常見應用地方:

欄目标題可以使用h3标簽文章标題可以使用h3标簽文章标題列表可以使用h3标簽(一般圖文列表中,圖片使用img引入,文章标題文字使用h3标簽)

2、a标簽:

<ahref="index.html">多多魚網頁</a>

<a> 标簽定義超鍊接,用于從一張頁面鍊接到另一張頁面。

<a> 元素最重要的屬性是 href 屬性,它指示鍊接的目标。

在所有浏覽器中,鍊接的默認外觀是:

未被訪問的鍊接帶有下劃線而且是藍色的

已被訪問的鍊接帶有下劃線而且是紫色的

活動鍊接帶有下劃線而且是紅色的

右側的導航部分我們用到的标簽有:

一、無序列表簡介

無序列表,很好理解,有序列表的列表項是有一定順序的,而無序列表的列表項是沒有順序的。默認情況下,無序列表的項目符号是●,不過可以通過無序列表type屬性來改變無序列表的列表項符号。

語法:

<ul> <li>無序列表項</li> <li>無序列表項</li> <li>無序列表項</li> </ul>

說明:

<ul>,即“unordered list(無序列表)”。<li>,即“list(列表項)”。理解标簽語義更有利于你記憶,而記憶HTML标簽的語義是HTML的基礎。

在該語法中,使用<ul></ul>标簽表示一個無序列表的開始和結束,<li>表示這是一個列表項。在一個無序列表中可以包含多個列表項。

注意,<ul>标簽和<li>标簽也是配合使用,沒有單獨使用,而且<ul>标簽内部不能存在任何其他标簽,一般情況下隻能存在<li>标簽(對于初學者,我們忽略嵌套列表)。這個概念要非常清楚,在網站開發後期很容易犯錯。(這個情況跟有序列表一樣)。

右側導航代碼:

<ul> <liclass="active"> <ahref="index.html">首頁</a> </li> <li> <ahref="">網頁模闆</a> </li> <li> <ahref="">學習資料</a> </li> <li> <ahref="">常見問題</a> </li> <li> <ahref="">網頁作業</a> </li> <li> <ahref="">聯系我們</a> </li> </ul>

視屏教程:

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
乾道嘉挂在家裡什麼位置
乾道嘉挂在家裡什麼位置
帶着你的”乾道嘉“,阿凡提幫你真正”錢到家“!隔壁老王都去托管了!你還等什麼!國版阿凡提主題文化交易平台是由國際版權交易中心精心打造的國際化主題文化交易平台,通過打造精品化主題文化産品、藝術品标準化體系,貫通各類文化由産品落地到流通交易直至...
2025-07-06
重裝機兵fc版完全攻略
重裝機兵fc版完全攻略
#重裝遊戲原創#第143期雖說跟一些熱門遊戲相比,以紅白機為代表的懷舊遊戲實在有些冷門,但對于80、90後玩家而言,他們對一些經典遊戲存在許多特殊情結,就比如今天要提到的人與戰車系列RPG遊戲《重裝機兵》,很多人對它以及它的續作就持有迥然不...
2025-07-06
6次支教找到教師最高使命
6次支教找到教師最高使命
支教團成員翻山越嶺,堅持每周兩次家訪。楚天都市報極目新聞記者田悅攝□楚天都市報極目新聞記者鄒浩攝影:楚天都市報極目新聞記者田悅20年前,20歲的徐本禹第一次走進貴州省畢節市大方縣貓場鎮岩洞小學支教。20年來,已有180名學弟學妹追随着他的步...
2025-07-06
墨蘭葉片發黑是怎麼回事
墨蘭葉片發黑是怎麼回事
墨蘭葉片發黑是怎麼回事?土壤積水在養殖墨蘭期間,不要太勤的進行澆水,每次的澆水量也不要過大,水分無法充分的被植株吸收,土壤裡就會産生積水,水會導緻植株呼吸能力減弱,從而引起葉片發黑要增強養護環境的通風性,盆内有積水的話及時倒掉,讓土壤保持微...
2025-07-06
鳳凰男會對女人說他辛苦了嗎
鳳凰男會對女人說他辛苦了嗎
我是東林夕亭,你有故事,就來找我。點擊上面『關注』,你就是我的人了。請坐穩小闆凳,我講#情感#給你聽。很多人提到鳳凰男時,都會有這樣一種刻闆印象:認為鳳凰男不解風情,自私自利,在婚姻中完全不在乎妻子的感受。事實上,籠統地給鳳凰男貼上這樣的标...
2025-07-06
Copyright 2023-2025 - www.tftnews.com All Rights Reserved