Python学习笔记第十五周

目录：

　　一、CSS补充

　　　　1、position

　　　　2、overflow

　　　　3、hover

　　　　4、background

　　二、JavaScript

　　三、DOM

主要内容：

　　一、CSS补充　　

　　1、position

　　可以定义元素锚定到哪个位置

　　1、fixed固定在窗口的某个位置

　　例子：

　　将网页分为上下两部分，其中头部占据页面上方，内容部分可以滑动，但是头部不会被覆盖

 1 <style>
 2         .pg-header{
 3             height:48px;
 4             background-color: black;
 5             color:#dddddd;
 6             position: fixed;
 7             top:0;
 8             right:0;
 9             left:0;
10 
11         }
12 
13         .pg-body{
14             background-color: #dddddd;
15             height: 5000px;
16             margin-top:48px;
17         }
18     </style>
19 </head>
20 <body>b
21     <div class="pg-header">头部</div>
22     <div class="pg-body">内容</div>
23 </body>

　　2、absolute 绝对定位，需要和relative一起使用

　　将absolute嵌套在relatvie中，实现某一特定位置的绝对定位

 1 <body>
 2     <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
 3         <div style="position: absolute;left:0;bottom: 0; width:50px;height: 50px;background-color:black"></div>
 4     </div>
 5     <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
 6         <div style="position: absolute;right:0;bottom: 0; width:50px;height: 50px;background-color:black"></div>
 7     </div>
 8     <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
 9         <div style="position: absolute;right:0;top: 0; width:50px;height: 50px;background-color:black"></div>
10     </div>
11

　　3、opacity：取值0~1，0表示全透明，1表示完全遮住

　　例子：页面三层分层

1 <body>
2     <div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color: white;height:400px;width:500px">
3         <input type="text" />
4     </div>
5     <div style="z-index: 9;position:fixed;top:0;bottom: 0;right:0;left:0;opacity: 0.5;background-color:black"></div>
6     <div style="height: 5000px;background-color:green">abc</div>
7 </body>

　　2. overflow

　　overflow包含两个属性：

　　1、hidden：超出的部分隐藏

　　2、auto：超出的部分出现滚动条

　　例子：定义div标签，同时在该标签内定义一个超出标签范围的图片，查看该效果。

　　（1）超出部分隐藏

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

　　(2) 超出部分变为滚动条

 <div style="height:200px;width:200px;overflow:auto ">
        <img src="a.jpg"/>
    </div>

　　3、hover

　　当鼠标移动某一个元素下，应用该元素另外定义的一个CSS属性中，使用hover元素

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .pg-header{
 6             position: fixed;
 7             top:0;
 8             right:0;
 9             left:0;
10             height:48px;
11             background-color:#2459a2;
12             line-height:48px;
13             color:white;
14 
15         }
16         .pg-body{
17             margin-top: 50px
18         }
19         .w{
20             width:980px;
21             margin:0 auto;
22             
23         }
24         .pg-header .menu{
25             display: inline-block;
26             padding:0 10px;
27         }
28         .pg-header .menu:hover{
29             background-color:blue;
30         }
31 
32     </style>
33 </head>
34 <body>
35     <div class="pg-header">
36         <div class="w">
37             <a class="menu">LOGO</a>
38             <a class="menu">最新发布</a>
39             <a class="menu">人类</a>
40             <a class="menu">24区</a>
41             <a class="menu">段子</a>
42         </div>
43     </div>
44     <div class="pg-body">
45         <div class="w"></div>
46     </div>
47 </body>

View Code