div与css布局教程:实现网页中心对齐
在网页设计中,div和CSS是至关重要的基础元素,它们共同构建了网页的结构和样式。div(Document Object Model)标签是HTML中的块级元素,用于定义文档中的逻辑区域或容器,可以容纳其他HTML元素。CSS(Cascading Style Sheets)则是一种样式表语言,用于描述HTML元素的外观和布局。 这段代码示例展示了如何使用div和CSS进行基本的网页布局。首先,设置`<body>`标签的margin和padding为0,并将文本居中对齐,确保页面的整体布局清晰简洁。接下来,定义了多个具有不同ID的div,如`#content`, `#content-top`, `#content-mid`, 和 `#content-end`,它们都设置了自动左右边距,并限制了宽度为400px或370px,这有助于实现一个中心内容区域,通过调整这些div的顺序和宽度,可以实现灵活的分栏布局。 `#bodycenter`是一个更大的区域,其宽度设为700px,通过`margin-right`和`margin-left`使其水平居中,并添加了`overflow:auto`属性,以防止内容溢出并提供滚动条。这个区域内部,通过浮动(`float`)属性,`#dv1`被放置在左侧,宽度为280px,而`#dv2`则放在右侧,宽度为410px,实现了两栏布局。 `#header`区域同样设置了宽度为700px,也是水平居中,这通常用于放置网站的头部导航或logo等关键元素。这种布局方式灵活且易于维护,适合构建响应式设计,使得不同设备上的显示效果都能保持良好的用户体验。 总结来说,这段代码展示了如何利用div的结构控制和CSS的样式规则来创建一个简单的、有层次的网页布局,通过浮动和相对定位,实现了内容的多列分隔和整体页面的居中管理。对于任何网页开发者来说,理解和掌握div和CSS的组合使用是提升网页设计和开发技能的关键。
CSS常用布局实例
一列
单行一列
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两行一列
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
三行一列
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两列
单行两列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
两行两列
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
三行两列
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
三列
单行三列
绝对定位
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位
xhtml:
<div id="warp">
<div id="column">
剩余7页未读,继续阅读
- 粉丝: 0
- 资源: 3
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Flex垃圾回收与内存管理:防止内存泄露
- Python编程规范与最佳实践
- EJB3入门:实战教程与核心概念详解
- Python指南v2.6简体中文版——入门教程
- ANSYS单元类型详解:从Link1到Link11
- 深度解析C语言特性与实践应用
- Gentoo Linux安装与使用全面指南
- 牛津词典txt版:信息技术领域的便捷电子书
- VC++基础教程:从入门到精通
- CTO与程序员职业规划:能力提升与路径指南
- Google开放手机联盟与Android开发教程
- 探索Android触屏界面开发:从入门到设计原则
- Ajax实战:从理论到实践
- 探索Android应用开发:从入门到精通
- LM317T稳压管详解:1.5A可调输出,过载保护
- C语言实现SOCKET文件传输简单教程