<ul>
 <li>模塊1
 <ul>
 <li>模塊1.1</li>
 <li>模塊1.2</li>
 <li>模塊1.3</li>
 <li>模塊1.4</li>
 </ul>
 </li>
 <li>模塊2
 <ul>
 <li>模塊2.1</li>
 <li>模塊2.2</li>
 <li>模塊2.3</li>
 <li>模塊2.4</li>
 </ul>
 </li>
..........
</ul>

<ul>
<li><a href="javascript：;" >用戶管理</a></li>
...
</ul>

<link rel="stylesheet" type="text/css" href="CSS/demo.css">

<ul>
 <li class="litems"><a href="javascript：;">用戶管理</a>
 <ul class="uitems">
 <li><a href="javascript：;">添加用戶</a></li>
 </ul>
 </li>
</ul>

 .litems>a
{
	background-color:#990020; /*背景色*/
	height:30px; 
	display:block; /*塊顯示*/
	line-height:30px; /*垂直居中*/
	border-left: solid 12px #711515; /*邊框*/
	padding-left:5px; /*左邊距*/
}

a:hover
{
	color:#FF0;
}

家好，今天給大家介紹一款，帶圖標(biāo)的垂直導(dǎo)航菜單的html頁面源碼（圖1）。送給大家哦，獲取方式在本文末尾。

點(diǎn)擊每個(gè)按鈕時(shí)，都有切換特效，并顯示按鈕的說明，看起來非常不錯(cuò)（圖2）

代碼完整，需要的朋友可以下載（圖3）

本源碼編碼：10148，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10148，即可獲取。

就愛UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴

位同學(xué)大家好，開始進(jìn)入到本節(jié)課。通過之前的課程已經(jīng)把浮動(dòng)給徹底的學(xué)完了，很多同學(xué)跟我私信、留言說：老師，我已經(jīng)看完了，覺得好刺激，想要實(shí)戰(zhàn)，想要鍛煉自己，有這樣的感覺是好的。所以從本期開始老師將帶領(lǐng)大家進(jìn)行實(shí)戰(zhàn)，把源碼專區(qū)的界面做出來，進(jìn)行實(shí)戰(zhàn)挑戰(zhàn)自己。

本期課首先要把導(dǎo)航界面一步步的實(shí)現(xiàn)出來。首先來實(shí)現(xiàn)logo的專區(qū)，logo可以打開瀏覽器的f12，然后分析一下它。把鼠標(biāo)移動(dòng)上去過后可以明顯的看見它是一個(gè)mg標(biāo)簽，mg標(biāo)簽是圖片框標(biāo)簽，所以這個(gè)區(qū)域可以用圖片框標(biāo)簽來實(shí)現(xiàn)。

·首先把圖片進(jìn)行儲(chǔ)存，將它儲(chǔ)存到本地，然后將所儲(chǔ)存的標(biāo)簽放到原本的布局的源碼的列表里面去?？梢孕陆ㄎ募A叫做文件或是im、a、t、e，盡量文件夾的起名都用英文好一點(diǎn)，雖然是用中文編程，但是文件夾可以用英文或者是拼音，覺得更標(biāo)準(zhǔn)一點(diǎn)。

·然后對(duì)文件進(jìn)行引用，引用之前首先新建一個(gè)篩選器，篩選器可以把它理解為是一個(gè)分組，新建一個(gè)試點(diǎn)器，比如叫做全局文件logo，它是屬于全局文件，新建一個(gè)全局文件的文件夾。

·然后進(jìn)行引用，打開文件，找到目錄，選擇圖像文件進(jìn)行引用。引用過后再來新建一個(gè)文件夾，這個(gè)文件夾叫做原碼專區(qū)，cs或者是原碼專區(qū)都可以，就叫做原碼專區(qū)。

·然后在原碼專區(qū)里面去新建一個(gè)文件，新建一個(gè)原碼專區(qū)的cs文件，這里點(diǎn)擊lcs，點(diǎn)擊創(chuàng)建。這里創(chuàng)建之前其實(shí)也可以再新建一個(gè)文件夾，這個(gè)文件夾就是cs文件，可以把cs文件放到cs目錄以后，需要加斯cable可以再放到加斯cable的目錄，要把這分目錄的分組做好。

·選擇目錄，將它保存在項(xiàng)目里面的，等一下找到目錄，將它保存項(xiàng)目里面的css文件夾里面，點(diǎn)擊選擇，點(diǎn)擊創(chuàng)建。

·創(chuàng)建過后打開點(diǎn)lcs的文件，將之前所編寫這些布局的cs文件拷貝過去，剪切一下，然后再粘貼過來。粘貼過來過后來進(jìn)行代碼格式化，整理一下，這樣看起來代碼就非常的舒服了。

·然后把標(biāo)簽、樣式標(biāo)簽就可以刪掉了，這樣原代碼可以很清晰的進(jìn)行觀看，cs可能以后會(huì)寫很多cs，原碼主要寫cs就寫這里就好了，atm就寫h n代碼，是不是非常的舒服？

