9.1 DIV+CSS概述
理解DIV元素：
<div>是一个块级元素，通常用于对页面上的内容进行分组或应用样式。
它本身没有特定的语义含义，但可以通过CSS来赋予各种布局和样式。
使用CSS进行布局：
CSS允许你控制<div>元素的位置、大小、颜色、边距等属性。
你可以使用CSS的position属性（如static、relative、absolute、fixed）来控制元素的定位。
创建布局：
固定布局：使用固定像素值来定义<div>的大小和位置。
流动布局：使用百分比和max-width等属性来创建响应式布局，使网页能够适应不同大小的屏幕。
使用CSS盒子模型：
盒子模型包括margin（外边距）、border（边框）、padding（内边距）和content（内容）。
通过调整这些属性，你可以控制<div>元素的外观和间距。
布局技巧：
清除浮动：使用clear属性或伪元素来清除浮动，防止布局问题。
Flexbox：一种现代的布局模式，可以简化复杂的布局设计。
Grid：另一种布局系统，允许你创建复杂的二维布局。
响应式设计：
使用媒体查询（Media Queries）来根据不同的屏幕尺寸应用不同的CSS规则。
确保布局在不同设备上都能保持良好的可读性和可用性。
实践和调试：
使用开发者工具（如Chrome的开发者工具）来测试和调试你的布局。
不断实践和调整，直到你得到满意的结果
9.1.1 认识DIV
认识DIV是网页设计中关于<div>元素的基础介绍。<div>元素在HTML中是一个通用的容器，用于对文档中的内容进行分组或应用样式。以下是一些关于<div>元素的基本知识点：
基本语法：
<div>
<!-- 内容 -->
</div>
块级元素：
<div>是一个块级元素，这意味着它会自动开始于新的一行，并且其后的内容也会在新的一行显示，除非使用CSS来改变其行为。
无默认样式：
<div>元素本身没有默认的样式，如边框、边距等，它仅作为一个容器存在。
分组内容：
<div>可以用来将页面上的不同部分进行逻辑分组，如头部、导航栏、内容区域、侧边栏和底部。
应用样式：
通过CSS，你可以为<div>元素添加样式，如背景颜色、宽度、高度、边距、对齐等。
CSS类或ID：
<div>元素可以通过class或id属性来应用特定的样式或进行JavaScript操作。
<div class="header"></div>
<div id="main-content"></div>
嵌套使用：
<div>元素可以嵌套使用，即一个<div>内部可以包含另一个或多个<div>，这有助于创建复杂的布局结构。
语义化：
虽然<div>元素本身没有语义含义，但可以通过适当的命名和结构来增强页面的语义化，使其更易于理解和维护。
布局工具：
在现代网页设计中，<div>元素常与CSS布局技术如Flexbox和Grid一起使用，以实现更复杂的布局设计。
响应式设计：
<div>元素在响应式设计中扮演重要角色，通过媒体查询和灵活的布局技术，可以使网页在不同设备上呈现出良好的布局效果。
了解<div>元素的基本知识后，你可以开始尝试使用它来构建网页的基本结构，并通过CSS来设计和实现布局。随着实践的深入，你将更加熟练地掌握如何使用<div>元素来创建各种网页布局。
9.2 DIV+CSS的应用
DIV+CSS是一种常用的网页布局方法，它的全称是"分割+层叠样式表"，主要用于实现网页的结构与样式分离。
在使用DIV+CSS布局时，首先将页面的结构划分为一个一个的独立区域，每个区域用一个DIV元素包裹起来。然后通过CSS样式来设置每个DIV元素的位置、大小、背景、边框等样式属性。这样，通过调整DIV元素的布局和样式，可以实现各种不同的网页布局效果。
DIV+CSS布局的优点如下：
1. 结构与样式分离，使得页面的维护更加方便。可以通过修改CSS样式表来改变整个网站的样式，而不需要逐个修改HTML结构。
2. 网页加载速度快，可以减少HTML代码的冗余，提高网页的加载速度。
3. 灵活性高，可以通过调整CSS样式来实现不同的布局效果，适应不同平台和设备的展示需求。
在应用DIV+CSS布局时，可以使用各种 CSS选择器来选择指定的DIV元素，然后设置样式。常用的CSS属性包括：position、width、height、margin、padding、background、border等。
总之，DIV+CSS是一种常用的网页布局方法，通过将页面的结构和样式分离，可以实现灵活、可维护的网页布局。
9.2.1 DIV元素的布局技巧
DIV元素是HTML中最常用的容器元素，它可以用来包裹其他HTML元素并进行布局。下面是一些常用的DIV布局技巧：
1. 使用CSS的float属性：可以将DIV元素设置为浮动，使其脱离正常的文档流，实现多列布局或文字环绕图片等效果。
例如：
```css
<div style="float: left; width: 50%;">左侧内容</div>
<div style="float: right; width: 50%;">右侧内容</div>
```2. 使用CSS的display属性：可以将DIV元素设置为inline-block，实现水平排列的效果。
例如：
```css
<div style="display: inline-block; width: 50%;">左侧内容</div>
<div style="display: inline-block; width: 50%;">右侧内容</div>
```3. 使用CSS的position属性：可以将DIV元素设置为绝对定位，实现层叠布局或定位到指定位置。
例如：
```css
<div style="position: absolute; top: 0; left: 0;">顶部内容</div>
<div style="position: absolute; bottom: 0; left: 0;">底部内容</div>
```4. 使用CSS的flexbox布局：可以使用flexbox属性对内部元素进行自适应布局，实现灵活的排列方式。
例如：
```css
<div style="display: flex;">
<div style="flex: 1;">左侧内容</div>
<div style="flex: 1;">右侧内容</div>
</div>
```这些布局技巧只是一些基本的用法，根据具体的需求和设计，还可以结合其他CSS属性和技巧进行更复杂的布局操作。
9.2.2 DIV元素的宽度自适应
要使一个DIV元素的宽度自适应，可以使用CSS的属性设置。
一种常见的方法是使用百分比来设置宽度。通过设置元素的宽度为百分比值，可以使其根据父元素的宽度进行自适应调整。例如，可以将DIV元素的宽度设置为100%来占据父元素的全部宽度。
```
<div style="width: 100%;">
内容
</div>
```另一种方法是使用CSS的flexbox布局。通过设置元素的display属性为flex，可以使其自动调整宽度以适应父元素的宽度。同时，可以使用flex-grow属性来指定元素在父容器中的相对宽度比例。
```
<div style="display: flex; flex-grow: 1;">
内容
</div>
```还可以使用CSS的grid布局。通过将父元素的display属性设置为grid，并使用grid-template-columns属性来定义网格列的宽度，可以使子元素按照指定的宽度进行布局。
```
<div style="display: grid; grid-template-columns: auto;">
内容
</div>
```这些方法都可以根据需要进行调整和组合，以实现DIV元素的自适应宽度。
9.2.3 DIV的内容的居中
要将DIV的内容居中，可以使用CSS的样式属性来实现。以下是几种常用的方法：
1. 使用flexbox布局（推荐）：
将DIV的父元素设置为display: flex，并使用justify-content和align-items属性来居中内容。例如：
```css
.parent {
display: flex;
justify-content: center;
align-items: center;
}
``````html
<div class="parent">
<div>内容</div>
</div>
```2. 使用text-align属性：
将DIV的父元素设置text-align: center来居中DIV内的文本内容。例如：
```css
.parent {
text-align: center;
}
``````html
<div class="parent">
<div>内容</div>
</div>
```3. 使用绝对定位和transform属性：
将DIV的父元素设置为相对定位（position: relative），然后将DIV设置为绝对定位（position: absolute）。将左右和上下偏移设为50%，再使用translate属性将内容向左上方移动自身宽度和高度的一半。例如：
```css
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
``````html
<div class="parent">
<div class="child">内容</div>
</div>
```这些方法可以根据具体的需求和布局结构选择使用，其中flexbox布局是最常用和灵活的方法。
9.2.4 DIV元素的嵌套
DIV元素的嵌套是指在一个DIV元素内部再嵌套另一个DIV元素。这种嵌套可以创建复杂的布局和设计，使页面结构更加有层次感。可以根据需要嵌套多层DIV元素。
例如，以下是一个DIV元素的嵌套示例：
```
<div class="outer">
<div class="inner">
<p>This is some text.</p>
</div>
</div>
```在上面的例子中，有一个外层的DIV元素，其class属性为"outer"，内部又嵌套了一个DIV元素，其class属性为"inner"。内部DIV元素中又包含了一个段落元素。
通过嵌套DIV元素，可以实现更复杂的页面布局和样式设计。可以使用CSS对嵌套的DIV元素进行样式定义和定位，使其呈现出不同的外观和排列方式。
9.3 DIV+CSS的典型布局
9.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: 580px;
float: left;
}
.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: "kaiti";
font-size: 18px;
text-align: center;
line-height: 30px;
}
a,span{
color: red;
font-weight: 700px;
text-align: center;
}
p{
font-family: "heiti";
font-weight: 700px;
color: blue;
font-size: 28px;
text-align: center;
}
table{
font-family: "heiti";
font-weight: 700px;
color: blue;
font-size: 20px;
line-height: 55px;
}
</style>
</head>
<body>
<div class="all">
<div class="top"><img src="img/9-logo.jpg"/></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="#">四大学历提升方案</a><br />
<a href="#">新报考解读击</a><br />
<a href="#">六大类专业报考指南</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" cellpadding="0">
<tr>
<td width="158" align="right">姓名：<label for="textfield"></label>
</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">意向学习方式：
<label for="select2"></label>
</td>
<td>
<select name="select2" id="select2">
<option>网络授课</option>
<option>周末班</option>
<option>全日制</option>
</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>
扫一扫
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
