第九章 DIV+CSS布局

1.DIV+CSS概述

什么是DIV + CSS？
DIV + CSS 是一种用于网页布局和样式设计的前端开发技术组合，通常用于替代传统的表格布局。它以结构与样式分离为核心理念，将HTML（结构）与CSS（样式）独立处理，提高网页的可维护性和兼容性。

DIV 是 HTML 中的一个标签（<div>），用于定义页面中的分块或容器元素，作为网页布局的基础。它本身没有任何样式，仅仅是一个结构上的容器。

CSS（层叠样式表，Cascading Style Sheets）是一种样式表语言，用于控制网页元素的显示方式，包括颜色、字体、间距、布局等。CSS通过选择器可以应用到<div>及其他HTML元素。

DIV + CSS 的优势

1. 布局灵活：与使用表格布局不同，DIV+CSS可以通过flexbox、grid等布局模型实现更灵活的页面设计。
2. 代码可维护性高：结构和样式分离，减少重复代码，易于修改和维护。
3. 提高网页加载速度：表格布局需要更多的HTML代码，而DIV+CSS的代码更加简洁，从而减少网页大小，提高加载速度。
4. 响应式设计支持：通过CSS媒体查询等技术，轻松实现适配各种设备屏幕大小的响应式网页设计。
5. SEO友好：DIV+CSS布局结构清晰，有利于搜索引擎更好地抓取和理解网页内容。

示例

html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DIV + CSS Layout</title><style>/ 全局样式 /body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/ 布局样式 /.container {display: flex;flex-direction: column;min-height: 100vh;}.header {background-color: 4CAF50;color: white;padding: 20px;text-align: center;}.main {flex: 1;padding: 20px;}.footer {background-color: 333;color: white;text-align: center;padding: 10px;}</style>
</head>
<body><div class="container"><div class="header"><h1>My Website</h1></div><div class="main"><p>This is the main content area.</p></div><div class="footer"><p>Footer content goes here.</p></div></div>
</body>
</html>

在此示例中：
DIV 元素用于创建不同的页面部分（如 .header, .main, .footer），分别代表头部、主内容区和页脚。
CSS 用于为这些 DIV 区块定义布局和样式，例如背景颜色、字体样式、边距等。
DIV + CSS 是现代网页设计中的基础组合，它不仅提高了开发效率，还大大增强了页面的可读性、灵活性和响应性。

2.DIV+CSS的应用

在网页开发中，DIV 标签和 CSS 结合使用是创建网页布局和样式的核心技术。下面是一个关于如何将 DIV 与 CSS 结合使用的简单示例，以及常见的应用场景。

1. 基本结构与样式
HTML (结构)
html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DIV + CSS Example</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="container"><div class="header"><h1>Website Header</h1></div><div class="main-content"><div class="sidebar"><h2>Sidebar</h2><p>This is the sidebar content.</p></div><div class="content"><h2>Main Content</h2><p>This is the main content area.</p></div></div><div class="footer"><p>Website Footer</p></div></div></body>
</html>

css

/ Reset default margin and padding /{margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: Arial, sans-serif;background-color: f4f4f4;color: 333;
}.container {width: 80%;margin: 0 auto;
}.header, .footer {background-color: 333;color: fff;text-align: center;padding: 20px 0;
}.main-content {display: flex;margin: 20px 0;
}.sidebar {flex: 1;background-color: ddd;padding: 20px;margin-right: 20px;
}.content {flex: 3;background-color: fff;padding: 20px;
}.footer {background-color: 333;color: white;text-align: center;padding: 10px;
}

2. 解释
DIV 标签:
- div 是一个用于分隔或容纳其他 HTML 元素的容器。常用来组织页面结构。
- 在上面的例子中，<div class="header"> 和 <div class="content"> 用于定义网页的不同部分（页头、侧边栏、主要内容、页脚）。

CSS:
display: flex;：我们使用 Flexbox 来布局 main-content 的两个子元素 sidebar 和 content。Flexbox 使得侧边栏和主内容区可以灵活调整布局。
container：定义网页整体的宽度为 80%，并居中显示。
.header, .footer：定义背景颜色、字体颜色和文本居中。

