一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

CSS——列表样式

列表样式的使用

html页面样式代码

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

CSS样式代码

list-style用法:

none:去掉圆点

circle:变成空心圆

decimal:变成数字

square:变成正方形

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


.title{
     font-size:18px;  /*字体大小*/
     font-weight:bold;  /*粗体*/
     text-indent:2.8em;  /*首行缩进*/
     line-height:35px;   /*行高*/
     background:red;

}

ul li{
   height:30px;
   list-style:none;
   text-indent:1em;
   background:#C0C0C0;

}
a{
  text-decoration:none;/*删除下划线*/
  font-size:14px;
  color:black;
  font-weight:bold;
}
a:hover{
  color:#FFFF00;
  text-decoration:underline;/*加下划线*/
}

效果图展示

在这里插入图片描述

CSS——我的第一个css程序

CSS简介

css：层叠样式表（Cascading Style Sheets）
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰
所谓层叠，可一将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的
而css就可以分别为网页的各个层次设置样式

我的第一个css程序

方式一.把css代码写在html(头部)里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--语法（整个CSS就遵循着一个语法）：选择器{
                                      声明1;
                                      声明2;
                                      声明3;
                                 }
             -->
    <style>
         h1{
              color:red;

           }
    </style>

    
</head>
<body>
<h1>我是标题党</h1>
</body>
</html>

方式二.把css代码和HTML分离,然后在html里引入css链接

建议使用，优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富

css代码

      h1{
      color:red
      }

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<h1>我是标题党</h1>
</body>
</html>

css——列表样式和创建CSS程序

CSS——列表样式

CSS——我的第一个css程序

CSS简介

我的第一个css程序