Python3学习笔记十三

2021-11-13 14:31:06

1. css

老师的博客：http://www.cnblogs.com/yuanchenqi/articles/6856399.html

选择器：找到想要改变的标签

css的功能：渲染和布局

2. css的四种引入方式

第一种：标签属性，这是利用了标签的style属性，控制标签的一些样式。这种方式不需要寻找标签，只会影响自己的属性。

语法如下：

　　例子：

<p style="background-color: #FF0000">我是谁</p>

第二种：在head标签添加style标签,利用选择器进行标签属性的设置。

　　　　　　selector {

　　　　　　　　　　key：value;

　　　　　　　　　　}

例子：

        p  {

            color: #FF0000;

            background-color: #BD8E00;

            font-size: 32px;

        }

        div {

             color: #BD8E00;

             background-color: #55A0E6;

             font-size: larger;

        }
  　　　　影响所有的p标签，影响所有的div标签。

　第三种：采用css文件引入的方式，把css文件放到其他地方去。这样多个html文件，都可以引用一个css。

　　在head标签中添加。

<link rel="stylesheet" href="常用css方式.css">

第四种：采用导入的方式，不常用，所以不需要具体研究，如果遇到，再进行研究。

3. 选择器的使用：

　　　基本选择器

　　基本选择器：

　　　　标签选择器：上面的第二种css方式，就是css的标签选择器的使用方法。

　　　　ID 选择器：

#who {

    color: black;

}

<div id="who">

    爱爱爱

</div>
ID是前面加#

　　　　class 选择器：

.name {

    color: #aaffaa;

}

<p class="name">我是杨建波</p>  
在标签里面定义好class的名称。
class是前面加.

　　　　* 选择器：通配选择器，找到所有的标签。

*{

    background-color: black;

}
所有的标签都会变，包括body标签

层级选择器

E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; }

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝

E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; }

E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; }

E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; }

注意，关于标签嵌套：

一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。

　　　　后代选择器 .c1 空格 .c3

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        .c1 p{

            color: #FF0000;

        }

    </style>

</head>

<body>

<div class="c1">

    <div class="c2">我是杨建波

        <p class="c3">哈哈哈</p>

    </div>

    <p>aaaaaa</p>

    <div class="c3">我是王艳和</div>

</div>

<div class="c3">

    我是股数为

</div>

</body>

</html>
.c1 的后代中的p标签。      .c1空格p{}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        .c1 .c3{

            color: #FF0000;

        }

    </style>

</head>

<body>

<div class="c1">

    <div class="c2">我是杨建波

        <p class="c3">哈哈哈</p>

    </div>

    <p>aaaaaa</p>

    <div class="c3">我是王艳和</div>

</div>

<div class="c3">

    我是股数为

</div>

</body>

</html>
.c1的后代c3都会受到影响。

　　　　子代选择器 .c1 > .c3

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        .c1>.c3{

            color: #FF0000;

        }

    </style>

</head>

<body>

<div class="c1">

    <div class="c2">我是杨建波

        <p class="c3">哈哈哈</p>

    </div>

    <p>aaaaaa</p>

    <div class="c3">我是王艳和</div>

</div>

<div class="c3">

    我是股数为

</div>

</body>

</html>
.c1>.c3   在c1的儿子找叫c3的标签

　　　　毗邻选择器：.c1+标签一定要跟c1紧挨着的标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        .c1 + p{

            color: red;

        }

    </style>

</head>

<body>

<div class="c1">

    <div class="c2">我是杨建波

        <p class="c3">哈哈哈</p>

    </div>

    <p>aaaaaa</p>

    <div class="c3">我是王艳和</div>

</div>

<p>aaaaa</p>

<div class="c3">

    我是股数为

</div>

</body>

</html>

　　　　兄弟选择器：.c1~标签只要是兄弟标签都会变

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        .c1 ~ div{

            color: red;

        }

    </style>

</head>

<body>

<div class="c1">

    <div class="c2">我是杨建波

        <p class="c3">哈哈哈</p>

    </div>

    <p>aaaaaa</p>

    <div class="c3">我是王艳和</div>

</div>

<p>aaaaa</p>

<div class="c3">

    我是股数为

</div>

</body>

</html>

　　多元素选择器：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        span.c3{

            color: red;

        }

    </style>

</head>

<body>

<span>11111</span>

<div class="c3">

    我是股数为

</div>

<span class="c3">22222</span>