3. 常见应用场景
布局页面：DIV 标签和 CSS 可用于设计网页的头部、导航栏、内容区、侧边栏和页脚。
响应式设计：结合 CSS 媒体查询，可以根据不同屏幕尺寸调整布局。
模块化设计：通过使用不同的类和样式表，DIV 容器能够轻松地复用和修改页面的部分结构。

4. 实现响应式设计
媒体查询示例 (CSS)
css

@media (max-width: 768px) {
.main-content {
flex-direction: column;
}

.sidebar {
margin-right: 0;
}
}

在上面的例子中，当屏幕宽度小于 768px 时，侧边栏和主要内容区将堆叠成一列，适合移动设备的显示。
这就是 DIV 与 CSS 结合应用的基本介绍与示例。通过这些基础概念，可以轻松实现复杂的网页布局和样式。

3.DIV+CSS的典型布局

1. 基本结构与样式
HTML (结构)

html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DIV + CSS Example</title><link rel="stylesheet" href="style.css"></head><body><div class="container"><div class="header"><h1>Website Header</h1></div><div class="main-content"><div class="sidebar"><h2>Sidebar</h2><p>This is the sidebar content.</p></div><div class="content"><h2>Main Content</h2><p>This is the main content area.</p></div></div><div class="footer"><p>Website Footer</p></div></div></body></html>

在网页设计中，使用 DIV 和 CSS 可以实现多种常见的布局方案。以下是几种常见的典型布局示例，涵盖了响应式布局、网格布局等。

1. 标准网页布局
这是最基础的布局，包含一个顶部导航栏（Header）、主要内容区（Main）、侧边栏（Sidebar）和底部页脚（Footer）。

HTML

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Standard Layout</title><link rel="stylesheet" href="style.css"></head><body><div class="header"><h1>Header</h1></div><div class="main-content"><div class="sidebar"><h2>Sidebar</h2><p>Links or additional content here</p></div><div class="content"><h2>Main Content</h2><p>Main page content goes here.</p></div></div><div class="footer"><p>Footer</p></div></body></html>

布局说明：

header 作为页面的顶部导航栏。

main-content 使用了 display: flex 来创建一个水平布局，将侧边栏（sidebar）和主内容区（content）并排显示。

2. 双栏布局（两列布局）
双栏布局是指一侧为主内容，另一侧为侧边栏。这种布局常用于博客或新闻类网站。

HTML

<div class="container"><div class="main"><h2>Main Content</h2><p>Main content goes here...</p></div><div class="sidebar"><h2>Sidebar</h2><p>Sidebar content...</p></div></div>

布局说明：

使用 display: flex 创建一个双栏布局。

flex: 3 和 flex: 1 分别控制主内容和侧边栏的宽度比例，主内容占 3/4，侧边栏占 1/4。

3. 三栏布局（两侧边栏）
三栏布局是指在主内容的左右两侧分别有一个侧边栏。此布局常用于复杂信息展示的网站。

HTMLhtml

<div class="container"><div class="left-sidebar"><h2>Left Sidebar</h2></div><div class="main"><h2>Main Content</h2></div><div class="right-sidebar"><h2>Right Sidebar</h2></div></div>

布局说明：

左右两侧为侧边栏，中间为主内容区。

通过 flex 设置宽度比例：左右侧边栏各占 20%，中间内容区占 60%。

4. 圣杯布局（Holy Grail Layout）
圣杯布局是一种经典的三栏布局，左右栏为固定宽度，中间内容区自适应。它适合在页面宽度较小时，左右栏依然显示但不影响主内容。

HTML

<div class="container"><div class="header">Header</div><div class="main"><div class="left-sidebar">Left Sidebar</div><div class="content">Main Content</div><div class="right-sidebar">Right Sidebar</div></div><div class="footer">Footer</div></div>

布局说明：

中间内容区域自适应扩展，左右栏保持固定宽度。

使用 Flexbox 可以确保布局适应各种设备屏幕。

