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的典型布局
在网页开发中，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>在网页设计中，使用 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）并排显示。
footer 作为底部页脚，通常用于版权声明、链接等。
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>
此网站信息最终解释权©众成远程教育
</div>
</div>
</body>
</html>