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

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

代码如下

<html><head><title>ulli</title></head><body><ul><li>首页</li><li>个人主页</li><li>消息中心</li><li>充值中心</li><li>会员中心</li></ul></body></html>

效果如下

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

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

1、去除前面的点

2、让它横向排列


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

<html><head><title>ulli</title></head><style>ulli{list-style:none;}</style><body><ul><li>首页</li><li>个人主页</li><li>消息中心</li><li>充值中心</li><li>会员中心</li></ul></body></html>

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

里面的样式

list-style:none;

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

效果如下


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

在样式代码中加入

float:left;

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



全部代码如下

<html><head><title>ulli</title></head><style>ulli{list-style:none;float:left;}</style><body><ul><li>首页</li><li>个人主页</li><li>消息中心</li><li>充值中心</li><li>会员中心</li></ul></body></html>


效果如下

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

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

margin-right:20px;

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


效果如下

效果还不错


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

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

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


<html><head><title>ulli</title></head><style>ulli{list-style:none;float:left;margin-right:20px;}#menu{width:1200px;margin:0auto;}</style><body><divid="menu"><ul><li>首页</li><li>个人主页</li><li>消息中心</li><li>充值中心</li><li>会员中心</li></ul></div></body></html>


效果如下

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

代码如下

<html><head><title>ulli</title></head><style>ulli{list-style:none;float:left;margin-right:20px;}#menu{width:1200px;margin:0auto;}</style><body><divid="menu"><ul><li>首页</li><li>个人主页</li><li>消息中心</li><li>充值中心</li><li>会员中心</li></ul><br/><hr/></div></body></html>

效果如下

<br/>代表换行，相当于回车键

<hr/>代表分割线。


一个简单的菜单效果就这样出来了