目录
一、效果展示
二、代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>京东导航栏</title>
<style>
/* 将所有边距取消 */
* {
margin: 0px;
padding: 0px;
}
/* 替换背景颜色 */
body {
background-color: #bfa;
}
/* 将主标签居中，方便观看 */
#all {
margin: 0px auto;
width: 200px;
}
ul {
width: 100%;
background-color: white;
/* 取消列表小圆点 */
list-style: none;
/* 增加内容距 */
padding: 0px 2px 0px;
}
/* 增加每个li的上内边距 */
li {
padding: 2px 0px 0px;
}
/* 增加鼠标移动效果 */
li:hover {
background-color: gainsboro;
}
/* 链接鼠标移动效果 */
a:hover {
color: red;
}
/* 取消下划线 */
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="all">
<ul>
<li>
<!-- 用实体增加空格段 -->
购物
<a href="https://www.taobao.com/">淘宝</a>/<a
href="https://www.jd.com/"
>京东</a
>
</li>
<li>
搜索引擎
<a href="https://www.baidu.com/">百度</a>/<a
href="https://www.360.cn/"
>360</a
>
</li>
<li>
视频
<a href="https://www.iqiyi.com/">爱奇艺</a>/<a
href="https://v.qq.com/"
>腾讯视频</a
>
</li>
</ul>
</div>
</body>
</html>