ul li制作简易菜单

最新推荐文章于 2025-05-11 16:52:33 发布

原创最新推荐文章于 2025-05-11 16:52:33 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

HTML 专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#menu{
				width: 160px;
				height: 200px;
				border:2px solid #A9A9A9;
				border-top-color: #F00;
			}
			ul{
				margin: 0 auto;
				list-style: none;
				padding-left: 0px;
			}
			ul li img{
				height: 15px;
				left: 20px;
			}
			ul li a{
				text-decoration: none;
				line-height: 50px;
				color: #008B8B;
				border-bottom: 2px solid #D3D3D3;
				margin: 10px 36px;
				font-size: 14px;
				font-weight: bolder;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li><a href="index.html"><img src="img/1.gif" > 四川火锅</a></li>
				<li><a href="#"><img src="img/1.gif" > 北京火锅</a></li>
				<li><a href="#"><img src="img/1.gif" > 上海火锅</a></li>
				<li><a href="#"><img src="img/1.gif" > 广州火锅</a></li>
			</ul>
		</div>
	</body>
</html>

ul li制作简易菜单