Zephon Blog
0%

第四天CSS

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

第四天

media query

在不同的屏幕宽度下有不同的对应的css，从而有不同的显示效果

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>media query</title>
    <style>
        #box{
            height: 100px;
            background-color: #000;
        }
        /* max-width从大写到小，min-width从小写到大，也可以同时给定min-width和max-width */
        @media screen and (max-width:1000px) {/* max-width:最大宽度,min-width：最小宽度 */
            #box{
                background-color: green;
            }
            #box h2{
                color: #fff;
            }
        }
        @media screen and (max-width:600px) {
            #box{
                background-color: blue;
            }
            #box h2{
                color: yellow;
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>box中的标题</h2>
    </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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!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>移动端自适应</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        nav{
            display: flex;
            flex-wrap: wrap;
        }
        nav a{
            width: 25%;
            line-height: 30px;
            font-size: 14px;
            background-color: #c00;
            color: #fff;
            text-align: center;

            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            box-sizing: border-box;/* 改变width的含义，width由内容的宽度变为包括padding和border和内容的宽度之和 */
        }
        nav a:hover{
            background-color: #036;
        }

        /* 图片自适应 */
        /* 缺点：只能完成一行图片的显示 */
        ul,p{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        img{
            border: none;
            display: block;
        }
        .mlist{
            display: flex;
            padding: 0 10px;
        }
        .mlist>li{
            width: 86vw;/* 不换行时，可以利用flex的特性设置距离，将li的宽度设为大于三分之一 */
            margin-left: 2px;
        }
        .mlist>li img{
            width: 100%;
        }
        .mlist>li p{
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            text-overflow: ellipsis;/* 多余文字变成 ... */
        }

        /* 广泛性自适应 */
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .zlist{
            overflow: auto;
        }
        .zlist>li{
            width: 25%;
            line-height: 30px;
            float: left;
        }
        .title{
            margin-left: 10px;
            margin-top: 10px;
            background-color: #ccc;
            text-align: center;
        }
        .title a{
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- 长度单位：px、% 、vw、vh、rem-->
    <!-- %是指父元素的百分比，vw、vh是屏幕的百分比 -->
    <nav>
         <a href="#">导航</a>
         <a href="#">导航</a>
         <a href="#">导航</a>
         <a href="#">导航</a>
         <a href="#">导航</a>
         <a href="#">导航</a>
         <a href="#">导航</a>
         <a href="#">导航</a>
    </nav>

    <!-- 图片自适应 -->
     <!-- 缺点：只能完成一行图片的显示  -->
    <main>
        <ul class="mlist">
            <li>
                <a href="#">
                    <img src="../Day1/2.png" alt="">
                    <p>这里是文字</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../Day1/2.png" alt="">
                    <p>这里是文字</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../Day1/2.png" alt="">
                    <p>这里是文字</p>
                </a>
            </li>
        </ul>
    </main>

    <!-- 具有广泛性的自适应 -->
    <section>
        <ul class="zlist">
            <li>
                <div class="title"><a href="#">自适应宽度</a></div>
            </li>
            <li>
                <div class="title"><a href="#">自适应宽度</a></div>
            </li>
            <li>
                <div class="title"><a href="#">自适应宽度</a></div>
            </li>
            <li>
                <div class="title"><a href="#">自适应宽度</a></div>
            </li>
            <li>
                <div class="title"><a href="#">自适应宽度</a></div>
            </li>
            <li>
                <div class="title"><a href="#">自适应宽度</a></div>
            </li>
            <li>
                <div class="title"><a href="#">自适应宽度</a></div>
            </li>
            <li>
                <div class="title"><a href="#">自适应宽度</a></div>
            </li>
        </ul>
    </section>
</body>
</html>

rem

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
<!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>文字大小自适应</title>
    <style>
        /* 基于视口宽度的rem */
        /* html{
            font-size: 5.6vw;
        }
        #box{
            font-size: 0.3rem;
            border: 1px solid #c00;
            padding: 0.5rem 1rem 1rem 1rem;
        } */
        /* 基于media query的rem */
        html {
            font-size: 60px;
        }

        @media screen and (max-width:1200px) {
            html {
                font-size: 56px;
            }
        }

        @media screen and (max-width:800px) {
            html {
                font-size: 48px;
            }
        }

        @media screen and (max-width:480px) {
            html {
                font-size: 28px;
            }
        }

        body {
            padding: 0;
            margin: 0;
            min-width: 320px;
        }

        ul,
        p {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        img {
            display: block;
            border: none;
        }

        .rlist {
            display: flex;
        }

        .rlist>li {
            width: 33%;
            padding: 0.2rem;
            box-sizing: border-box;
        }

        .rlist>li img {
            width: 100%;
            margin-top: 0.1rem;
        }
        .rlist>li p{
            font-size: 0.4rem;
            line-height: 150%;
            text-align: center;
            color: #c00;
        }
    </style>
</head>

<body>
    <!-- 使用rem -->
    <!-- rem是一个长度单位，是根元素的字体大小 -->
    <!-- rem的实现方法 -->
    <!-- 1.视口宽度的百分比：javascript,vw -->
    <!-- 2.基于media query的离散固定值：media query -->
    <!-- 3.基于media query的表达式：js、cacl(5vw+3px+5%)，连续值 -->
    <div id="box">
        rem的移动解决方案
    </div>

    <!-- 基于media query的上图下文 -->
    <ul class="rlist">
        <li>
            <a href="#"><img src="../Day1/2.png" alt=""></a>
            <p>这里是标题</p>
        </li>
        <li>
            <a href="#"><img src="../Day1/2.png" alt=""></a>
            <p>这里是标题</p>
        </li>
        <li>
            <a href="#"><img src="../Day1/2.png" alt=""></a>
            <p>这里是标题</p>
        </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
<!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>文字相关属性</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            /* 单词自动换行 */
            /* word-break: break-all;  */
            line-height: 30px;

            overflow: hidden;
            text-overflow: ellipsis;/* 文字溢出部分为省略号 */
        }
    </style>
</head>
<body>
   <div id="box">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</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
66
67
68
69
70
71
72
73
74
75
<!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>form基本设计</title>
    <style>
        form,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #form li{
            overflow: auto;

            border-bottom: 1px solid #ccc;
            width: 360px;
        }
        #form li label{
            float: left;
            line-height: 30px;
            width: 70px;
        }
        .input{
            width: 290px;
            height: 20px;
            margin-top: 4px;
            float: left;

            border: none; /* 去除边框 */
            outline: none;
        }
        .error{
            width: 200px;
            float: left;
            padding-left: 10px;
            font-size: 12px;
            font-weight: bold;
            color: #f00;
            line-height: 30px;
            display: none;
        }
        #form li:nth-child(3){
            border: none;
        }

    </style>