</body>

</html>
span.c3 找到span标签，并且class为c3的标签      span要在c3的前面
. 表示且的关系。
如果表示或的关系，使用逗号表示。

　　标签有多个类，在标签属性里面，可以指定多个class.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        .c1 {

            color: red;

        }

        .c2{

            background-color: #E36E18;

        }

    </style>

</head>

<body>

<span>11111</span>

<div class="c3">

    我是股数为

</div>

<span class="c1 c2">22222</span>

</body>

</html>
定义class的时候，使用空格隔开类名。

4. 属性选择器

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。

比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素

div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}

如何找到自定义的属性？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        [egon='e']{

            color: red;

        }

    </style>

</head>

<body>

<div egon="egg">egg</div>

<span egon="egg">egg</span>

<div egon="alex">egg2</div>

<div alex="32">alex</div>

</body>

</html>

4. 伪类选择器

anchor伪类：专用于控制链接的显示效果

'''

        a:link（没有接触过的链接）,用于定义了链接的常规状态。

        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

        a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

        a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

        伪类选择器 : 伪类指的是标签的不同状态:

                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

        a:link {color: #FF0000} /* 未访问的链接 */

        a:visited {color: #00FF00} /* 已访问的链接 */

        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

'''

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        span {

            color: #FF0000;

        }

        span:hover{

            color: #55A0E6;

        }

    </style>

</head>

<body>

<span>hello world!</span>

</body>

</html>
一旦悬浮到span标签，就会执行hover后面的代码。

注：只有块级标签才能设置宽和高。　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        .c1:after{

            color: #FF0000;

            content: "中国人";

        }

    </style>

</head>

<body>

<div class="c1">

    aaaaa

</div>

</body>

</html>
使用css添加字符。而不需要在body里面添加标签。

　　例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

       .top{

           background-color: rebeccapurple;

           width: 100px;

           height: 100px;

       }

        .bottom{

            background-color: green;

            width: 100px;

            height: 100px;

        }

        .outer:hover .bottom{

            background-color: yellow;

        }

        /*注意:一定是outer:hover  控制outer里某一个标签,否则无效*/

        .top:hover .bottom{

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="outer">

    <div class="top">top</div>

    <div class="bottom">bottom</div>

</div>

</body>

</html>

before after伪类

 :before    p:before       在每个<p>元素之前插入内容

 :after     p:after        在每个<p>元素之后插入内容     

例：p:before{content:"hello";color:red;display: block;}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        span{

            color: royalblue;

            width: 300px;

            height: 300px;

            background-color: lightslategrey;

        }

        span:hover{

            color: red;

        }

        .s1,.s2{

            width: 100px;

            height: 100px;

        }

        .s1{

            background-color: grey;

        }

        .s2{

            background-color: rosybrown;

        }

        .outer{

            border: 1px solid red;

        }

        .outer:hover .s1{

            background-color: royalblue;

        }

        .outer:before{

            content: "hello world";

            color: red;

        }

    </style>

</head>

<body>

<span>hello world</span>

<hr>

<div class="outer">

    <div class="s1"></div>

    <div class="s2"></div>

</div>

</body>

</html>

5. 选择器的优先级

　　　　脱离规则： color: #BD8E00; !important; 使用!important;

　　　　标签属性 1000

　　 id 100

　　　　class 10

　　　　标签 1

　　　　当有ID选择器的时候，不会跟class选择器和标签进行比较。

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        .p1{

            color: #FF0000;

        }

        #p1{

            color: #55A0E6;

        }

        p{

            color: #BD8E00;

        }

    </style>

</head>

<body>

<p class="p1" id="p1">this is P</p>

</body>

</html>

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        /*.p1{*/

            /*color: lightslategrey;*/

        /*}*/

        /*#p1{*/

            /*color: darkblue;*/

        /*}*/

        /*p{*/

            /*color: goldenrod;*/

        /*}*/

        /*##########优先级#############*/

       /*.c2 p{*/

           /*color: red;*/

       /*}*/

       /*.c1 .c2 .c3 p{*/

           /*color: goldenrod;*/

       /*}*/

      /*.c1 .c2 .c3 .c4{*/

          /*color: palevioletred;*/

      /*}*/

      /*.c4{*/

          /*color: saddlebrown!important;*/

      /*}*/

     /*###############与字体相关的样式：继承##################*/

         .outer {

             color: green;

         }

        body{

            font-size: 16px;

            color: red;

        }

    </style>

