现在我们用一个ul li标签来做一个菜单
首先来看看ul li 的基本样式
代码如下
计算
安全
数据库
网络和加速
企业服务
<html>
<head>
<title>ul li</title>
</head>
<body>
<ul>
<li>首页</li>
<li>个人主页</li>
<li>消息中心</li>
<li>充值中心</li>
<li>会员中心</li>
</ul>
</body>
</html>效果如下
我们看到，代码中的文字按循序排列了。前面还有个点，这就是ul li的默认样式
现在我们主要有两个动作。
1、去除前面的点
2、让它横向排列
好，我们先来做第一步，去除点
<html>
<head>
<title>ul li</title>
</head>
<style>
ul li{
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>ul li</title>
</head>
<style>
ul li{
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:0 auto;
}意思是，设置宽度未1200px，边距上下为0，左右自动。
<html>
<head>
<title>ul li</title>
</head>
<style>
ul li{
list-style:none;
float:left;
margin-right:20px;
}
#menu{
width:1200px;
margin:0 auto;
}
</style>
<body>
<div id="menu">
<ul>
<li>首页</li>
<li>个人主页</li>
<li>消息中心</li>
<li>充值中心</li>
<li>会员中心</li>
</ul>
</div>
</body>
</html>效果如下
看起来好像不明显，我们加条分隔线hr
代码如下
<html>
<head>
<title>ul li</title>
</head>
<style>
ul li{
list-style:none;
float:left;
margin-right:20px;
}
#menu{
width:1200px;
margin:0 auto;
}
</style>
<body>
<div id="menu">
<ul>
<li>首页</li>
<li>个人主页</li>
<li>消息中心</li>
<li>充值中心</li>
<li>会员中心</li>
</ul>
<br/>
<hr/>
</div>
</body>
</html>效果如下
<br/>代表换行，相当于回车键
<hr/>代表分割线。
一个简单的菜单效果就这样出来了
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