</head>

<body>
    <form action="" id="form" name="form" method="POST">
        <ul>
            <li>
                <label for="user">用户名：</label><!-- 当被点击时，for的标签获得焦点 -->
                <input type="text" name="user" id="user" class="input">
                <span class="error">用户名输入错误!</span>
            </li>
            <li>

                <label for="pwd">密码：</label>
                <input type="password" name="pwd" id="pwd" class="input">
                <span class="error">密码输入错误！</span>
            </li>
            <li>
                <input type="submit" value="提交">
            </li>
        </ul>
    </form>
</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
<!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>file</title>
    <style>
        #file{
            width: 50px;
            height: 50px;
            position: relative;
            overflow: hidden;
        }
        #file input,#img{
            opacity: 0;/* 透明实现既看不见，又能响应事件 */
            position: absolute;
            z-index: 3;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
        }
        #img{
            opacity: 1;
            z-index: 2;
            border-radius: 50%;
            background:linear-gradient(#000,#ccc);
            /* box-shadow: 5px 5px 5px #ccc; */
            color: #fff;
            padding: 6px;
            box-sizing: border-box;
            text-align: center;
            line-height: 38px;
        }
    </style>
</head>
<body>
    <!-- 图片按钮 -->
    <div id="file">
            <input type="file" name="" id="" multiple="multiple" accept="image/jpeg,image/gif">
            <div id="img">浏览</div>
    </div>
</body>
</html>

h5表单

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 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>h5-form</title>
</head>
<body>
    <form action="" autocomplete="on">
        <input type="email" name="" id="" placeholder="email please">
        <input type="number" name="" id="">
        <input type="range" name="" id="" min="1" max="100">
        <input type="color" name="" id="">
        <input type="date" name="" id="">
        <input type="url" name="" id="" required="required"><!-- required要求必须输入 -->
        <input type="search" name="" list="list" autofocus="autofocus"><!-- autofocus自动获得焦点 -->
        <datalist id="list">
            <option value="南昌">1</option>
            <option value="大连">2</option>
            <option value="济南">3</option>
            <option value="西安">4</option>
        </datalist>
        <input type="text" name="" id="" pattern="[a-z]">
        <input type="submit" formaction="http://www.baidu.com">
    </form>
</body>
</html>