0601 浮动、浮动影响、清除浮动、绝对定位、相对定位、固定定位【两列布局】【banner】

1 浮动

　　float：left/right

　　属性的值指出了对象是否及如何浮动

　　float在绝对定位和display为none时不生效

　　进行了浮动设置后，就不再占据原来的位置啦，后面的元素就能补上来

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <link rel="shortcut icon" href="../img/study04.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24        
25         #box1{
26             width: 100px;
27             height: 100px;
28             background-color: skyblue;
29         }
30         #box2{
31             width: 120px;
32             height: 120px;
33             background-color: red;
34 
35             float: left;
36         }
37         #box3{
38             width: 150px;
39             height: 150px;
40             background-color: green;
41             
42         }
43 
44     </style>
45 </head>
46     
47 <body>
48     <div id="box1"></div>
49 
50     <div id="box2"></div>
51 
52     <div id="box3"></div>
53 </body>
54 </html>

浮动源代码

2 利用浮动实现两列布局

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
17 
18     <link rel="shortcut icon" href="../img/study04.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24 
25            #box_z{
26                width: 100%;
27                height: 500px;
28             
29            }
30         #box_index{
31             width: 19%;
32             height: 100%;
33             background-color: skyblue;
34 
35             float: left;
36 
37             border-right: 1px solid red;
38 
39             margin-left: 5px;
40 
41         }
42         #box_content{
43             width: 80%;
44             height: 100%;
45             background-color: green;
46             
47             float: left;
48         }
49         
50         #box_div{
51             height: 80px;
52             background-color: green;
53 
54             margin-bottom: 10px;
55         }
56 
57         #box_copy{
58             height: 80px;
59             background-color: green;
60 
61             margin-top: 10px;
62         }
63     </style>
64 </head>
65     
66 <body>
67     <div id="box_div">
68     
69     </div>
70 
71     <div id="box_z">    
72         <div id="box_index"></div>
73         <div id="box_content"></div>
74     </div>
75 
76     <div id="box_copy"></div>
77 
78 
79     
80 </body>
81 </html>

两列布局源代码

3 浮动对元素的影响

　　3.1 浮动对出去div以外的元素的影响

　　　　浮动后的div虽然不会占据原来的位置，但是对于元素里面的内容而言是不会去补齐位置的；相反元素里面的内容会被挤出来（元素内容会挨着浮动div的旁边显示）

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24 
25         #box{
26             height: 400px;
27             width: 400px;
28             background-color: skyblue;
29         }
30         #box1{
31             height: 100px;
32             width: 100px;
33             background-color: blue;
34 
35             float: left;
36         }
37     </style>
38 </head>
39 
40 <body>
41     <div id="box">
42         <div id="box1"></div>
43         <span>float：left/right
44 
45 　　属性的值指出了对象是否及如何浮动
46 
47 　　float在绝对定位和display为none时不生效
48 
49 　　进行了浮动设置后，就不再占据原来的位置啦，后面的元素就能补上来</span>
50 
51     </div>
52 </body>
53 </html>

浮动对元素的影响源代码

　　3.2 浮动对div的影响

　　　　浮动后的div虽然不会占据原来的位置，后面的div会上来进行补齐

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24 
25         #box{
26             height: 400px;
27             width: 400px;
28             background-color: skyblue;
29         }
30         #box1{
31             height: 100px;
32             width: 100px;
33             background-color: blue;
34 
35             float: left;
36         }
37         #box2{
38             height: 222px;
39             width: 222px;
40             background-color: green;
41 
42         }
43     </style>
44 </head>
45 
46 <body>
47     <div id="box">
48         <div id="box1"></div>
49         <div id="box2"></div>
50 
51     </div>
52 </body>
53 </html>

浮动对div的影响

4 清除浮动

　　为什么需要清除浮动

　　　　父级div无法将进行了浮动的子div包括起来

　　4.1 在要清除的同级添加一个空div,给这个空div添加样式clear

　　　　clear: both;

　　4.2 在要清除的父级添加样式overflow

　　　　overflow: hidden;

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24 
25         #box{
26             width: 300px;
27             border: 1px solid red;
28                 
29             /*清除浮动方法二*/
30             overflow: hidden;
31         }
32         #box1{
33             height: 100px;
34             width: 100px;
35             background-color: blue;
36 
37             float: left;
38 
39         }
40         #box2{
41             height: 100px;
42             width: 100px;
43             background-color: green;
44 
45             float: right;
46 
47         }
48         #clear{
49             /*清除浮动方法一*/
50             /*clear: both;  */
51         }
52     </style>
53 </head>
54 
55 <body>
56     <div id="box">
57         <div id="box1"></div>
58         <div id="box2"></div>
59         <div id="clear"></div>
60 
61     </div>
62 </body>
63 </html>

