4、列表属性

作者: calvinbj | 来源:发表于2019-02-23 16:37 被阅读0次

4、列表属性
PHP从入门到精通，022第三章CSS之CSS基本属性——列表属
2018-09-19 css核心属性
MySql（八）列表增改删
IOS~FMDB数据库管理的那些坑-入门级
ios中runtime 笔记
Day03_CSS属性组成和作用
03-CSS核心属性
消息转发机制
关于数据持久化的一些总结（摘录）

列表属性实例1(list-style-type:circle/disc/square/none)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
      .u1 li{list-style-type: circle;}
     </style>
</head>
<body>
    <ul class="u1">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>       
</body>
</html>

效果如下，circle属性是空心圆。

列表属性实例2(list-style-image:url（）；）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
      .u1 li{list-style-type: circle;}
      .u2 li{list-style-image: url(images/3.jpg);}
    </style>
</head>
<body>
    <ul class="u1">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>   
    <ul class="u2">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>   
</body>
</html>

效果如下，用图片作为列表属性。

列表属性实例3(list-style-positi:outside/inside；）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .u1 li{list-style-type: circle;}
    .u2 li{list-style-image: url(images/3.jpg);}
    .u3{border: 1px #000 solid;}
    .u3 li{border: 1px #f00 solid;list-style-position: outside;}
    </style>
</head>
<body>
    <ul class="u1">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>   
    <ul class="u2">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>   
    <ul class="u3">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>   
</body>
</html>

效果如下，默认效果为outside，如图。

效果如下，将默认效果改为inside，如图。

.u3 li{border: 1px #f00 solid;list-style-position: inside;}

列表属性实例4(list-style:none；)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .u1 li{list-style-type: circle;}
    .u2 li{list-style-image: url(images/3.jpg);}
    .u3{border: 1px #000 solid;}
    .u3 li{border: 1px #f00 solid;list-style-position: inside;}
    .u4{list-style: none;}
    </style>
</head>
<body>
    <ul class="u1">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>   
    <ul class="u2">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>   
    <ul class="u3">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>   
    <ul class="u4">
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
        <li>年轻岁月，如梦般展现在他面前</li>
    </ul>   
</body>
</html>

第三节背景属性

定义背景图片是位置。

也可以写数值，比如59px。（正负值都允许）

background-position:right bottom;  //背景图片置于右下角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box1{width: 500px;height: 500px;border: 5px #000 solid;background-color: #f00;background-image: url(images/1.jpg);margin-bottom: 20px;}
    
    .box2{width: 800px;height: 500px;border: 5px #ff0 solid;background-color: #f00;margin-bottom: 20px;}
    .box3{width: 240px;height: 240px;background: #fbfbfb url(images/1.jpg) no-repeat right bottom;}
    </style>
</head>
<body>
    <div class="box1">
        <img src="images/2.jpg" alt=""/>
        <h1>北京天安门</h1>
    </div>
    <div class="box2">
        <img src="images/1.jpg" alt=""/>
        <h1>北京天安门</h1>
    </div>
    <div class="box3">
    </div>
</body>
</html>