第九章：DIV+CSS布局

最新推荐文章于 2025-04-08 08:31:51 发布
最新推荐文章于 2025-04-08 08:31:51 发布
阅读量651 收藏 9
点赞数 25
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2402_87174692/article/details/143838518
版权

9.1 DIV+CSS概述


9.1.1 认识DIV

DIV是HTML中用于布局的块级元素，它允许开发者将页面分割成多个部分，每个部分可以有自己的样式和行为。在现代网页设计中，DIV元素与CSS结合使用，可以创建复杂的布局和响应式设计。

9.1.2 DIV的宽高设置


 9.1.2.1 宽高属性

在CSS中，`width`和`height`属性用于设置元素的宽度和高度。这些属性可以设置为像素值、百分比或其他CSS单位。

9.1.2.2 div标签内直接设置宽高

在HTML标签内直接设置宽高是一种不推荐的做法，因为它将样式与结构混合，不利于维护。正确的做法是在CSS中设置。

html

<div style="width: 200px; height: 100px;">内容</div>
9.1.2.3 div使用选择器设置宽高


使用CSS选择器设置宽高是推荐的做法，它保持了结构与样式的分离。

css

.box {
  width: 200px;
  height: 100px;
}

html

<div class="box">内容</div>
9.1.2.4 div高度的百分比设置问题


当使用百分比设置高度时，DIV的高度会相对于其父元素的高度来计算。如果父元素没有明确的高度，DIV的高度可能不会如预期显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <link type="text/css" href="css/index.css" rel="stylesheet"/> -->
		<style type="text/css">
			*{
				width: 100%;
				height: 100%;
			}
			.d1{
				width: 100px;
				height: 100px;
				border: #000000 solid 2px;
			}
			.d2{
				width: 50%;
				height: 50%;
				border: #000000 solid 2px;
			}
		</style>
	</head>
	<body>
		<div class="d1">数值</div>
		<div class="d2">百分比</div>
	</body>
</html>

9.2 DIV+CSS的应用


9.2.1 DIV元素的布局技巧

使用浮动（float）和定位（position）属性可以控制DIV元素在页面上的布局。

9.2.2 DIV元素的宽度自适应

通过设置`width: auto;`或使用`max-width`和`min-width`属性，可以使DIV元素的宽度自适应内容或视口宽度。

9.2.3 DIV内容的居中

使用`text-align: center;`可以水平居中内容，而垂直居中则可以通过`display: flex;`和`align-items: center;`实现。

css

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

html

<div class="center">内容</div>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <link type="text/css" href="css/index.css" rel="stylesheet"/> -->
		<style type="text/css">
			*{
				width: 100%;
				height: 100%;
			}
			.d1{
				width: 100px;
				height: 100px;
				border: #000000 solid 2px;
				margin: auto;
			}
			.d2{
				width: 50%;
				height: 50%;
				border: #000000 solid 2px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="d1">数值</div>
		<div class="d2">百分比</div>
	</body>
</html>

9.2.4 DIV元素的嵌套


DIV元素可以嵌套使用，以创建更复杂的布局结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <link type="text/css" href="css/index.css" rel="stylesheet"/> -->
		<style type="text/css">
			*{
				width: 100%;
				height: 100%;
			}
			div{
				border: #000000 solid 2px;
			}
			.d1{
				width: 100px;
				height: 100px;
				margin: auto;
			}
			.d2{
				width: 10%;
				height: 10%;
				border: #000000 solid 2px;
				margin: auto;
			}
			.da{
				margin: auto;
				width: 50%;
				height: 50%;
			}
			#db{
				width: 100px;
				float: left;
			}
			#dc{
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div class="d1">数值</div>
		<div class="d2">百分比</div>
		<div class="da">
			<div id="db">左边</div>
			<div id="dc">右边</div>
		</div>
	</body>
</html>

9.3 DIV+CSS的典型布局

