您的位置：首页 > Web前端 > CSS

DIV+CSS实战示例

2011-08-03 22:26 120 查看

一个简单的css+div布局实例，让你很明了的了解怎么布局！

分析它的结构，有以下几个部分：黑色的头部，蓝色的主体，拆分成红色的变蓝，和右边的导航及主体部分，最下面的黄色是底部，结构相当简单，现在开始写它的css了，

定义最上面的黑色为header：

1.#header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}

然后中间的蓝色主体叫mainbox吧，那么样式表可以写：

1.#mainbox{margin:auto 0px;width:800;background:blue;height:410px;}

以此定义其他如下：

1.#sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;}     /*******上右下左*******/

2.#menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}

3.#content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}

4.#footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}

说明：margin右边的四个值分别对应上右下左，比如menu距下是5px，content距上是4px，所以中间有9px的间距了，而先定义了menu的高位30px，所以content若想和sidebar对齐，则应该定义高度为400-30-4-5=361.上面完成了<style>部分的内容，下面把对应的div放到body中就可以了，

1.<BODY>

2. <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>

3. <div id="mainbox">

4. <div id="sidebar">

5. </div>

6. <div id="menu">4323434</div>

7. <div id="content">

8.    <div align="left"><img src="200832420432288343.jpg" alt="家园中文网站长站" width="502" height="361"></div>

9. </div>

10.</div>

11.<div id="footer">这里是foot部分，放置版权啥的</div>

12.</BODY>

刷新发现，是如图效果，但是，所有的div都是靠左边，怎么才能居中呢？？原因是我们没有定义body里元素的位置，所以css里加上：

1.body{text-align:center;}

这样就大功告成了！

完整的页面就是：

复制代码

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2.<HTML>

3.<HEAD>

4.<style tpye="text/css">

5.

14.</style>

15.</HEAD>

16.<BODY>

17. <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>

18. <div id="mainbox">

19. <div id="sidebar">

20. </div>

21. <div id="menu">4323434</div>

22. <div id="content">

23.    <div align="left"><img src="200832420432288343.jpg" alt="家园中文网站长站" width="502" height="361"></div>

24. </div>

25.</div>

26.<div id="footer">这里是foot部分，放置版权啥的</div>

27.</BODY>

28.</HTML>

更多div+css布局，可以来http://www.cndorm.com/html/117/这里交流

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： div css menu float html 文档

相关文章推荐

新的分享

章节导航