zoukankan html css js c++ java

CSS中position和header和overflow和background

 1 <!DOCTYPE html>
 2 <!--CSS中position属性-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .pg-header{
 9                 height: 50px;
10                 background-color: black;
11                 color: #dddddd;
12                 position: fixed;
13                 top:0;
14                 right: 0;
15                 left: 0;
16                     }
17         .pg-body{
18                 background-color: #dddddd;
19                 height: 200px;
20                 margin-top: 100px;
21                  }
22     </style>
23 
24 </head>
25 <body>
26 
27     <div class="pg-header">头部   position: fixed;分层固定中页面某个位置</div>
28     <div class="pg-body">内容   margin-top: 100px   离顶部100像素</div>
29 
30 
31     <div style=" 40px;
32                 height:40px;
33                 background-color:red;
34                 color:green;
35                 position: fixed;
36                 bottom:100px;
37                 right: 100px;
38                 ">
39                 -返回顶部
40     </div>
41     <div style="position: relative; 500px;height: 500px;border: 5px solid red;margin:0 auto;">
42 
43          父级position: relative配合子级position: absolute使用才有效果
44 
45         <div style="position: absolute;left: 100px;bottom: 200px; 150px;height: 20px;background-color:gold; ">
46             以父级的位置做为起始点来偏移位置left加bottom，-------块的大小;width加height，---------块的颜色background-color
47         </div>
48     </div>
49 
50     <br/>
51     <br/>
52 
53     <div style="position: relative; 500px;height: 500px;border: 5px solid red;margin:0 auto;">
54         <div style="position: absolute;left: 0px;bottom: 0px; 50px;height: 50px;background-color:green; "></div>
55     </div>
56 
57 
58 
59 </body>
60 </html>

CSS中position属性

 1 <!DOCTYPE html>
 2 <!--CSS中position多层背景-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div style="  <!--display: none;-->
10                 z-index:10;
11                 position: fixed;
12                 top:50%;
13                 left: 50%;
14                 margin-left:-250px;
15                 margin-top:-250px;
16                 background-color: white;
17                 height:400px;
18                  500px;
19                 ">
20                <!--注释--> display: none;让标签消失      z-index层级的顺序
21         <input type="text"/>
22         <input type="text"/>
23         <input type="text"/>
24     </div>
25 
26     <div style="<!--display: none;-->
27                 z-index:9;
28                 position: fixed;
29                 background-color: white;
30                 top: 0;
31                 bottom: 0;
32                 right: 0;
33                 left: 0;
34                 opacity: 0.5;
35                 ">
36                  <!--注释-->  display: none;让标签消失    opacity: 0.5控制透明度
37     </div>
38     <div style="height: 5000px;
39                 background-color: green;
40                 ">
41                 内容显示层
42     </div>
43 
44 
45 </body>
46 </html>

CSS中position多层背景

 1 <!DOCTYPE html>
 2 <!--CSS中header应用-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .pg-header{
 9             position: fixed;
10             right: 0;
11             left: 0;
12             top: 0;
13             height: 48px;
14             background-color: #2459a2;
15             line-height: 48px;
16                      }
17         .pg-body{
18             margin-top: 50px;
19         }
20         .w{
21             width: 980px;
22             margin: 0 auto;
23            }
24         .pg-header .menu{
25             display: inline-block;
26             padding: 0 10px 0 10px;
27             color: white;
28                             }
29 
30         /*hover当鼠标移动到当前标签时，以下CSS属性才生效*/
31         .pg-header .menu:hover{
32             background-color: #E80203;
33                                 }
34     </style>
35 </head>
36 <body>
37     <div class="pg-header">
38         <div class="w">
39             <a class="logo">LOGO</a>
40             <a class="menu">全部</a>
41             <a class="menu">42区</a>
42             <a class="menu">段子</a>
43             <a class="menu">1024</a>
44         </div>
45     </div>
46     <div class="pg-body">
47         <div class="w">  其他内容  </div>
48     </div>
49 </body>
50 </html>

CSS中header应用

1.jpg

 1 <!DOCTYPE html>
 2 <!--CSS中overflow应用-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div style="height: 200px; 300px;overflow: auto;">
