Zephon Blog
0%

第三天CSS3

发表于 更新于 分类于
本文字数： 11k 阅读时长 ≈ 10 分钟

第三天

CSS3

css3选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{/* *通配符，尽量避免使用 */
            padding: 0;
            margin: 0;
        }
        div{
            width: 150px;
            height: 150px;
            float: left;
            margin: 6px;
            border: 1px solid #c00;
            text-align: center;
            line-height: 75px;
        }
        h2{
            clear:both;
        }
        .box:nth-child(2){ /* 是.box 并且 是第二个子元素 ，此处是1*/
            font-size: 75px;
            line-height: 150px;
        }
        div:nth-of-type(7){ /* 父元素里的第七个div */
            color: red;
        }
        .box2:last-child{ /* 既是.box又是最后一个子元素 */
            border-color: blue;
        }
        h2:first-child{ /* 是h2并且是第一个子元素 */
            color:green;
        }
        div:last-of-type{ /* 最后一个div */
            color: blue;
            font-size: 50px;
        }
        div:nth-child(odd){ /* odd 奇数，even 偶数,是div并且是第奇数个子元素 */
            border-style: dashed;
        }
        div:nth-child(3n+1){/* 是div，并且是第3n+1个子元素，n从0开始*/
            border-style: dotted;
        }
        .box+.box{  /* .box后面的一个.box，相邻兄弟选择器 */
            background-color: #ccc;
        }
        h2+div{ /* h2后面的一个div */
            border-radius: 10px; /* 圆角矩形 */
        }
        div~.box2{/* div后面的所有.box2 */
            border-radius: 20px;
        }
        h2::first-letter{ /* h2的第一个字母(汉字) 类似的first-line：第一行 */
            font-size:100px;
        }
        div[class~=box]{ /* 所有class=box的div class^=box 所有div具有class属性，属性值以box开关 $=以结束 ^=以开始 ~=属性值中带空格 class常用这种写法*/
            border-width: 3px;
            box-sizing: border-box;
        }
        .box::after{/* 在.box内部的最后*/
            content:"=";/* content表示内容 */
            color: aqua;
            font-size: 12px;
        }
        .box::before{
            content:"before";
            color: pink;
            font-size:12px;
        }
    </style>
</head>
<body>
    <h2>css3选择器</h2>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <h2>css3选择器</h2>
    <div class="box2">1</div>
    <div class="box2">2</div>
    <div class="box2">3</div>
    <div class="box2">4</div>
    <div class="box2">5</div>
    <div class="box2">6</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ul</title>
    <style>
        *{padding: 0;margin: 0;}
        a{
            text-decoration: none;
        }
        ul#list{    /* 交集选择器，既是ul又是#list */
            border:1px solid #ccc;
            padding: 10px;
            overflow: auto;
        }
        #list>li>a{ /* >表示子元素, 空格表示后代元素(可能是孙子元素) */
            color: red;
            font-weight: bold;
        }
        #list>li>ul a{
            color: green;
        }
        #list>li ul li:nth-child(1){ /* 找到所有二级列表中的第一个 */
            font-weight: bold;
        }
        #list>li ul li+li{
            border: 1px solid #ccc;
        }

        /* 实现下拉菜单 */
        #list ul{
            display: none;
        }
        #list>li:hover ul{
            display: block;
        }
        #list>li{
            width: 150px;
            float: left;
        }
    </style>
</head>

<body>
    <ul id="list">
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a>
            <ul>
                <li><a href="#">国内新闻</a></li>
                <li><a href="#">国际新闻</a></li>
                <li><a href="#">本地新闻</a></li>
                <li><a href="#">焦点新闻</a></li>
            </ul>
        </li>
        <li><a href="#">娱乐</a>
            <ul>
                <li><a href="#">国内娱乐</a></li>
                <li><a href="#">国际娱乐</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>

图片效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>instance1</title>
    <style>
        ul,p,h3{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration: none;
        }
        img{
            border: none;
            display: block;
        }
        .trlist{
            width: 1200px;
        }
        .trlist li{
            width: 300px;
            height: 150px;
            overflow: hidden;/* 溢出隐藏 */
            float: left;
            margin: 8px;
            position: relative;
        }
        .trlist img{
            transition: all 0.8s ease-in-out;
            width: 300px;
            height: 150px;
        }
        .trtext{
            position: absolute;
            width: 100%;
            height: 35px;
            background-color: rgba(0,0,0,0.5);
            left: 0;
            bottom: 0;
            color: #fff;
            transition: all 1.3s;
        }
        .trtext h3{
            height: 35px;
            text-align: center;
            font-size: 14px;
            line-height: 35px;
        }
        .trtext p{
            font-size: 12px;
            line-height: 20px;
            text-indent: 2em;
            padding: 0 5px;
            height: 40px;
        }
        .trlist li:hover img{
            transform:scale(1.6)
        }
        .trlist li:hover .trtext{
            /* height: 75px; */
            height: 150px;
            background-color: rgba(0,51,156,0.4);
        }
    </style>
