|
IT行業(yè)近十年來發(fā)展迅猛，衍生出許多新的職業(yè)，如UI設(shè)計(jì)師、開發(fā)工程師、軟件測試工程師等，在眾多新興職業(yè)中，Web前端工程師就是其中之一。在IT行業(yè)，Web前端真正得到重視大概也要六七年。伴隨著因特網(wǎng)的迅速發(fā)展，各種因特網(wǎng)項(xiàng)目不斷涌現(xiàn)，對用戶體驗(yàn)的要求也越來越高，前端開發(fā)逐漸成為互聯(lián)網(wǎng)研發(fā)的重要角色。 CSS導(dǎo)航欄
導(dǎo)航欄熟練使用導(dǎo)航欄，對于任何網(wǎng)站都非常重要。 使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。 導(dǎo)航欄=鏈接列表作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個(gè)導(dǎo)航欄是必須的 。在我們的例子中我們將建立一個(gè)標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。 導(dǎo)航條基本上是一個(gè)鏈接列表，所以使用<ul>和<li>元素非常有意義： <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> 現(xiàn)在，讓我們從列表中刪除邊距和填充： ul { list-style-type: none; margin: 0; padding: 0;
}例子解析： list-style-type:none-移除列表前小標(biāo)志。一個(gè)導(dǎo)航欄并不需要列表標(biāo)記 移除瀏覽器的默認(rèn)設(shè)置將邊距和填充設(shè)置為0 上面的例子中的代碼是垂直和水平導(dǎo)航欄使用的標(biāo)準(zhǔn)代碼。 垂直導(dǎo)航欄上面的代碼，我們只需要元素的樣式，建立一個(gè)垂直的導(dǎo)航欄： a{ display:block; width:60px;
}示例說明： display:block-顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度 width:60px-塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè)60像素的寬度 注意：請務(wù)必指定元素在垂直導(dǎo)航欄的的寬度。如果省略寬度，IE6可能產(chǎn)生意想不到的效果。 垂直導(dǎo)航條實(shí)例創(chuàng)建一個(gè)簡單的垂直導(dǎo)航條實(shí)例，在鼠標(biāo)移動到選項(xiàng)時(shí)，修改背景顏色：
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1;
}
li a { display: block; color: #000; padding: 8px 16px; text-decoration: none;
}
/* 鼠標(biāo)移動到選項(xiàng)上修改背景顏色 */li a:hover { background-color: #555; color: white;
}激活/當(dāng)前導(dǎo)航條實(shí)例在點(diǎn)擊了選項(xiàng)后，我們可以添加"active"類來標(biāo)準(zhǔn)哪個(gè)選項(xiàng)被選中：
.active { background-color: #4CAF50; color: white;
}創(chuàng)建鏈接并添加邊框可以在<li>or上添加text-align:center樣式來讓鏈接居中。 可以在border<ul>上添加border屬性來讓導(dǎo)航欄有邊框。如果要在每個(gè)選項(xiàng)上添加邊框，可以在每個(gè)<li>元素上添加border-bottom: ul { border: 1px solid #555;
}
li { text-align: center; border-bottom: 1px solid #555;
}
li:last-child { border-bottom: none;
}全屏高度的固定導(dǎo)航條接下來我們創(chuàng)建一個(gè)左邊是全屏高度的固定導(dǎo)航條，右邊是可滾動的內(nèi)容。 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* 全屏高度 */
position: fixed;
overflow: auto; /* 如果導(dǎo)航欄選項(xiàng)多，允許滾動 */}注意:該實(shí)例可以在移動設(shè)備上使用。 水平導(dǎo)航欄有兩種方法創(chuàng)建橫向?qū)Ш綑?。使用?nèi)聯(lián)(inline)或浮動(float)的列表項(xiàng)。 這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。 內(nèi)聯(lián)列表項(xiàng)建立一個(gè)橫向?qū)Ш綑诘姆椒ㄖ皇侵付ㄔ兀鲜龃a是標(biāo)準(zhǔn)的內(nèi)聯(lián): li{ display:inline;
}實(shí)例解析： display:inline;-默認(rèn)情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個(gè)列表項(xiàng)，以顯示一行。 浮動列表項(xiàng)在上面的例子中鏈接有不同的寬度。 對于所有的鏈接寬度相等，浮動<li>元素，并指定為元素的寬度： li{ float:left;
}a{ display:block; width:60px;
}實(shí)例解析： float:left-使用浮動塊元素的幻燈片彼此相鄰 display:block-顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度 width:60px-塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè)60像素的寬度 水平導(dǎo)航條實(shí)例創(chuàng)建一個(gè)水平導(dǎo)航條，在鼠標(biāo)移動到選項(xiàng)后修改背景顏色。 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;
}
li { float: left;
}
li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
/*鼠標(biāo)移動到選項(xiàng)上修改背景顏色 */li a:hover { background-color: #111;
}激活/當(dāng)前導(dǎo)航條實(shí)例在點(diǎn)擊了選項(xiàng)后，我們可以添加"active"類來標(biāo)準(zhǔn)哪個(gè)選項(xiàng)被選中： .active { background-color: #4CAF50;
}鏈接右對齊 將導(dǎo)航條最右邊的選項(xiàng)設(shè)置右對齊(float:right;)： <ul> <li><a href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯(lián)系</a></li> <li style="float:right"><a class="active" href="#about">關(guān)于</a></li> </ul> 添加分割線 <li>通過border-right樣式來添加分割線: /* 除了最后一個(gè)選項(xiàng)(last-child) 其他的都添加分割線 */li { border-right: 1px solid #bbb;
}
li:last-child { border-right: none;
}固定導(dǎo)航條 可以設(shè)置頁面的導(dǎo)航條固定在頭部或者底部： 固定在頭部 ul { position: fixed; top: 0; width: 100%;
}固定在底部 ul { position: fixed; bottom: 0; width: 100%;
}注意:該實(shí)例可以在移動設(shè)備上使用。 灰色水平導(dǎo)航條固定在底部 ul { border: 1px solid #e7e7e7; background-color: #f3f3f3;
}
li a { color: #666;
}前端學(xué)習(xí)永遠(yuǎn)不會是單槍匹馬，需要前人的引領(lǐng)，也需要平臺的不斷交流與思想碰撞。這能夠快速入門，減少走彎路，還能讓自己找到問題的根源。 |
|
|