5. 网格布局（CSS Grid）
网格布局是一个更灵活的布局方式，允许你以二维方式排列内容。适合复杂的页面布局设计。

HTML

<div class="grid-container"><div class="header">Header</div><div class="main">Main Content</div><div class="sidebar">Sidebar</div><div class="footer">Footer</div></div>

布局说明：

display: grid 使用网格布局，定义了四个区域：header、main、sidebar 和 footer。

通过 grid-template-areas 来定义各个部分在页面中的排列方式。

通过这几种典型布局，开发者可以创建适合不同网站需求的页面结构。CSS 提供了强大的工具来实现这些布局，无论是简单的两列布局还是复杂的网格布局。

4.综合案例--众成远程教育

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>众成远程教育</title><style>* {margin: 0px auto;}.all {width: 1000px;height: 840px;background-image: url(img/9-bg.jpg);}.top {width: 1000px;height: 150px;}.main {background-color: aliceblue;width: 1000px;height: 630px;}.left {padding-top: 30px;padding-left: 20px;width: 200px;height: 570px;float: left;line-height: 60px;}.center {border-left: 2px dashed blue;border-right: 2px dashed blue;padding-top: 50px;width: 500px;height: 580px;float: left;}.right {padding-left: 20px;width: 250px;height: 630px;float: left;}.footer {width: 1000px;height: 60px;font-family: "楷体";font-size: 18px;text-align: center;line-height: 30px;}a, span {color: red;font-weight: 700;}p {font-family: "黑体";font-weight: 700;color: brown;font-size: 28px;text-align: center;}table {font-family: "黑体";font-weight: 700;color: blue;font-size: 20px;line-height: 55px;}</style>
</head>
<body><div class="all"><div class="top"><img src="img/9-logo.jpg" width="708px" height="150px" /></div><div class="main"><div class="left"><p><img src="img/but2.jpg" /></p ><p><img src="img/but3.jpg" /></p ><p><img src="img/but4.jpg" /></p ><p><img src="img/but5.jpg" /></p ><p>相关信息</p><a href="#">4大学历提升方案</a><br><a href="#">新报考政策解读击</a><br><a href="#">6大类专业报考指南</a><br><a href="#">更多信息请点击</a></div><div class="center"><p>入学报名表</p><form id="form2" name="form2" method="post" action="#"><table width="400" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="158" align="right">姓名:</td><td width="242"><input type="text" name="textfield" id="textfield" /></td></tr><tr><td align="right">联系电话:</td><td><input type="text" name="textfield2" id="textfield2" /></td></tr><tr><td align="right">邮箱:</td><td><input type="text" name="textfield3" id="textfield3" /></td></tr><tr><td align="right">资料邮寄地址:</td><td><input type="text" name="textfield4" id="textfield4" /></td></tr><tr><td align="right">最高学历:</td><td><select name="select2" id="select2"><option>大学本科</option><option>大专</option><option>高中</option><option>初中</option><option>小学</option></select></td></tr><tr><td align="right">选择的课程:</td><td><input type="text" name="textfield6" id="textfield6" /></td></tr><tr><td align="right">意向学习方式:</td><td><select name="select" id="select"><option>网络授课</option><option>周末班</option><option>全日制</option></select></td></tr><tr><td colspan="2" align="center"><input type="image" name="imageField" id="imageField" src="img/but1.jpg" /></td></tr></table></form></div><div class="right"><img src="img/pho1.jpg" /><img src="img/pho2.jpg" /><img src="img/pho3.jpg" /><img src="img/pho4.jpg" /></div></div><div class="footer"><span>免费电话:</span>400-XXX-XXX(18条线)|| <span>(北京校区)</span>北京路XX大厦一楼0000号; || <span>(上海校区)</span>上海路XX科技园7栋9999号<br>此网站信息最终解释权&copy;众成远程教育</div></div>
</body>
</html>

第九章 DIV+CSS布局

1.DIV+CSS概述

2.DIV+CSS的应用

3.DIV+CSS的典型布局

4.综合案例--众成远程教育

相关资讯

热文排行

最新新闻

推荐新闻

热搜词