清除浮动源代码

5 定位

　　relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。　　　　 absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

　　fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

　　定位后可以通过：top、left、bottom、right 设定移动距离；可以通过 z-index 设定定位显示的优先级别

　　5.1 相对定位

　　　　相对于自身原来的位置进行移动；移动后还是占据原来的位置

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24 
25 
26         #box1{
27             height: 100px;
28             width: 100px;
29             background-color: blue;
30             
31             position: relative;
32             top: 0px;
33             left: 0px;
34             
35             z-index: 11;
36 
37         }
38         #box2{
39             height: 120px;
40             width: 120px;
41             background-color: green;
42 
43             position: relative;
44             top: -50px;
45             left: 20px;
46 
47             z-index: 44;
48 
49         }
50        
51     </style>
52 </head>
53 
54 <body>
55     <div id="box1"></div>
56     <div id="box2"></div>
57 </body>
58 </html>

相对定位

　　5.2 绝对定位

　　　　相对于父级元素的位置进行移动（前提是父级元素使用了定位，否则就是相对于浏览器进行移动），移动后不再占据任何空间

　　　　找定位父级来进行相对移动，没找到就是相对于浏览器进行移动

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24 
25 
26         #box1{
27             height: 100px;
28             width: 100px;
29             background-color: blue;
30             
31             position: absolute; /*注释掉这一行观察效果*/
32 
33         }
34         #box2{
35             height: 120px;
36             width: 120px;
37             background-color: green;
38 
39         }
40        
41     </style>
42 </head>
43 
44 <body>
45     <div id="box1"></div>
46     <div id="box2"></div>
47 </body>
48 </html>

绝对定位

　　5.3 固定定位

　　　　不占据空间

　　　　可用于广告、导航栏...

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
17 
18     <link rel="shortcut icon" href="../img/study.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         
25         .box{
26             height: 300px;
27             width: 50px;
28             background-color: rgba(0,0,24,0.5);
29 
30             position: fixed;
31             top: 50%;
32 
33             margin-top: -150px;
34         }
35 
36         .box1{
37             left: 0px;
38         }
39 
40         .box2{
41             right: 0px;
42         }
43 
44         .box1{
45             left: 100px;
46         }
47 
48        
49     </style>
50 </head>
51 
52 <body>
53     <div class="box box1"></div>
54     <div class="box box2"></div>
55     <div class="box box3"></div>
56     <p style="height: 1000px;">hello spirngmvc</p>
57     <p style="height: 1000px;">hello world</p>
58 </body>
59 </html>

固定定位

　　注意：float、绝对定位、固定定位都不再占据原来的空间

小练习

　　1 实现两列布局

  1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <meta name="description" content="" />
  6     <meta name="Keywords" content="" />
  7     <title></title>
  8     
  9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
 10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
 11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
 12 
 13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
 14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
 15 
 16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
 17 
 18     <link rel="shortcut icon" href="../img/study.ico">
 19     <style>
 20         *{
 21             margin: 0;
 22             padding: 0;
 23         }
 24         a{
 25             text-decoration: none;
 26         }
 27 
 28         #box_s {
 29             height: 80px;
 30             width: 100%;
 31             background-image: url("../img/timg.jpg");
 32             background-size: 100% 100%;
 33 
 34             margin-bottom: 10px;
 35 
 36             position: relative;
 37             top: 0;
 38             left: 0;
 39         }
 40         #box_div{
 41             position: absolute;
 42             right: 30px;    
 43             top: 20px;
 44         }
 45         #box_div td{
 46             font-size: 30px;
 47             padding-left: 10px;
 48         }
 49         #box_div td:hover{
 50             background-color: green;
 51         }
 52         
 53       
 54         .box_z {
 55             width: 100%;
 56             height: 530px;
 57             background-color: skyblue;
 58         }
 59         .box_index {
 60             height: 100%;
 61             width: 17%;
 62             background-color: #8BC4F4;
 63 
 64             border-right: 1px solid blue;
 65             margin-left: 5px;
 66 
 67             float: left;
 68 
 69             text-align: center;
 70         }
 71         .box_content {
 72             height: 100%;
 73             width: 82%;
 74             background-color: skyblue;
 75 
 76             float: left;
 77             
 78         }
 79 
 80         #box_x {
 81             height: 60px;
 82             background-color: red;
 83             background-color: skyblue;
 84 
 85             margin-top: 10px;
 86             
 87             text-align: center;
 88 
 89             padding-top: 10px;
 90         }
 91         #box_x p{
 92             line-height: 30px;
 93         }
 94 
 95 
 96         #box_ti {
 97             margin-top: 10%;
 98         }
 99         #box_ti li {
