利用li标签做菜单-创新互联

现在我们用一个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>

效果如下

利用li标签做菜单

我们看到，代码中的文字按循序排列了。前面还有个点，这就是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;

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

效果如下

利用li标签做菜单

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

在样式代码中加入

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>

效果如下

利用li标签做菜单

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

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

margin-right:20px;

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

效果如下

利用li标签做菜单

效果还不错

现在我们让它居中,我们用一个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>

效果如下

利用li标签做菜单看起来好像不明显，我们加条分隔线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>

效果如下

利用li标签做菜单

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

<hr/>代表分割线。

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：利用li标签做菜单-创新互联
本文路径：https://www.cdcxhl.com/article16/dhoddg.html

成都网站建设公司_创新互联，为您提供品牌网站建设、网站设计、营销型网站建设、自适应网站、微信公众号、响应式网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容