文章目录
前言
本文所进行的实战资源来自up主遇见狂神说
点我跳转相应视频
要求
要求：制作一个类似淘宝、京东侧边购物栏的网页，点击相应文字可跳转网页（设置成假链接即可）
成品如图：
其中橙色字体为鼠标停留在该文字时的样式
思路与步骤
- 蓝底部分总体框架使用列表完成，然后使用div标签将其包起来即可；
- 给div盒子设置样式调整宽度，令其不会有多余的背景颜色
- 对标题标签和列表标签使用元素选择器调整样式
- （重点）使用子代选择器将列表元素的圆点去掉
- （重点）使用超链接伪类选择器设置鼠标停留在有链接处时字体样式改变
- 利用background属性给每一行最后加上一个小箭头
代码参考
1、HTML部分
<!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>Document</title>
<link rel="stylesheet" href="列表style.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a> /
<a href="#">音像</a> /
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a> /
<a href="#">手机</a> /
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a> /
<a href="#">办公</a> /
</li>
<li>
<a href="#">家居</a> /
<a href="#">家装</a> /
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a> /
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a> /
<a href="#">钟表</a> /
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a> /
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a> /
<a href="#">旅行</a> /
<a href="#">充值</a> /
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
2、CSS部分
/* 给div标签设置样式 */
#nav {
width: 270px;
/* 设置外边距为auto，使盒子居中
margin: auto; */
}
/* 设置标题样式 */
.title {
font-weight: 50px;
text-indent: 1em;
background-color: rgba(255, 81, 0, 0.548);
}
/* 整体列表 */
ul {
background-color: rgba(0, 217, 255, 0.425);
}
/* 列表中的li元素 */
ul li {
/* 清除圆点样式 */
list-style: none;
height: 25px;
padding: 5px;
/* 以下是设置一个小箭头的样式 */
background-image: url(../image/R-C.jpg) ;
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: 208px 12px;
}
a {
font-size: 16px;
color: black;
/* 清除下划线样式 */
text-decoration: none;
}
/* 鼠标停留 */
a:hover {
font-size: 18px;
color: orange;
text-decoration: underline;
}