100             line-height: 44px;
101         }
102 
103         #box_ti li a:hover {
104             background-color: green;
105         }
106        
107 
108         #login_index{
109             height: 201px;
110             width: 329px;
111             /*background-color: #4589CB;*/
112             background-image: url("../img/lanse.jpg");
113             background-size: 100% 100%;
114 
115             /*让login在页面正中间显示*/
116             position: absolute;     
117             top: 50%;
118             left: 50%;
119             transform: translate(-50%, -50%);
120                 
121             /*设置背景图片的透明度*/
122             opacity : 0.5;
123 
124             text-align: center;
125 
126             
127         }
128         #login{
129             width: 261px;
130 
131             vertical-align: middle;
132             display: inline-block;
133             /*background-color: red;*/
134 
135             text-align: center;
136 
137         }
138 
139         #login_index span{
140             height: 100%;
141             display: inline-block;
142             vertical-align: middle;
143         }
144         span{
145             color: #1191EC;
146             font-weight: bold;
147         }
148         #submit{
149             color: #1191EC;
150             font-weight: bold;
151         }
152         #reset{
153             color: red;
154             font-weight: bold;
155         }
156         #title{
157             color: #4794B7;
158             font-weight: bold;
159             font-family: 楷体;
160             font-size: 60px;
161 
162             /*position: absolute;
163             top: 180px;
164             left: 50%;
165             transform: translate(-50%, 0);*/
166         }
167 
168         #info{
169             width: 380px;
170             height: 60px;
171 
172             position: absolute;
173             top: -32%;
174             left: -8%;
175 
176             text-align: center;
177             line-height: 60px;
178         }
179     </style>
180 </head>
181 
182 <body>
183     <div id="box_s">
184         <div id="box_div">
185             <table>
186                 <tr>
187                     <td><a href="#">注册</a></td>
188                     <td><a href="#">登录</a></td>
189                     <td><a href="#">主页</a></td>
190                     <td><a href="#">帮助</a></td>
191                 </tr>
192             </table>
193         </div>
194     </div>
195 
196     <div class="box_z">
197         <div class="box_index">
198             <div id="box_ti">
199                 <ol>
200                     <li><a href="">第1道题</a></li>
201                     <li><a href="">第2道题</a></li>
202                     <li><a href="">第3道题</a></li>
203                     <li><a href="">第4道题</a></li>
204                     <li><a href="">第5道题</a></li>
205                     <li><a href="">第6道题</a></li>
206                     <li><a href="">第7道题</a></li>
207                     <li><a href="">第8道题</a></li>
208                     <li><a href="">第9道题</a></li>
209                     <li><a href="">第10道题</a></li>
210                 </ol>
211             </div>
212         </div>
213         <div class="box_content">
214             <div id="login_index">
215             <div id="info"><span id="title">庠序登录系统</span></div> <!-- 改进的地方 -->
216             <div id="login">
217                 <form action="#" method="get">
218                     <span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 号 ：</span><input type="text" name="username" />
219                     <br /><br />
220                     <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码 ：<input type="password" name="password" />
221                     <br /><br />
222                     <span>确认密码：</span><input type="password" name="password2" />
223                     <br /><br />
224                     <input type="submit" id="submit" value="登&nbsp;&nbsp;录" />
225                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
226                     <input type="reset" id="reset" value="重&nbsp;&nbsp;置" />
227                 </form>
228             </div>
229             <span></span>
230         </div> 
231         </div>
232     </div>
233 
234     <div id="box_x">
235         <p>©2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</p>
236         <p>粤ICP备13003602号-2 粤B2-20130198 营业执照 法律声明</p>
237     </div>
238     
239 </body>
240 </html>

两列布局