</head>

<body>

<p class="p1" id="p1">this is P</p>

<div class="c1">

    <div class="c2">

        <div class="c3">

            <p class="c4" id="d1" style="color: green">P2</p>

        </div>

    </div>

    <p>P1</p>

</div>

<hr>

<div class="outer">

    <p>PPP</p>

    <span>span</span>

</div>

</body>

</html>

6. 继承父类(与字体相关的样式)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        body{

            background-color: #BD8E00;

        }

        p{

            background-color: #FF0000;

        }

    </style>

</head>

<body>

<p class="p1" id="p1">this is P</p>

</body>

</html>
子孙按照父类的设置进行继承。

7.　 css属性

　　　文本属性操作：

　　　　　color: 三种方式：(十六进制 RGB 颜色的英文单词

text-align 属性规定元素中的文本的水平对齐方式。

- - left 把文本排列到左边。默认值：由浏览器决定。
  - right 把文本排列到右边。
  - center 把文本排列到中间。
  - justify 实现两端对齐文本效果。

　　　　　注意：line-height: 200px; 让这个值等于行高。

例子：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css</title>

<style>

        h2 {text-align:center;}

        p.publish_time {text-align:right;}

        p.content {text-align:justify;}

</style>

</head>

<body>

<h1>CSS text-align 水平居中</h1>

<p class="publish_time">2017 年 5 月 17 号</p>

<p class="content">

    有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时，

    跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。”

    几天后，他又垂头丧气回到教堂，同样跪着祈祷：“上帝啊，为何不让我中彩票？我愿意更谦卑地来

    服侍你，求您让我中一次彩票吧！阿门。”又过了几天，他再次出现在教堂，同样重复他的祈祷。如此周而

    复始，不间断地祈求着。到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！

    只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声

    音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p>

<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>

</body>

</html>

　　其他操作：

/*

font-size: 10px;    文字大小

line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px;      首行缩进150px

letter-spacing: 10px;  字母间距

word-spacing: 20px;  单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

*/

a标签默认有一个字体和颜色。

背景属性

属性介绍

background-color
background-image
background-repeat
background-position

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;

简写

1	`background:#ffffff url('1.png') no-repeat right top;`

边框属性操作：

            border-color: #FF0000;  
　　　　　　　border-radius: 50%;     边框的弧度   

            border-width: 1px;      边框的宽度
            border-style: solid;    边框的样式

　　　　　　　也可以用一句话：border: 1px solid red;

边框-单独设置各边

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:none;

列表属性

常用的是： list-style: none

　　　　　　例子：　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="常用css方式.css">-->
    <style>
        ul{
            list-style: none;
            padding: 0;
        }

    </style>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
</body>
</html>

list-style-type 设置列表项标志的类型。

list-style-image 将图象设置为列表项标志。

list-style-position 设置列表中列表项标志的位置。

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中

ist-style-type属性指定列表项标记的类型：

1	`ul {` `list-style-type: square; }`

使用图像来替换列表项的标记:

ul {

list-style-image: url('');

}

dispaly属性

none
block
inline
inline-block

none(隐藏某标签)

1	`p{display:none;}`

注意与visibility:hidden的区别：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

`block(内联标签设置为块级标签)`

1	`span {display:block;}`

注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。　

`inline(块级标签设置为内联标签)`

1	`li {display:inline;}`

inline-block

选择内联标签的属性：按内容占空间

选择块级标签的属性：可以设置长宽

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：

#outer{

border: 3px dashed;

word-spacing: -5px;

}

