码迷,mamicode.com
首页 > 其他好文 > 详细

使用UL和LI来完成菜单

时间:2020-01-06 21:07:16      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:div   ext   htm   height   size   info   play   line   圆点   

代码如下

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用ul和li来完成菜单</title>
	<style>
		.menu{
			width: 693px;
			height: 50px;
			background-color: cyan;
			/*list-style:none去掉小圆点*/
			list-style: none;
			margin: 50px auto 0;
			padding: 0;
		}
		.menu li{
			width: 98px;
			height:50px;
			/*display: inline-block;*/
			float: left;
			border: 1px solid gold;
			background-color: #fff;
			font-size:16px;
			margin-left: -1px;
		}
		.menu li a{
			/*background-color: gold; */
			display: block;
			width: 98px;
			height: 50px;
			text-align: center;
			line-height: 50px;
			color: pink;
			text-decoration: none;
			font-size:20px;
			font-family: ‘microsoft yahei‘;
		}
		.menu li a:hover{
			background-color: skyblue;
			color: #fff;
		}
	</style>
</head>
<body>
	<ul class="menu">
		<li><a href="#">公司简介</a></li>
		<li><a href="#">维修服务</a></li>
		<li><a href="#">售后服务</a></li>
		<li><a href="#">软件下载</a></li>
		<li><a href="#">价格查询</a></li>
		<li><a href="#">加入我们</a></li>
		<li><a href="#">客户反馈</a></li>
	</ul>
</body>
</html>

  执行效果图

技术图片

使用UL和LI来完成菜单

标签:div   ext   htm   height   size   info   play   line   圆点   

原文地址:https://www.cnblogs.com/zijiang-4476/p/12158302.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!