·接下來還要對(duì)cs進(jìn)行引用，雖然創(chuàng)建了cs，但是cs還沒有在h s引用一下就好了，cs文件就屬于h m a的文件了。

·首先還對(duì)頁面進(jìn)行分析，可以看見最基礎(chǔ)布局是可以把最基礎(chǔ)布局先運(yùn)行起來，最基礎(chǔ)布局是頂部導(dǎo)航已經(jīng)把實(shí)現(xiàn)了，其實(shí)頂部的布局是居中的，內(nèi)容是居中的，是從這個(gè)位置開始居中的，所以還要?jiǎng)?chuàng)建一個(gè)居中的盒子在頂部導(dǎo)航里面，都要進(jìn)行居中。

·接下來來實(shí)現(xiàn)這一步，在頂部導(dǎo)航區(qū)域里面新建一個(gè)區(qū)塊盒子，盒子可以在頂部導(dǎo)航這里盡量挨著它，再新建一個(gè)類名，比如叫做居中，叫導(dǎo)航頂部，導(dǎo)頂部導(dǎo)航居中盒子，頂部導(dǎo)航集中盒子更好理解一點(diǎn)。

·寬度之前分析過專區(qū)的寬度是一千一百七十px，就輸一千一百七十px就好了，一千一百七十px高度就不填高度，讓它默認(rèn)去繼承頂部盒子高度。

·改個(gè)背景顏色，方便去查看背景顏色，給它一個(gè)紅色，然后進(jìn)行設(shè)置，類名要記住經(jīng)常性的保存，不保存是不生效的。

·進(jìn)行設(shè)置，點(diǎn)擊運(yùn)行，可以看見運(yùn)行過后目前為止是沒有效果的，可以再次打開代碼來看一下，寬度一千一百七十px，背景顏色為紅色，但是沒有生效，可以給它指定個(gè)高度，指定高度為五十五px，運(yùn)行起來看一下，有效果，現(xiàn)在是有效果的。

·有效果過后先讓它進(jìn)行居中，比如背景居中是外邊距，首先是零ps，自動(dòng)就居中了，運(yùn)行起來是不是居中了？

·然后就可以在盒子里面去寫logo圖片了，首先來分析下logo圖片，用f4，打開開發(fā)者工具，點(diǎn)擊這里，鼠標(biāo)移動(dòng)上去，可以看見圖片的寬度和高度是多少，這里有顯示，圖片下面都有顯示，是八十的寬，三十的高。

·所以這個(gè)時(shí)候可以打出一個(gè)圖片框，在這里打出一個(gè)圖片框，這個(gè)圖片框的圖片地址就是logo，文件logo。

·這個(gè)時(shí)候設(shè)置一下圖片框的寬度和高度，可以這樣寫，可以直接點(diǎn)上面盒子名稱，點(diǎn)圖片框，這么寫的含義就是指定類名下面的圖片框。這個(gè)方式之前是沒有學(xué)習(xí)過，給大家講一下。

·通過類名，比如指定一個(gè)類名指定的盒子，盒子下面的所有的組件都可以通過類名，類名點(diǎn)某一個(gè)組件名稱來進(jìn)行指定，理解吧？比如這里是類名是這個(gè)，頂部導(dǎo)航居中盒子，類名點(diǎn)頂部導(dǎo)航居中盒子，給個(gè)空格，名稱就是組建名，圖片框的名稱，可以設(shè)置它的一些屬性了。

·比如設(shè)它的寬度為八十px，高度三十px，可以運(yùn)行起來看一下效果，點(diǎn)擊運(yùn)行，是不是有個(gè)圖片框，這就顯示到八十和三十，把紅色刪掉，紅色的背景刪掉，是不是八十、三十，看起來很舒服。

·接下來要讓它進(jìn)行居中，既然讓它進(jìn)行居中，其實(shí)也很簡單，只需要設(shè)置它的外面就好了。首先要進(jìn)行分析，它的高度是三十px，而這個(gè)副組件盒子的高度是五十五px，就是五十五px，要經(jīng)常做計(jì)算，要嚴(yán)格一點(diǎn)來做計(jì)算，五十五減去三十就等于二十五px，二十五px就可以除以二。

·比如上邊距是十五點(diǎn)，十二點(diǎn)五px，下邊距是十二點(diǎn)五px，所以直接指定一個(gè)外邊距，外邊距第一個(gè)參數(shù)是上下，十二點(diǎn)五px，左右零px，這樣就好了，點(diǎn)擊運(yùn)行，可以看見是不是就居中了。

本節(jié)課就簡單的先實(shí)現(xiàn)這樣的logo效果，下節(jié)課再來實(shí)現(xiàn)，比如像這里面的導(dǎo)航的效果，一步步來實(shí)現(xiàn)。本節(jié)課到此結(jié)束，下節(jié)課再見。