现在我们用一个ul li标签来做一个菜单

首先来看看ul li 的基本样式

代码如下


	
		ul li
	
	
		
  • 首页
  • 个人主页
  • 消息中心
  • 充值中心
  • 会员中心

效果如下

利用li标签做菜单_第1张图片

我们看到,代码中的文字按循序排列了。前面还有个点,这就是ul li的默认样式

现在我们主要有两个动作。

1、去除前面的点

2、让它横向排列


好,我们先来做第一步,去除点


	
		ul li
	
	
	
		
  • 首页
  • 个人主页
  • 消息中心
  • 充值中心
  • 会员中心

代码中,我加入了样式,写法和之前的不一样,这是另外一种写法,直接写标签名,上面ul li的意思是:代码中的ul里面的所有li,空格代表里面的所有,包含子级标签和更深层次的标签,例如孙级标签。如果只要子级,而不需要更加深入,就用ul>li。>符号代表子级。

里面的样式

list-style:none;

意思就是让这个集合没有任何修饰,那么它前面的点就会消失

效果如下


第一步已经完成了,现在进行第二步,让它横向

在样式代码中加入

float:left;

意思就是让标签向左边浮动



全部代码如下


	
		ul li
	
	
	
		
  • 首页
  • 个人主页
  • 消息中心
  • 充值中心
  • 会员中心


效果如下

利用li标签做菜单_第2张图片

这个时候,我们已经完成大部分工作了。

下面让它美化点,加点边距,在样式代码中加入

margin-right:20px;

意思就是,让li标签的右边边距为20px


效果如下

利用li标签做菜单_第3张图片

效果还不错


现在我们让它居中,我们用一个div包住原来的ul,再给div加上两句样式,样式代码如下

#menu{
			width:1200px;
			margin:0 auto;
		}

意思是,设置宽度未1200px,边距上下为0,左右自动。



	
		ul li
	
	
	
		
			
  • 首页
  • 个人主页
  • 消息中心
  • 充值中心
  • 会员中心


效果如下

看起来好像不明显,我们加条分隔线hr

代码如下


	
		ul li
	
	
	
		
			
  • 首页
  • 个人主页
  • 消息中心
  • 充值中心
  • 会员中心