2021-06-22列表样式与背景图片

最新推荐文章于 2024-10-13 17:27:18 发布

pangiggs

最新推荐文章于 2024-10-13 17:27:18 发布

阅读量88

点赞数

分类专栏：学习文章标签： css 列表 html

本文链接：https://blog.csdn.net/pangiggs/article/details/118122065

版权

HTML CSS 导航菜单无圆点列表商品分类

关键词由CSDN通过智能技术生成

学习专栏收录该内容

135 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
  <link rel="stylesheet" href="style1.css" 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>

#nav{
width: 300px;
background: #a0a0a0;
}



.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
/* list-style: none; 设置没有圆点


*/

ul li{
  height: 30px;
  list-style: none;
  text-indent: 1em;
}
a{
   text-decoration: none;
   font-size: 14px;
   color: black;
}
a:hover{
  color: orange;
}