div与css布局教程：实现网页中心对齐

4星 · 超过85%的资源需积分: 6 13 下载量 90 浏览量更新于2024-09-12 收藏 7KB TXT 举报

身份认证购VIP最低享 7 折!

30元优惠券

试读

8页

在网页设计中，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页未读，继续阅读