一个简单的css+div布局实例,让你很明了的了解怎么布局!
来源:互联网 发布:电脑ps软件中文版 编辑:程序博客网 时间:2024/05/02 00:26
分析它的结构,有以下几个部分:黑色的头部,蓝色的主体,拆分成红色的变蓝,和右边的导航及主体部分,最下面的黄色是底部,结构相当简单,现在开始写它的css了,
定义最上面的黑色为header:
- #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}
- #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
复制代码
- #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;} /*******上右下左*******/
- #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
- #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
- #footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}
- <BODY>
- <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>
- <div id="mainbox">
- <div id="sidebar">
- </div>
- <div id="menu">4323434</div>
- <div id="content">
- <div align="left"><img src="200832420432288343.jpg" alt="家园中文网站长站" width="502" height="361"></div>
- </div>
- </div>
- <div id="footer">这里是foot部分,放置版权啥的</div>
- </BODY>
刷新发现,是如图效果,但是,所有的div都是靠左边,怎么才能居中呢??原因是我们没有定义body里元素的位置,所以css里加上:复制代码
- body{text-align:center;}
完整的页面就是:
复制代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <style tpye="text/css">
- <!--
- body{text-align:center;} /***********这个是限定主面的居中效果,如果没有,默认在左侧显示*********/
- #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}
- #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
- #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;} /*******上右下左*******/
- #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
- #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
- #footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}
- -->
- </style>
- </HEAD>
- <BODY>
- <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>
- <div id="mainbox">
- <div id="sidebar">
- </div>
- <div id="menu">4323434</div>
- <div id="content">
- <div align="left"><img src="200832420432288343.jpg" alt="家园中文网站长站" width="502" height="361"></div>
- </div>
- </div>
- <div id="footer">这里是foot部分,放置版权啥的</div>
- </BODY>
- </HTML>
- 一个简单的css+div布局实例,让你很明了的了解怎么布局!
- 一个简单的css+div布局实例,让你很明了的了解怎么布局!
- DIV+CSS布局网页的一个实例
- 简单的DIV+CSS布局
- 最简单适用的 DIV 与 CSS 布局实例
- 一个简单的div布局
- 一个DIV+CSS代码布局的简单导航条
- 一个简单的网站布局(div+CSS)
- css div布局的简单页面
- 在html中div+css布局的简单应用(适合初学者了解)
- 简单的DIV布局
- div+css布局实例
- div+css布局实例
- CSS 实例 div布局
- CSS简单的页面布局实例
- 对DIV+CSS的一点心得体会,让你尽快学会布局设置
- div + css 简单布局
- DIV+CSS 简单布局
- 浅析ASP.NET生成随机密码
- 正则表达式学习笔记
- c# 的namespace以及assembly
- 键盘
- 五千年 盛世中华_六十年 新生盛典
- 一个简单的css+div布局实例,让你很明了的了解怎么布局!
- 【转】无法添加、更新或删除从MSX服务器上发起的作业
- Man,what do you know?
- ArcEngine拓扑常用接口
- 文件压缩
- oracle中关于表的所有操作(创建删除表,修改表结构,创建约束,操作表数据,增删改查等)
- VS2008快捷键大全
- VC小技巧20个
- WPF 数据绑定[5]