<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<link href="css/css.css" rel="stylesheet" rel="stylesheet" type="text/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>
style.css：
#nav{
width: 227px;
}
.title{
font-size: 22px; /*字体大小*/
font-weight: bold; /*字体粗细*/
/*background: #e53333; !*颜色*!*/
text-indent: 1em; /*行间距*/
line-height: 25px; /*行高*/
background: red
}
/*list-style:
circle : 空心圆
none : 没有样式
decimal :数字
square :正方形
*/
ul li{
height: 37px; /*列间距*/
list-style: none; /*去除圆点样式*/
text-indent: 1em; /*行间距*/
background: #c2c2c2; /*背景颜色*/
}
/*ul li*/
a{
text-decoration: none; /*去除下划线*/
color: black; /*字体颜色*/
font-size: 14px; /*字体大小*/
}
a:hover{
color: #696ac4; /*鼠标悬浮变色*/
text-decoration: underline; /*鼠标悬浮时，增加下划线*/
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本