HTML-淘宝导航条

最新推荐文章于 2023-12-06 15:19:56 发布

COLIN程序员

最新推荐文章于 2023-12-06 15:19:56 发布

阅读量4.5k

点赞数 5

分类专栏： wed前端开发-HTML 文章标签： html

本文链接：https://blog.csdn.net/adrion_aaron/article/details/104742164

版权

wed前端开发-HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

淘宝导航条：

在这里插入图片描述
现在用Html来实现淘宝导航条-用常用的HBuilder来编写

下面看代码：

<!DOCTYPE html>
<html>
	<head>
		meta charset="utf-8" />
  		<title>taobao-导航条</title>
 	 	<style type="text/css">
  		nav{
			height: 30px;
			font: "仿宋";
			width: 1000px;
			color: aliceblue;
 
		}
		ul{
			list-style-type: none;
			background-color:goldenrod;
			font-size: 18px;
			letter-spacing: 2px;
		}
		li{
			display: inline;
		}
		li a{
			color: #000;
			text-decoration: none;
			color: aliceblue;
		}
		</style>
	</head>
	<body>
		<nav>
			<ul>
					<li><a href="#">天猫</a></li>
					<li><a href="#">聚划算</a></li>
					<li><a href="#">天猫超市</a></li>
					<li>|</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>|</li>
					<li><a href="#">飞猪旅行</a></li>
					<li><a href="#">智能生活</a></li>
					<li><a href="#">苏宁易购</a></li>
			</ul>
		</nav>
	</body>
</html>

代码效果：
在这里插入图片描述

COLIN程序员

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
HTML-淘宝导航条

淘宝导航条：现在用Html来实现淘宝导航条-用常用的HBuilder来编写下面看代码：<!DOCTYPE html><html> <head> meta charset="utf-8" /> <title>taobao-导航条</title> <style type="text/css">...
复制链接

扫一扫