例子一:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        span{

            background-color: lightslategrey;

            width: 200px;

            height: 200px;

            /*将标签声明为块级标签*/

            display: block;

        }

          .c1{

            background-color: greenyellow;

            width: 200px;

            height: 200px;

              /*将标签声明为内联标签*/

            display: none;

              /*visibility: hidden;*/

        }

         .c2{

            background-color: firebrick;

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

<span>span</span>

<div class="c1">DIV1</div>

<div class="c2">DIV2</div>

</body>

</html>

例子二：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .c1,.c2,.c3{

            width: 100px;

            height: 100px;

            display: inline-block;

            margin-left: -6px;

        }

        .c1{

            background-color: #EE4000;

        }

        .c2{

            background-color: green;

        }

        .c3{

            background-color: lightslategrey;

        }

    </style>

</head>

<body>

<span class="c1">1</span>

<span class="c2">2</span>

<span class="c3">3</span>

</body>

</html>

8. 内边距和外边距

　　　　　内边距：padding 内容与边框的距离

　　　　　 padding 一个值四周都加边距

　　　　　 padding 两个值上下左右

　　 padding 四个值上右下左

　　　　　 padding 三个值上左右下

　　　　　　外边距控制元素与元素之间的距离

　　　　　　margin

　　　　　　margin-bottom 上下取最大的值

　　　　　　margin-top 上下取最大的值

　　　　　　margin-left 左右是相加

　　　　　　margin-right 左右是相加

margin:10px 20px 20px 10px；

        上边距为10px

        右边距为20px

        下边距为20px

        左边距为10px

margin:10px 20px 10px;

        上边距为10px

        左右边距为20px

        下边距为10px

margin:10px 20px;

        上下边距为10px

        左右边距为20px

margin:25px;

        所有的4个边距都是25px

　　　　　　body也有外边距

　　　　　　取消body的外边距

     body{

            border-width: 1px;

            border-style: solid;

            margin: 0;

        }

　　例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        body{

            margin: 0;

        }

        .c1{

             width: 100%;

             height: 40px;

             background-color: brown;

             /*padding: 50px 100px;  #上下*/

        }

          .c2{

             width: 70%;

             height: 40px;

             background-color: cornflowerblue;

             /*padding: 50px 100px;  #上下*/

             margin: 0 auto;

        }

    </style>

</head>

<body>

<div class="c1"><div class="c2">bbbbb</div></div>

</body>

</html>

　　　　　　overflow: hidden; 内容溢出隐藏。

9. 背景图片

　　引入图片：background-image: url("IMG_5422.jpg"); 以图片进行填充

　　引入图片但是不填充：background-repeat: no-repeat;

　　设置背景图片的位置：background-position: center;

　　　background-position: 100px 200px; 离左边100px, 离上边200px

　　简写的方法：background: url("IMG_5422.jpg") no-repeat center brown;

取图片的一部分

　　　移动背景图片: 利用浏览器进行调整。

10. 　 css属性操作之定位position.

　　 position: fixed 以可视窗口为参照物完全脱离文档流

　　　例子：定位到右下角

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<link rel="stylesheet" href="常用css方式.css">-->

    <style>

        body{

            margin: 0;

        }

        .c1{

             width: 100%;

             height: 1200px;

             background-color: grey;

             /*background-image: url("IMG_5422.jpg");*/

             /*background-repeat: no-repeat;*/

             /*!*background-position: center;*!*/

             /*background-position: 100px 200px;*/

                          /*padding: 50px 100px;  #上下*/

             /*background: url("IMG_5422.jpg") no-repeat center brown;*/

        }

        .btn{

            width: 60px;

            height: 50px;

            background-color: #FF0000;

            text-align: center;

            line-height: 20px;

            color: white;

            position: fixed;

            right: 0;

            bottom: 0;

        }

          .

   </style>

</head>

<body>

<div class="c1"></div>

<div class="btn">返回顶部</div>

</body>

</html>

　　　　position:relative 相对定位以自己原来的位置为参照物不脱离文档流

　　　　position:absolute 绝对定位脱离文档流以最近的已定位的祖先元素，如果没有已定位的祖先元素，就以body为参照物。祖先元素里面有position。

11. positon应用

　　京东轮播图　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            border: solid 1px lightgreen;

            width: 590px;

            height: 340px;

            position: relative ;

            margin: 100px auto;

        }

          ul.c2{

           list-style: none;

            padding: 0 ;

        }

           ul li{

               position: absolute;

               left: 0;

               top: 0;

           }

    </style>

</head>

<body>

<div class="c1">

    <ul class="c2">

        <li><img src="1.jpg" alt=""></li>

        <li><img src="2.jpg" alt=""></li>

        <li><img src="3.jpg" alt=""></li>

    </ul>

</div>

</body>

</html>

码农公寓

基本选择器

如何找到自定义的属性？

anchor伪类：专用于控制链接的显示效果

before after伪类

背景属性

属性介绍

简写

边框-单独设置各边

列表属性

dispaly属性

none(隐藏某标签)

block(内联标签设置为块级标签)

inline(块级标签设置为内联标签)

inline-block

相关文章

　　　基本选择器

`block(内联标签设置为块级标签)`

`inline(块级标签设置为内联标签)`