Python自学第十五周（1）

Day15

 

position属性

 

position:fixed    -固定在某一个位置

 

position:absolute   -随滚轮滚动而动

 

position：relative   -固定在父类的某个位置与absolute结合使用

 

透明度属性：opacity:0.5

 

层级属性:z-index:数字；   -数字越大，优先级越高

 

 

 

 

 

固定在屏幕上某个位置，滚动滚轮也不会改变位置

 

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7     <meta charset="UTF-8">
 8 
 9     <title>Title</title>
10 
11 </head>
12 
13 <body>
14 
15     <div style="width: 50px;height: 50px;color: white;
16 
17     position: fixed;
18 
19     bottom: 20px;
20 
21     right: 20px">返回顶部</div>
22 
23     <div style="height: 5000px;</div>
24 
25 </body>
26 
27 </html>

 

 

 

 

 

 

 

  
 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7     <meta charset="UTF-8">
 8 
 9     <title>Title</title>
10 
11     <style>
12 
13         .head{
14 
15             height: 48px;
16 
17             background-color: darkseagreen;
18 
19             color: #dddddd;
20 
21             position: fixed;
22 
23             top: 0;
24 
25             left: 0;
26 
27             right:0;
28 
29         }
30 
31         .body{
32 
33             background-color: #dddddd;
34 
35             height: 5000px;
36 
37             margin-top: 50px;
38 
39         }
40 
41     </style>
42 
43 </head>
44 
45 <body>
46 
47     <div class="head">head</div>
48 
49     <div class="body">body</div>
50 
51 </body>
52 
53 </html>

 

 

 

 

 

 

 

 

 

固定在屏幕上某个位置，滚动滚轮随之滚动

 

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7     <meta charset="UTF-8">
 8 
 9     <title>Title</title>
10 
11 </head>
12 
13 <body>
14 
15     <div style="width: 50px;height: 50px;position: absolute;bottom: 0;right:0;"></div>
16 
17     <div style="height: 5000px;</div>
18 
19 </body>
20 
21 </html>

 

 

 

 

 

 

 

  
 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7     <meta charset="UTF-8">
 8 
 9     <title>Title</title>
10 
11 </head>
12 
13 <body>
14 
15     <div style="position: relative;width: 500px;height: 400px;border: 1px solid crimson;margin: 0 auto;">
16 
17         <div style="position: absolute;bottom: 0;left: 0;width: 50px;height: 50px"></div>
18 
19     </div>
20 
21 </body>
22 
23 </html>

 

 

 

 

 

 

position和z-index和opacity应用（实现三层）

 

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7     <meta charset="UTF-8">
 8 
 9     <title>Title</title>
10 
11 </head>
12 
13 <body>
14 
15     <div style="position: fixed;margin-left:-250px;margin-top: -200px;z-index:10;top: 50%;left: 50%;width: 500px;height: 400px;"></div>
16 
17     <div style="position: fixed;z-index:9;
18 
19     top: 0;
20 
21     bottom: 0;
22 
23     left: 0;
24 
25     right: 0;
26 
27     opacity: 0.5;"></div>
28 
29     <div style="height: 5000px;">asdfghjkl</div>
30 
31 </body>
32 
33 </html>

 

 

 

 

 

 

 

 

 

 

 

 

overflow

 

overflow: hidden    -隐藏

 

overflow: auto    -出现滚动条

 

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7     <meta charset="UTF-8">
 8 
 9     <title>Title</title>
10 
11 </head>
12 
13 <body>
14 
15     <div style="width: 300px;height: 400px;overflow: hidden">
16 
17         <img src="1.jpg">
18 
19     </div>
20 
21     <div style="width: 300px;height: 400px;overflow: auto">
22 
23         <img src="1.jpg">
24 
25     </div>
26 
27 </body>
28 
29 </html>

 

 

 

 

 

 

 

 

 

 

 

 

hover -停留上去会变颜色

 

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7     <meta charset="UTF-8">
 8 
 9     <title>Title</title>
10 
11     <style>
12 
13         .pg-header{
14 
15             position: fixed;
16 
17             right: 0;
18 
19             left:0;
20 
21             top:0;
22 
23             height: 48px;
24 
25             
26 
27             line-height: 48px;
28 
29         }
30 
31         .pg-body{
32 
33             margin-top: 50px;
34 
35         }
36 
37         .w{
38 
39             width:980px;
40 
41             margin:0 auto;
42 
43         }
44 
45         .pg-header .menu{
46 
47             display: inline-block;
48 
49             padding: 0 10px 0 10px;
50 
51             color: white;
52 
53         }
54 
55         .pg-header .menu:hover{
56 
57             background-color: blue;
58 
59         }
60 
61     </style>
62 
63 </head>
64 
65 <body>
66 
67     <div class="pg-header">
68 
69         <div class="w">
70 
71             <a class="menu">LOGO</a>
72 
73             <a class="menu">全部</a>
74 
75             <a class="menu">42区</a>
76 
77             <a class="menu">段子</a>
78 
79             <a class="menu">1024</a>
80 
81         </div>
82 
83     </div>
84 
85     <div class="pg-body">
86 
87         <div class="w">a</div>
88 
89     </div>
90 
91 </body>
92 
93 </html>

 

 

background

 

background-image:url('图片路径')   #默认div大图片重复

 

background-repeat:repeat-y;

 

background-position-x;

 

background-position-y;

 

background-position: 10px,10px;

 

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7     <meta charset="UTF-8">
 8 
 9     <title>Title</title>
10 
11 </head>
12 
13 <body>
14 
15     <div style="height: 100px;"></div>
16 
17     <div style="background-image: url(1.jpg);height: 200px;width: 500px;background-position: 0 -300px;background-repeat: no-repeat;"></div>
18 
19 </body>
20 
21 </html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted on 2019-08-17 13:53  早唞  阅读(77)  评论(0)    收藏  举报

导航