CSS-制作菜單導(dǎo)航欄

時(shí)間：2023-09-09 21:36:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-09 21:36:01 來源：網(wǎng)站運(yùn)營

CSS-制作菜單導(dǎo)航欄：首先看一下效果圖

接下來就跟著我一步一步的用CSS來實(shí)現(xiàn)這樣的效果。（采用外聯(lián)式）

在本地創(chuàng)建一個(gè)文件夾 resume 然后創(chuàng)建一個(gè)HTML網(wǎng)頁文件（index.html），將以下的內(nèi)容寫入，

因?yàn)橐谱饕粋€(gè)菜單導(dǎo)航欄，于是給<div>標(biāo)簽賦值“topNavBar”，同理，也為左側(cè)的logo賦值，效果如圖

非常普通（簡(jiǎn)陋）的HTML展示，接下來就開始一步一步的做。

---

制作導(dǎo)航欄

第一步：

先將導(dǎo)航欄的內(nèi)容橫向排列，這里用到“浮動(dòng)”

<li style= "float: left;">第二步：

浮動(dòng)之后發(fā)現(xiàn)內(nèi)容和無序列表的小圓點(diǎn)重疊了，于是需要改變列表樣式

<ul style="list-style: none;">第三步：

這個(gè)時(shí)候發(fā)現(xiàn)列表前有一塊空白，這是因?yàn)槌?lt;div><span>標(biāo)簽外，所有的標(biāo)簽都有瀏覽器默認(rèn)樣式，這個(gè)時(shí)候就需要用的開發(fā)者工具來查詢一下默認(rèn)樣式的數(shù)值，方便我們?nèi)ジ膭?dòng)。

<ul style="list-style: none;margin: 0;padding: 0;">第四步：

當(dāng)用到“浮動(dòng)”后，需要寫一個(gè)類，并加一個(gè)偽類，首先給所有“浮動(dòng)”元素的父系標(biāo)簽內(nèi)加一個(gè)類

<ul style="list-style: none;margin: 0;padding: 0;" class="clearfix">然后在CSS外部鏈接表內(nèi)加一個(gè)偽類

<!--重點(diǎn)：使用“浮動(dòng)”有三步：

1. 給所有“浮動(dòng)”元素使用 "float: left;"
2. 給“浮動(dòng)”元素的父系元素添加一個(gè)類" class="clearfix" "
3. 給clearfix類添加一個(gè)偽類（上圖所示）

第五步：

整理一下CSS樣式，將之前的內(nèi)斂樣式全部放入外部鏈接表（style.css）中

第六步：

使用工具測(cè)量一下樣例中字體的像素大?。]有工具，可以使用截圖功能）

再使用取色工具得到字體的顏色（沒有工具，依然可以使用截圖功能，不過這里可以推薦一個(gè)很小的工具：ColorPix）

由于是一個(gè)<a>標(biāo)簽鏈接，所以默認(rèn)會(huì)帶有鏈接下劃線，這時(shí)需要做一個(gè)取消下劃線處理

text-decoration: none;第六步：

所有的內(nèi)容都黏在一起，我們需要把它分開，這個(gè)時(shí)候需要去原網(wǎng)站上測(cè)量一下字間距

所以在標(biāo)簽左右兩側(cè)各加一個(gè)外邊距，并且字體加粗

li{margin-left: 18px;margin-right: 18px;}a{font-weight: bold;}第七步：

到這一步時(shí)，logo和導(dǎo)航欄處于上下關(guān)系，如果要把它們橫向擺放呢？

沒錯(cuò)，還是“浮動(dòng)”

第八步：

可以看到原網(wǎng)站中導(dǎo)航欄，當(dāng)鼠標(biāo)懸停時(shí)，會(huì)有一個(gè)橫杠動(dòng)畫，下面來完成這一步

a:hover{ border:4px solid #E8676B;}:hover 就是鼠標(biāo)懸停，給其加了一個(gè)邊框，但是當(dāng)鼠標(biāo)懸停時(shí)，發(fā)現(xiàn)標(biāo)簽會(huì)動(dòng)，因?yàn)檫吙蛴心J(rèn)的寬度，所以在其一開始就加入一個(gè)邊框并透明即可

a{ border: 4px solid transparent;}原網(wǎng)站中只有下劃線，于是各加一個(gè)bottom

border-bottom: 4px solid transparent;border-bottom: 4px solid #E8676B;又發(fā)現(xiàn)下劃線緊貼著導(dǎo)航框，于是給<a>標(biāo)簽加一個(gè)上下的內(nèi)邊距

padding-top: 10px;padding-bottom: 10px;使用F12查到<li>和<a>標(biāo)簽的高度不同，于是

a{display: block;}

制作LOGO

第一步：

測(cè)量logo的大小，并查找字體，取色，取消空格

第二步：

測(cè)量上邊距離，兩邊形成水平

F12查看標(biāo)簽高度 增加內(nèi)邊距

第三步：

整體下移

第四步：

body默認(rèn)外邊距刪掉

第五步：

上下左右邊距補(bǔ)充

---

OK 制作完成！來看看效果圖