9.3.1 左中右布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左中右布局</title>
<style>
  .container {
    display: flex; /* 使用flex布局 */
  }
  .left, .center, .right {
    flex: 1; /* 每个部分等宽 */
    height: 100px; /* 容器高度 */
    border: 1px solid #000; /* 边框 */
  }
  .left {
    background-color: #f00; /* 左边背景色 */
  }
  .center {
    background-color: #0f0; /* 中间背景色 */
  }
  .right {
    background-color: #00f; /* 右边背景色 */
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="left">左边</div>
  <div class="center">中间</div>
  <div class="right">右边</div>
</div>
 
</body>
</html>

使用浮动或Flexbox可以实现左中右布局。

css

.left, .right {
  float: left;
  width: 20%;
}
 
.center {
  margin: 0 20%;
}

html

<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>

9.3.2 上中下布局


使用Flexbox可以轻松实现上中下布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上中下</title>
<style>
  ​
  .container {
    display: flex;
    flex-direction: column;
  }
  
  .top, .middle, .bottom {
    flex: 1;
  }
</style>
</head>
<body>
<div class="container">
  <div class="top">顶部</div>
  <div class="middle">中间</div>
  <div class="bottom">底部</div>
</div>
</body>
</html>

css

.container {
  display: flex;
  flex-direction: column;
}
 
.top, .middle, .bottom {
  flex: 1;
}

html

<div class="container">
  <div class="top">顶部</div>
  <div class="middle">中间</div>
  <div class="bottom">底部</div>
</div>

9.3.3 混合布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左中右布局</title>
<style>
.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 视口高度 */
}
 
.header, .footer {
  flex: 0 0 auto; /* 不伸缩 */
}
 
.main {
  display: flex;
  flex: 1; /* 占据剩余空间 */
}
 
.left, .center, .right {
  flex: 1; /* 等分空间 */
}
 
.left {
  background-color: lightblue; /* 仅为了区分区域 */
}
 
.center {
  background-color: lightgreen;
}
 
