码迷,mamicode.com
首页 > Web开发 > 详细

HTML页面的布局

时间:2016-06-09 18:41:29      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

1.纵向切分页面:CSS POSITION的默认值为:STATIC

1)

技术分享
 1 <html>
 2     <head>
 3         <title>Hello</title>        
 4     </head>
 5     <body>        
 6         <div style="float:left;background:red;width:50%;height:50%;">
 7             <div style="float:left;background:red;width:50%;height:50%;"></div>
 8             <div style="background:yellow;height:50%;"></div>            
 9         </div>
10         <div style="background:yellow;height:50%;"></div>                
11     </body>
12 </html>
View Code

显示的效果(IE11)

技术分享

2)

技术分享
 1 <html>
 2     <head>
 3         <title>Hello</title>        
 4     </head>
 5     <body>        
 6         <div style="float:right;background:red;width:50%;height:50%;">
 7             <div style="position:relative;float:right;background:blue;width:50%;height:50%;"></div>
 8             <div style="background:gray;height:50%;"></div>            
 9         </div>
10         <div style="background:yellow;height:50%;"></div>            
11     </body>
12 </html>
View Code

显示效果(IE11)

技术分享

3)

技术分享
 1 <html>
 2     <head>
 3         <title>Hello</title>        
 4     </head>
 5     <body>        
 6         <div style="float:right;background:red;width:50%;height:50%;">
 7             <div style="position:absolute;float:right;background:blue;width:50%;height:50%;"></div>
 8             <div style="background:gray;height:50%;"></div>            
 9         </div>
10         <div style="background:yellow;height:50%;"></div>            
11     </body>
12 </html>
View Code

显示效果(IE11)

技术分享

HTML页面的布局

标签:

原文地址:http://www.cnblogs.com/jingjingdidunhe/p/5572516.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!