</head>
<body>
    <ul class="trlist">
        <li><a href="#">
            <img src="../Day1/2.png">
        </a>
        <div class="trtext">
            <h3>这里是标题</h3>
            <p>这里是文字</p>
        </div>
    </li>
    <li><a href="#">
            <img src="../Day1/2.png">
        </a>
        <div class="trtext">
            <h3>这里是标题</h3>
            <p>这里是文字</p>
        </div>
    </li>
    <li><a href="#">
            <img src="../Day1/2.png">
        </a>
        <div class="trtext">
            <h3>这里是标题</h3>
            <p>这里是文字</p>
        </div>
    </li>
    <li><a href="#">
            <img src="../Day1/2.png">
        </a>
        <div class="trtext">
            <h3>这里是标题</h3>
            <p>这里是文字</p>
        </div>
    </li>
    <li><a href="#">
            <img src="../Day1/2.png">
        </a>
        <div class="trtext">
            <h3>这里是标题</h3>
            <p>这里是文字</p>
        </div>
    </li>
    <li><a href="#">
            <img src="../Day1/2.png">
        </a>
        <div class="trtext">
            <h3>这里是标题</h3>
            <p>这里是文字</p>
        </div>
    </li>
    </ul>
</body>
</html>

animation动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        #box{
           height: 100px; 
           background-color: #000;
           animation: dh 5s infinite;
        }
        /* 建议关键帧各帧的css属性相同 */
        @keyframes dh{
            20%{background-color: #f00;}
            50%{background-color: #f0f;}
            80%{background-color: #00f;}
            100%{background-color: #000;}
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

animation实现幻灯片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>css animation slide</title>
    <style>
        body,ul,p{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        img{
            border: none;
            display: block;
        }
        .slide{
            overflow: hidden;
        }
        .slide>ul{
            width: 500%;
            overflow: auto;
            animation: dh 10s infinite;
        }
        .slide>ul>li{
            width: 20%;
            float: left;
            position: relative;
        }
        .slide>ul>li img{
            width: 100%;
        }
        .slide>ul>li p{
            height: 35px;
            width: 100%;
            background-color: rgba(0,0,0,.5);
            text-align: center;
            position: absolute;
            color: #fff;
            font-size: 14px;
            bottom: 0;
            left: 0;
            line-height: 35px;
        }
        @keyframes dh{
            10%{margin-left: 0;}
            20%{margin-left: -100%;}
            30%{margin-left: -100%;}
            40%{margin-left: -200%;}
            50%{margin-left: -200%;}
            60%{margin-left: -300%;}
            70%{margin-left: -300%;}
            80%{margin-left: -400%;}
            90%{margin-left: -400%;}
            100%{margin-left: 0;}
        }

    </style>
</head>

<body>
    <div class="slide">
        <ul>
            <li>
                <a href="#">
                    <img src="../Day1/2.png">
                    <p>这里是文字</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../Day1/2.png">
                    <p>这里是文字</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../Day1/2.png">
                    <p>这里是文字</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../Day1/2.png">
                    <p>这里是文字</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../Day1/2.png">
                    <p>这里是文字</p>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        .flex{
            display: flex;/* flex的子元素(项目)在一行里显示 */
            /* flex-direction: row-reverse; */
            /* flex-wrap: wrap; */
            /* justify-content: space-around; */
            align-items: center;
        }
        .flex>li{
            list-style: none;
            width: 200px;
            height: 100px;
            border: 1px solid #c00;
        }
        .flex>li:nth-child(2){
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            order: 3;
            flex-grow: 2;
        }
        .flex>li:nth-child(2) div{
            border: 1px solid #c00;
            width: 30%;
            height: 30%;
        }
        /* order:必须写在子元素上，先显示没有order属性的，然后按照order属性从小到大进行显示 */
        /* flex-grow:如果所有子元素的宽度和小于100%，则将剩余的空间按照flex-grow的比例分布 */
        .flex>li:last-child{
            order: 2;
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <ul class="flex">
        <li>1</li>
        <li><div>2</div></li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .table{
            display: table;
        }
        .table>div{
            width: 200px;
            height: 200px;
            border: 1px solid #c00;
            display: table-cell;/* 单元格td th */
        }
        /* 多列高度自适应才必须设置父元素display为table，只设置水平垂直居中时，不需要设置display为table，只设置自己的display为table-cell即可 */
        .table .tc1{
            height: 400px;
            /* 水平垂直居中 */
            text-align: center;
            vertical-align: middle;
        }
        .tc1>div{
            width: 20%;
            height: 30%;
            margin: 0 auto;
            background-color: #999;
        }
    </style>
</head>
<body>
   <div class="table">
       <div class="tc1"><div>1</div></div>
       <div class="tc2">2</div>
       <div class="tc3">3</div>
   </div> 
</body>
</html>

h5新标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html5</title>
</head>
<body>
    <!-- 都相当于div，只是增加了语义 -->
    <header id="head"></header>
    <nav id="nav"></nav>
    <section></section>
    <main></main>
    <aside></aside>

    <article></article>
    <footer id="footer"></footer>
</body>
</html>