.right {
  background-color: lightcoral;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="header">顶部</div>
  <div class="main">
    <div class="left">左侧</div>
    <div class="center">中间</div>
    <div class="right">右侧</div>
  </div>
  <div class="footer">底部</div>
</div>
</body>
</html>

混合布局结合了多种布局技术，以适应复杂的页面设计需求

9.4 综合案例——众成远程教育

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>众成远程教育</title>
		<style type="text/css">
			*{
				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;
					text-align: center;
				}
				p{
					font-family: "黑体";
					font-weight: 700px;
					color: brown;
					font-size: 28px;
					text-align: center;
				}
				table{
					font-family: "黑体";
					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" 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=" night" >姓名;<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=" 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" sre ="img/but1.jpg" />
		</td>
		</tr>
		</table>
		</form>
		</div>
		<div class="right">
		<img src="img/pho1.jpg" alt="" />
		<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>

运行结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>众成远程教育---布局</title>
	</head>
	<style>
		*{
			margin:0px auto;
			font-family:"宋体";
			font-size:30px;
			text-align:center;
			font-weight:700;
		}
		
		.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{
		width:200px;
		height:630px;
		float:left;
		}
		.center{
		border-left :2px dashed blue;
		border-right:2px dashed blue;
		width:500px;
		height:630px;
		float :left ;
		}
		.right{
			width: 250px;
			height: 630px;
			float: left;
		}
		.footer{
			width: 1000px;
			height: 60px;
		}
	</style>
	<body>
		<div class =" all">
		<div class =" top" >top</div><div class =" main" >
		<div class =" left" >left</div>
		<div class = " center" >center</div><div class = " right" >right</div></div>
		<div class =" footer" >footer</div></div>
	</body>
</html>

林中飞虎
关注
DIV＋CSS布局
zg0601的博客
10-17 1万+
DIV+CSS布局
第九章DIV+CSS布局
2302_80974792的博客
11-14 1000
DIV+CSS 是一种网页布局技术，它主要通过使用 HTML 中的 <div> 标签来定义网页上的各个区块，并利用 CSS（层叠样式表）来设置这些区块的样式和布局。这种技术与传统的表格布局相比，具有更多的优势，比如更好的可维护性、更灵活的布局方式以及对搜索引擎更加友好等。主要特点结构与表现分离：HTML 负责页面的内容结构，而 CSS 负责页面的表现形式（如颜色、字体、间距等）。这样的分离使得网站更容易维护，也便于更改设计风格。
HTML 第六章 CSS + DIV实现整体布局
Java软件工程师之路
04-18 2863
HTML 第七章 CSS + DIV实现局部布局 HTML 第六章 CSS + DIV实现整体布局 1、技术目标： 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2、什么是W3C标准？     W3C：World Wide Web Consortium，万维网联盟 ...
CSS定位与布局，详解div位置设置技巧
最新发布
04-08 444
个人更倾向于结合flex和grid布局，减少对绝对定位的依赖，以提升代码的可维护性。在网页布局中，元素作为最常用的容器之一，用于承载文本、图片等内容。absolute（绝对定位）：元素脱离文档流，相对于最近的非static定位祖先元素进行定位。static（默认定位）：元素遵循正常的文档流，无法通过top、bottom等属性调整位置。relative（相对定位）：元素基于其原始位置进行偏移，但原本的空间仍被保留。fixed（固定定位）：元素相对于浏览器窗口固定，常用于导航栏或悬浮按钮。
div+css布局
qq_62898618的博客
01-08 3478
1. position属性：用于定义一个元素是否：absolute（绝对），relative（相对），static（静态），或者fixed（固定） 1.1 absolute:绝对定位，距top和left的距离，一般与js结合使用，比如页面漂浮的广告。 1.2 relative：相对定位，指的是相对自己默认的位置。 1.3 static：默认 1.4 fixed：固定 2. z-index属性：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素 ...
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
热门推荐
icemwj的博客
10-05 2万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
第九章 DIV+CSS布局
whitesandcnm的博客
11-04 1903
DIV + CSS 是一种用于网页布局和样式设计的前端开发技术组合，通常用于替代传统的表格布局。它以结构与样式分离为核心理念，将HTML（结构）与CSS（样式）独立处理，提高网页的可维护性和兼容性。DIV 是 HTML 中的一个标签（），用于定义页面中的分块或容器元素，作为网页布局的基础。它本身没有任何样式，仅仅是一个结构上的容器。CSS（层叠样式表，Cascading Style Sheets）是一种样式表语言，用于控制网页元素的显示方式，包括颜色、字体、间距、布局等。
全面解析：Div+CSS布局技术与实践
11. **第一个CSS布局实例**：通过一个实际案例，演示如何设计和实现一个完整的CSS布局，包括布局规划、body样式定义和主要div的样式设定。 12. **自适应高度**：探讨如何实现元素高度的自适应，以便于响应式设计。 ...
CSS+DIV布局之道
tempsitegoogle
07-11 190
以前用CSS+DIV做过两个小项目，感觉并不是很通畅，觉得有必要在这方面补补课，最近又用CSS+DIV山寨了几个界面，算是练手吧，现在思路清晰多了，和大家分享。 一、为什么采用CSS+DIV布局？简单谈几点？ 首先，CSS+DIV布局对搜索引擎友好，为什么友好？是因为CSS+Div布局的代码简单，提高spider爬行效率，能在较短的时间内爬完整个页面，这样对收录质量有好处。真正的网...
Div+CSS 布局大全
01-06
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构， 然后再针对语义、结构添加 CSS。这篇文章将告诉你应该怎样把 HTML 结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该 转换成对应的什么 CSS 语句。当你解决了第一种问题，知道了如何结构化你的 HTML，我再给出一个列表，详细列出原来的表 现属性用什么 CSS 来代替。 结构化 HTML 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用 Photoshop 或者 Fireworks 画出来、切割成小图。最后再通过编辑 HTML 将所有设计还原表现在页面上。 如果你希望你的 HTML 页面用 CSS 布局(是 CSS-friendly 的)，你需要回头重来，先不考虑“外观”，要先思考你的页面 内容的语义和结构。 外观并不是最重要的。一个结构良好的 HTML 页面可以以任何外观表现出来，CSS Zen Garden 是一个典型的例子。CSS Zen Garden 帮助我们最终认识到 CSS 的强大力量。 HTML 不仅仅只在电脑屏幕上阅读。你用 photoshop 精心设计的画面可能不能显示在 PDA、移动电话和屏幕阅读机上。但 是一个结构良好的 HTML 页面可以通过 CSS 的不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的 目的，然后再根据这些内容目的建立起相应的 HTML 结构。
div+CSS布局
10-24
HTML之CSS布局的学习PDF文档；主要是div结合Css来实现网页效果
Div+CSS布局新手入门教程
liyunpopo的博客
12-22 1491
网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需...
DIV+CSS布局
guqigongzi的博客
03-17 201
三栏布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="test.css"> <style> .he...
DIV+css布局
wj18740503137的博客
10-05 198
DIV是块级元素；（块级元素是占用整个一行）span是内联元素；（内联元素是占用文本所需的一块) 具体效果如图所示： 盒模型：margin（盒子外边框） border（盒子边框）padding（盒子内边框） 盒模型主要用来控制各边框以及各块之间的布局 布局相关属性： 定位方式：1，relative 正常定位 2，adsolute 根据父元素进行定位 3，fixed 根据浏览窗口进行定位 4，static 没有定位 5.inherit 继承。 adsolute根据父元素进行定位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值