CSS怎样设定目录款式特性(看这篇文章内容就够用

日期:2021-02-28 类型:科技新闻 

关键词:小程序和公众号区别,小程序生成二维码,小程序前端框架,小程序开发商排名,小程序码

目录款式特性

  •  在 HTML 中有 2 种目录、无编码序列表和井然有序目录,在工作中中无编码序列表较为常见,无编码序列表便是 ul 标识和 li 标识组成成的称之为无编码序列表,那甚么是井然有序目录呢?便是 ol 标识和 li 标识组成成的称之为井然有序目录,目录的基本专业知识就简易表明下,本章內容关键表明的是怎样给目录设定款式,若有不懂目录是甚么的园友笔者提议去 W3school官方网站 开展学习培训。
  • 目录款式常见的特性有4种如: list-style-typelist-style-positionlist-style-imagelist-style ,在这里便是简易表明以下表常见的特性名字罢了,实际应用或每个特性值的详细介绍,在下面会实际的表明,爱学习培训的园友无需担忧哦。

list-style-type特性

  • list-style-type特性功效:便是设定目录前面新项目标记的种类。
  • list-style-type特性值表明表。

      特性值 叙述 none 将目录前面新项目标记除去掉。 disc 将目录前面新项目标记设定为实心圆。 circle 将目录前面新项目标记设定为空心圆。 square 将目录前面新项目标记设定为实心小方块。

特性值为none应用方法

  • 让大家进到目录的 list-style-type 特性值为 none 实践活动,实践活动內容如:应用 class 特性值为 .box 将目录前面新项目标记除去掉。
  • 大家在实践活动目录的 list-style-type 特性值为 none 以前看看目录前面新项目标记是甚么,让初学者有1个直观的印象。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目录的list-style-type特性值为none实践活动</title>
</head>
  
<body>
    <ul>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
    </ul>
</body>
</html>

結果图

如今爱学习培训的园友们了解了甚么是目录前面的新项目标记了,那大家就进到目录的 list-style-type 特性值为 none 实践活动咯。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目录的list-style-type特性值为none实践活动</title>
    <style>
        .box{
            list-style-type: none;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
    </ul>
</body>
</html>

結果图

既然能看到这里表明园友早已把握了,目录的 list-style-type 特性值为 none 应用,恭贺恭贺恭贺。

特性值为disc应用方法

在这里表明以下表的 list-style-type 特性值为 disc ,目录的 list-style-type 特性值默认设置便是 disc ,假如是仔细的园友早已发现了,上面有现成的列子在这里就但是多的详细介绍了,这个特性值为 disc 就绕过了哈。

特性值为circle应用方法

让大家进到目录的 list-style-type 特性值为 circle 实践活动,实践活动內容如:将目录前面的新项目标记设定为空心圆。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目录的list-style-type特性值为circle实践活动</title>
    <style>
        .box{
            list-style-type: circle;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
    </ul>
</body>
</html>

結果图

特性值为square应用方法

让大家进到目录的 list-style-type 特性值为 square 实践活动,实践活动內容如:将目录前面新项目标记设定为实心方块。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目录的list-style-type特性值为square实践活动</title>
    <style>
        .box{
            list-style-type: square;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
    </ul>
</body>
</html>

結果图

list-style-position特性

list-style-position 特性功效:设定目录前面新项目标记的部位, list-style-position 特性有2个特性值,各自是 outsideinside ,实际表明看下面的特性值表明表。

list-style-position特性值表明表 

      特性值 叙述 outside 将目录前面新项目标记设定出外面。 inside 将目录前面新项目标记设定在里边。

特性值为outside应用方法

  • 在实践活动 list-style-position 特性值为 outside 以前,大家先看看目录前面的新项目标记的默认设置部位在哪儿,笔者以便让初学者有1个直观的印象,笔者将 HTML 网页页面中的 ul 标识 li 标识设定了1些款式。
  •  ul 标识款式如:: width 宽度设定为 300px 像素、 height 高宽比为 150px 像素、 border 边框为( 1px 像素、显示信息是实线、边框色调为蓝色)、款式。
  • ul 标识中的 li 标识设定款式如: width 宽度设定为 280px 像素、 height 高宽比为 30px 像素 line-height 行高为 30px 像素、 border 边框为( 1px 像素、显示信息是实线、边框色调为鲜红色)、款式。
  • 假如园友沒有把握 border 边框的专业知识,爱学习培训的园友无需担忧之后会写 border 边框的文章内容,若有想掌握 border 边框专业知识的园友能够去W3school官方网站 开展学习培训。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>特性值为outside应用方法</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
    </ul>
   
</body>
</html>

結果图

如今大伙儿应当很清晰的看到了目录前面新项目的标记默认设置在 ul 标识和 li 标识之间的部位,如今大家了解了目录前面的新项目标记的默认设置部位,那大家开展 list-style-position 特性值为 outside 实践活动了,实践活动內容:将 HTML 网页页面中的目录前面的新项目标记设定为外面。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>特性值为outside应用方法</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style-position: outside;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
    </ul>
   
</body>
</html>

結果图

留意:为何给目录设定了 list-style-position 特性值为 outside ,运作結果沒有产生任何转变呢,由于目录前面的新项目标记默认设置就出外面的部位,目录前面的新项目标记外面的部位便是 ul 标识和 li 标识之间的部位。

特性值为inside应用方法

  1.  根据详细介绍 list-style-position 特性值为 outside ,大伙儿早已了解了目录前面新项目标记外边的部位了,接下来大家将目录前面新项目标记设定在里边咯。
  2. 让大家进到 list-style-position 特性值为 inside 实践活动,将目录前面新项目标记部位设定在里边。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>特性值为inside应用方法</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style-position: inside;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
    </ul>
   
</body>
</html>

結果图

留意: list-style-position 特性值为 inside 功效便是将目录前面新项目标记部位设定在 li 标识中,这便是里边的部位。

list-style-image特性

list-style-image 特性功效:将目录前面新项目标记设定为1张照片。

 list-style-image特性表明表 

      特性值名字 叙述 url 设定目录前面新项目标记的照片的相对路径

让大家进到 list-style-image 特性的实践活动,实践活动內容将目录前面新项目标记拆换1张照片。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>应用list-style-image特性方法</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style-image: url(./img/001.png);
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
    </ul>
   
</body>
</html>

結果图

留意:照片相对路径1定要写在 url(./img/001.png); 括号之中,要不然不容易被3D渲染的,照片相对路径能够是相对性相对路径还可以肯定相对路径。

list-style特性

list-style 特性是( list-style-type 特性、 list-style-position 特性、 list-style-image 特性)的1个简写特性,它集成化了( list-style-type 特性、 list-style-position 特性、 list-style-image 特性)的作用。

让大家进到 list-style 特性实践活动,既然看到了这里想必园友都早已把握了本章的內容了。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>应用list-style特性方法</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 290px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style: none inside  url(./img/001.png) ;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
        <li>取得成功并不是击败他人,而是更改自身。</li>
    </ul>
   
</body>
</html>

結果图

留意: list-style 特性值能够也 1 个或 23 个,次序沒有规定,若有不搞清楚的园友能够做个案例看看就搞清楚了,学习培训就要多尝试不必偷懒呦。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。