10          overflow: auto超过设定就出滚动条
11         <img src="1.jpg">
12     </div>
13     <br/>
14     <div style="height: 200px; 300px;overflow: hidden;">
15         overflow: hidden超过设定就不显示，隐藏
16         <img src="1.jpg">
17     </div>
18 </body>
19 </html>

CSS中overflow应用

2.gif

3.png 4.jpg

 1 <!DOCTYPE html>
 2 <!--CSS在background的应用1-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div style="background-image: url(2.gif);
10         height:700px;">
11         堆叠图片   平铺效果
12     </div>
13 
14     <br/>
15     <div>--------------------分割-------------------</div>
16     <div>--------------------分割-------------------</div>
17     <div>--------------------分割-------------------</div>
18     <div>--------------------分割-------------------</div>
19     <div>--------------------分割-------------------</div>
20     <br/>
21 
22     <div style="background-image: url(2.gif);
23                   background-repeat:repeat-x;
24         height:700px;">
25         堆叠图片   X横向平铺效果
26     </div>
27 
28     <br/>
29     <div>--------------------分割-------------------</div>
30     <div>--------------------分割-------------------</div>
31     <div>--------------------分割-------------------</div>
32     <div>--------------------分割-------------------</div>
33     <div>--------------------分割-------------------</div>
34     <br/>
35 
36     <div style="background-image: url(2.gif);
37                   background-repeat:repeat-y;
38         height:700px;">
39         堆叠图片    Y竖向平铺效果
40     </div>
41 
42 </body>
43 </html>

CSS在background的应用1

 1 <!DOCTYPE html>
 2 <!--CSS在background的应用2-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div style="height: 100px;border: 2px solid green;"> 根据位置移动来显示 </div>
10     <div style="background-image:url(3.png);
11                   background-repeat:no-repeat;
12                   height: 18px;
13                    18px;
14                   border: 2px solid red;
15                   background-position-x: 0px;
16                   background-position-y: 0px;
17                  ">
18     </div>
19     <br/>
20     <div style="height: 100px;border: 2px solid green;">  根据位置移动来显示 </div>
21     <div style="background-image:url(3.png);
22                       background-repeat:no-repeat;
23                       height: 18px;
24                        18px;
25                       border: 2px solid red;
26                       background-position-x: 0px;
27                       background-position-y: -15px;
28                      ">
29     </div>
30     <br/>
31     <div style="height: 100px;border: 2px solid green;">  简单的写法 </div>
32     <div style="background: url(3.png)  1px -35px no-repeat;
33                         height: 18px;
34                          18px;
35                         border: 2px solid red;
36                      ">
37 
38     </div>
39     <br/>
40     <div style="height: 100px;border: 2px solid green;">  全图显示 </div>
41     <div style="background-image: url(3.png);
42                     height: 178px;
43                      18px;
44                     border: 2px solid red;
45                    ">
46 
47     </div>
48 
49     </div>
50 
51 
52 
53 
54 
55 
56 
57 </body>
58 </html>

CSS在background的应用2

 1 <!DOCTYPE html>
 2 <!--CSS在background实例-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9 
10     <div style="height: 50px; 400px;position: relative;">
11         <input type="text" style="height: 50px; 360px;padding-right: 40px">
12         <span style="position: absolute;
13                     right: 5px;
14                     top: 5px;
15                     background-image: url(4.jpg);
16                     height: 40px;
17                      40px;
18                     display: inline-block;
19                   ">
20         </span>
21     </div>
22 
23 
24 </body>
25 </html>

CSS在background实例

查看全文

相关阅读:
AGC 018E.Sightseeing Plan(组合 DP)
BZOJ.4767.两双手(组合容斥 DP)
AGC 001E.BBQ Hard(组合 DP)
洛谷.3960.列队(线段树/树状数组)
Codeforces Round #514 (Div. 2)
10.4 正睿国庆集训测试青岛
 Codeforces.264E.Roadside Trees(线段树 DP LIS)
BZOJ.4653.[NOI2016]区间(线段树)
Ansible安装部署以及常用模块详解
 Linux系统诊断必备技能之二：tcpdump抓包工具详解

原文地址：https://www.cnblogs.com/ujq3/p/7423590.html