<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;
}

家好，今天给大家介绍一款，带图标的垂直导航菜单的html页面源码（图1）。送给大家哦，获取方式在本文末尾。

点击每个按钮时，都有切换特效，并显示按钮的说明，看起来非常不错（图2）

代码完整，需要的朋友可以下载（图3）

本源码编码：10148，需要的朋友，点击下面的链接后，搜索10148，即可获取。

就爱UI - 分享UI设计的点点滴滴

位同学大家好，开始进入到本节课。通过之前的课程已经把浮动给彻底的学完了，很多同学跟我私信、留言说：老师，我已经看完了，觉得好刺激，想要实战，想要锻炼自己，有这样的感觉是好的。所以从本期开始老师将带领大家进行实战，把源码专区的界面做出来，进行实战挑战自己。

本期课首先要把导航界面一步步的实现出来。首先来实现logo的专区，logo可以打开浏览器的f12，然后分析一下它。把鼠标移动上去过后可以明显的看见它是一个mg标签，mg标签是图片框标签，所以这个区域可以用图片框标签来实现。

·首先把图片进行储存，将它储存到本地，然后将所储存的标签放到原本的布局的源码的列表里面去。可以新建文件夹叫做文件或是im、a、t、e，尽量文件夹的起名都用英文好一点，虽然是用中文编程，但是文件夹可以用英文或者是拼音，觉得更标准一点。

·然后对文件进行引用，引用之前首先新建一个筛选器，筛选器可以把它理解为是一个分组，新建一个试点器，比如叫做全局文件logo，它是属于全局文件，新建一个全局文件的文件夹。

·然后进行引用，打开文件，找到目录，选择图像文件进行引用。引用过后再来新建一个文件夹，这个文件夹叫做原码专区，cs或者是原码专区都可以，就叫做原码专区。

·然后在原码专区里面去新建一个文件，新建一个原码专区的cs文件，这里点击lcs，点击创建。这里创建之前其实也可以再新建一个文件夹，这个文件夹就是cs文件，可以把cs文件放到cs目录以后，需要加斯cable可以再放到加斯cable的目录，要把这分目录的分组做好。

·选择目录，将它保存在项目里面的，等一下找到目录，将它保存项目里面的css文件夹里面，点击选择，点击创建。

·创建过后打开点lcs的文件，将之前所编写这些布局的cs文件拷贝过去，剪切一下，然后再粘贴过来。粘贴过来过后来进行代码格式化，整理一下，这样看起来代码就非常的舒服了。

·然后把标签、样式标签就可以删掉了，这样原代码可以很清晰的进行观看，cs可能以后会写很多cs，原码主要写cs就写这里就好了，atm就写h n代码，是不是非常的舒服？

·接下来还要对cs进行引用，虽然创建了cs，但是cs还没有在h s引用一下就好了，cs文件就属于h m a的文件了。

·首先还对页面进行分析，可以看见最基础布局是可以把最基础布局先运行起来，最基础布局是顶部导航已经把实现了，其实顶部的布局是居中的，内容是居中的，是从这个位置开始居中的，所以还要创建一个居中的盒子在顶部导航里面，都要进行居中。

·接下来来实现这一步，在顶部导航区域里面新建一个区块盒子，盒子可以在顶部导航这里尽量挨着它，再新建一个类名，比如叫做居中，叫导航顶部，导顶部导航居中盒子，顶部导航集中盒子更好理解一点。

·宽度之前分析过专区的宽度是一千一百七十px，就输一千一百七十px就好了，一千一百七十px高度就不填高度，让它默认去继承顶部盒子高度。

·改个背景颜色，方便去查看背景颜色，给它一个红色，然后进行设置，类名要记住经常性的保存，不保存是不生效的。

·进行设置，点击运行，可以看见运行过后目前为止是没有效果的，可以再次打开代码来看一下，宽度一千一百七十px，背景颜色为红色，但是没有生效，可以给它指定个高度，指定高度为五十五px，运行起来看一下，有效果，现在是有效果的。

·有效果过后先让它进行居中，比如背景居中是外边距，首先是零ps，自动就居中了，运行起来是不是居中了？

·然后就可以在盒子里面去写logo图片了，首先来分析下logo图片，用f4，打开开发者工具，点击这里，鼠标移动上去，可以看见图片的宽度和高度是多少，这里有显示，图片下面都有显示，是八十的宽，三十的高。

·所以这个时候可以打出一个图片框，在这里打出一个图片框，这个图片框的图片地址就是logo，文件logo。

·这个时候设置一下图片框的宽度和高度，可以这样写，可以直接点上面盒子名称，点图片框，这么写的含义就是指定类名下面的图片框。这个方式之前是没有学习过，给大家讲一下。

·通过类名，比如指定一个类名指定的盒子，盒子下面的所有的组件都可以通过类名，类名点某一个组件名称来进行指定，理解吧？比如这里是类名是这个，顶部导航居中盒子，类名点顶部导航居中盒子，给个空格，名称就是组建名，图片框的名称，可以设置它的一些属性了。

·比如设它的宽度为八十px，高度三十px，可以运行起来看一下效果，点击运行，是不是有个图片框，这就显示到八十和三十，把红色删掉，红色的背景删掉，是不是八十、三十，看起来很舒服。

·接下来要让它进行居中，既然让它进行居中，其实也很简单，只需要设置它的外面就好了。首先要进行分析，它的高度是三十px，而这个副组件盒子的高度是五十五px，就是五十五px，要经常做计算，要严格一点来做计算，五十五减去三十就等于二十五px，二十五px就可以除以二。

·比如上边距是十五点，十二点五px，下边距是十二点五px，所以直接指定一个外边距，外边距第一个参数是上下，十二点五px，左右零px，这样就好了，点击运行，可以看见是不是就居中了。

本节课就简单的先实现这样的logo效果，下节课再来实现，比如像这里面的导航的效果，一步步来实现。本节课到此结束，下节课再见。