HTML和CSS经典布局5
2013-11-12 16:29
435 查看
如下图:
View Code
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> #content { overflow: hidden; } .column-left { float: left; width: 200px; min-height: 500px; } .column-right { float: right; width: 200px; min-height: 500px; } .column-middle { margin: 25px 225px; min-height: 500px; } .busy { position: fixed; z-index: 1; width: 100%; height: 100%; background-color: rgba(100, 100, 100, 0.5); top: 0px; left: 0px; } .busy span { display: block; position: absolute; top: 50%; left: 50%; width: 100px; height: 60px; margin-left: -50px; margin-top: -30px; background-color: #ffffff; border: 2px solid #444444; text-align: center; line-height: 60px; border-radius: 50px; } </style> </head> <body> <div id="header" style="height: 50px; background: blue;"> </div> <div id="content"> <div class="column-left" style="background-color: purple;"> </div> <div class="column-right" style="background-color: yellow;"> </div> <div class="column-middle" style="background-color: pink;"> </div> </div> <div class="busy"> <span> Loading... </span> </div> </body> </html>
View Code
相关文章推荐
- HTML和CSS经典布局1
- HTML和CSS经典布局2
- HTML和CSS经典布局3
- HTML和CSS经典布局4
- HTML和CSS经典布局6
- [CSS]标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
- html+css:一个自适应的两栏布局的实现
- 利用HTML和CSS实现常见的布局
- 在html中div+css布局的简单应用(适合初学者了解)
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
- HTML CSS + DIV实现整体布局
- HTML-div+ul+li经典布局案例
- CSS 布局经典问题初步整理
- HTML+CSS学习杂记——布局
- CSS 布局经典问题初步整理
- DIV + CSS 实现最经典的布局
- HTML与CSS教学-第十一章 使用CSS样式完成网页布局
- Html+CSS_居中布局的总结
- HTML,CSS和JAVASCRIPT入门经典 笔记(一)
- html与css经典二级菜单编写2