　　2 banner

  1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <meta name="description" content="" />
  6     <meta name="Keywords" content="" />
  7     <title></title>
  8     
  9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
 10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
 11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
 12 
 13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
 14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
 15 
 16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
 17 
 18     <link rel="shortcut icon" href="../img/study04.ico">
 19     <style>
 20         *{
 21             margin: 0;
 22             padding: 0;
 23         }
 24         a{
 25             text-decoration: none;
 26         }
 27 
 28         #banner {
 29             height: 300px;
 30             width: 500px;
 31             background-color: skyblue;  
 32 
 33             position: absolute;
 34             top: 50%;
 35             left: 50%;
 36 
 37             transform: translate(-50%, -50%);     
 38             border: 1px solid skyblue;     
 39          }
 40          #banner_img{
 41             position: relative;
 42          }
 43          #banner_img img{
 44             position: absolute;
 45             top: 0px;
 46             left: 0px;
 47          }
 48 
 49          #banner_ear{
 50             width: 500px;
 51             height: 50px;
 52 
 53             position: relative;
 54             top: 125px;
 55 
 56          }
 57 
 58          #banner_ear .ear:hover {
 59             background-color: red;
 60          }
 61 
 62         .ear{
 63             height: 50px;
 64             width: 50px;
 65             text-align: center;
 66             line-height: 50px;
 67 
 68             font-size: 50px;
 69             font-weight: bold;
 70 
 71             background-color: rgba(33,33,33,0.5);
 72         }
 73          .ear_left{
 74             float: left;
 75          }
 76          .ear_right{
 77             float: right;
 78          }
 79 
 80          #banner_page {
 81             position: absolute;
 82             bottom: 0px;
 83             font-size: 50px;
 84             color: red;
 85             font-weight: bold;
 86             text-align: center;
 87 
 88             margin-left: 30%;
 89          }
 90          #banner_page a:hover {
 91             background-color: red;
 92          }
 93     </style>
 94 
 95 </head>
 96 
 97 <body>
 98     <div id="banner">
 99         <div id="banner_img">
100             <!-- <img src="../img/cq2.jpg" alt="" width="500px" height="300px" /> -->
101             <!-- <img src="../img/cq3.jpg" alt="" width="500px" height="300px" /> -->
102             <!-- <img src="../img/cq4.jpg" alt="" width="500px" height="300px" /> -->
103             <!-- <img src="../img/cq5.jpg" alt="" width="500px" height="300px" /> -->
104             <img src="../img/cq1.jpg" alt="" width="500px" height="300px" /> 
105             <img src="../img/dazu.jpg" alt="" width="500px" height="300px" />         
106         </div>
107 
108         <div id="banner_ear">
109             <div class="ear ear_left"><a href="#">&lt;</a></div>
110             <div class="ear ear_right"><a href="#">&gt;</a></div>
111         </div>
112 
113         <div id="banner_page">
114             <table>
115                 <tr>
116                     <td><a href="#">1</a></td>
117                     <td><a href="#">2</a></td>
118                     <td><a href="#">3</a></td>
119                     <td><a href="#">4</a></td>
120                     <td><a href="#">.</a></td>
121                     <td><a href="#">.</a></td>
122                     <td><a href="#">.</a></td>
123 
124                 </tr>
125             </table>
126         </div>
127     </div>
128 </body>
129 </html>

banner

posted @ 2017-05-14 11:26 寻渝记阅读(511) 评论(0) 收藏举报

刷新页面返回顶部

0601 浮动、浮动影响、清除浮动、绝对定位、相对定位、固定定位 【两列布局】【banner】

1 浮动

2 利用浮动实现两列布局

3 浮动对元素的影响

3.1 浮动对出去div以外的元素的影响

3.2 浮动对div的影响

4 清除浮动

为什么需要清除浮动

4.1 在要清除的同级添加一个空div,给这个空div添加样式clear

4.2 在要清除的父级添加样式overflow

5 定位

5.1 相对定位

5.2 绝对定位

5.3 固定定位

公告

0601 浮动、浮动影响、清除浮动、绝对定位、相对定位、固定定位【两列布局】【banner】

　　3.1 浮动对出去div以外的元素的影响

　　3.2 浮动对div的影响

　　为什么需要清除浮动

　　4.1 在要清除的同级添加一个空div,给这个空div添加样式clear

　　4.2 在要清除的父级添加样式overflow

　　5.1 相对定位

　　5.2 绝对定位

　　5.3 固定定位