CSS样式3

1.positon：fixed
可以实现网页浏览器上的返回顶部的功能。
positon:fixed 表示将当前div块固定在页面的某一个位置（默认为左上角）。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body style="margin:0 auto;">
 8     <div onclick='GoTop();' style="height:50px;50px;background-color: black;color:white;
 9     position:fixed;
10     bottom:20px;
11     right:20px;
12     ">返回顶部</div>
13     <div style="height: 5000px;background-color: #dddddd;">
14     </div>
15     <script>
16         function GoTop(){
17             document.body.scrollTop=0;
18         }
19     </script>
20 
21 </body>
22 </html>

View Code

2.positon实现网页头部在网页上面固定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             height:48px;
 9             background-color: black;
10             color:#dddddd;
11             positon:fixed;
12             top:0;
13             left:0;
14             right:0;
15 
16         }
17         .pg-body{
18             height:500px;
19             backgound-color:blue;
20             margin-top:50px;
21         }
22     </style>
23 </head>
24 <body>
25     <div class="pg-header">头部内容</div>
26     <div class="pg-body">内容部分</div>
27 
28 </body>
29 </html>

View Code

3.position:absolute 绝对定位，一锤子买卖；自身的应用场景不多；
当其与relative+absolute一起结合着用，应用场景就会增加；

如下：
在一个div块中，将内部的div块固定在这个div块的某个位置。
<div style="500px;height:200px;background-color:black;position:relative;margin:0 auto;">
<div style="position:absolute;left:0;bottom:0;50px;height:50px;background-color: white;border:1px;"></div>
</div>
拓展：
<div style="500px;height:200px;background-color:black;position:relative;margin:0 auto;">
<div style="position:absolute;left:0;bottom:0;50px;height:50px;background-color: white;border:1px;line-height: 50px;text-align:center;">笑脸</div>
<div style="position:absolute;left:80px;bottom:0;50px;height:50px;background-color: white;border:1px;line-height: 50px;text-align:center;">哭脸</div>
</div>

解析：
在外层div中设置positon:relative，该div标签是不会发生任何变化的；但是内部的div里面的position:absolute可以指定放在父类标签的固定位置。

实例：用户登陆窗口的输入框右侧放置图片。

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

View Code

4.opacity透明度，z-index层级顺序；

实例：设计三层的页面，最上层为输入层，第二层为遮罩层（透明度）,第三层为正常页面；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="z-index:10;
 9     position:fixed;
10     top:50%;
11     left:50%;
12     background-color: white;
13     50px;height:100px;
14     ">
15 
16         <form>
17             用户名：<input type="text" name="用户名" value="admin"/>
18             密码：<input type="password" name="密码" value="admin"/>
19             <input type="submit" name="提交"/>
20         </form>
21     </div>
22 
23     <div style="z-index:9;
24     position:fixed;
25     bottom:0;
26     top:0;
27     left:0;
28     right:0;
29     opacity:0.5;
30     background-color: #6e6568;
31     "><br/>
32         <br/>遮罩层</div>
33     <div style="background-color: #c81623;height:5000px;">正文内容</div>
34 
35 </body>
36 </html>

View Code

解析：z-index属性用来设置div的层级顺序；
opacity属性用来设置透明度，0-1（完全透明-完全不透明）

5.overflow

问题：当img标签内的图片大小超过外层div时，会将div设置的边界冲开，为了避免这个问题可以使用overflow属性设置。（或设置img大小）
　　overflow:hidden; 如果图片大小超过外层div设置，则隐藏大于部分，仅显示div设置的大小
　　overflow:auto; 如果图片大小超过外层div设置，则自动出线滚动条可以查看整个图片内容；

1 <div style="height:220px;300px;overflow:hidden">
2     <img src="1.jpg"/>
3 </div>

View Code

6.hover

当鼠标移动到当前标签上时，指定的css属性才会生效；

1 .pg-header .menu:hover{
2 　　background-color: red;
3 　　}

View Code

实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             position:fixed;
 9             right:0;
10             top:0;
11             left:0;
12             height:48px;
13             background-color: #2459a2;
14             line-height:48px;
15         }
16         .pg-body{
17             margin-top:50px;
18         }
19         .w{
20             width:980px;
21             margin:0 auto;
22         }
23         .pg-header .menu {
24             display: inline-block;
25             padding:0 10px;
26         }
27         .pg-header .menu:hover{
28             background-color: red;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="pg-header">
34         <div class="w">
35             <a class="logo">logo</a>
36             <a class="all">全部</a>
37             <a class="menu">首页</a>
38             <a class="news">新闻</a>
39             <a class="regarding">关于</a>
40 
41         </div>
42 
43     </div>
44     <div class="pg-body">
45         <div class="w">content</div>
46     </div>
47 </body>
48 </html>

View Code

7.background-image background-repeat

background-image:url('grey.png') 指定背景图片
background-repeat: no-repeat 指定当背景图片小于div大小时，是否自动堆叠填充；
　　　　　　　　　　no-repeat 不堆叠；
　　　　　　　　　　repeat-X 水平方向堆叠；
　　　　　　　　　　repeat-Y 竖直方向堆叠；
　　　　　　　　　　repeat 水平和竖直方向自动堆叠；
　　　　　　　　　　space
　　　　　　　　　　inherit
　　　　　　　　　　round
例:<div style="background-image:url('grey.png');height:5000px; 250px;background-repeat: no-repeat"></div>
应用场景1：图片堆叠：指定的背景图片非常小，要堆满整个大块div，使用这种方法能够实现。

应用场景2：dig.chouti.com的点赞爱心小图片的获取。

1 <div style="background-image:url('chouti.png');
2     height:20px; 20px;
3     background-repeat:no-repeat;
4     background-position-x:0px;
5     background-position-y:-20px;
6 "></div>

View Code

简要写法：

1 <div style="background:url(chouti.png) no-repeat 0 0;
2         20px;height:20px;
3 "></div>

View Code

作用：网页上加载这种小logo图示，使用一张图，用backgound-position和div的大小设置，调整在div中显示的图片的指定位置和内容，实现一次请求调用图片资源就可以实现相关的图示的加载。几乎所有的网站都用这种方式实现该功能。