网页设计第九章DIV与CSS

1. `div` 元素

div元素是HTML中最常用的容器元素之一，用于在网页中创建块级元素。div是"division"的缩写，表示将页面分割成不同的区块。

div元素没有具体的语义，只是作为一个通用的容器使用。它可以包含其他HTML元素，如文本、图像、表格等，并且可以使用CSS样式来进行定位、布局和装饰。

<div> <p>This is a paragraph inside a div element.</p> <img src="image.jpg" alt="Image"> <table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> </div>

上述代码是一个包含段落、图像和表格的div元素示例。通过使用div元素，可以将这些元素包裹在一起，使它们组成一个独立的区块，并且可以对这个区块进行样式和布局的控制。

 <div id="header">
  <!-- 页眉内容 -->
</div>
<div id="content">
  <!-- 主内容 -->
</div>
<div id="footer">
  <!-- 页脚内容 -->
</div>复制

2. CSS 布局

CSS布局指的是将HTML元素进行排列和定位，以创建网页布局的方式。CSS布局可以通过以下几种方法实现：

盒子模型布局：使用CSS的box-sizing属性将元素的宽度和高度计算包括内边距和边框。通过设置元素的display属性为inline、block、inline-block等来实现水平或垂直排列。
弹性布局：使用CSS的flexbox属性可以在容器内部创建灵活的盒子布局。通过设置容器的display属性为flex或inline-flex，以及设置盒子的flex属性来实现元素的自动伸缩和对齐。
网格布局：使用CSS的grid属性可以创建网格布局，将元素放置在网格单元格中。通过设置容器的display属性为grid或inline-grid，以及使用grid-template-columns和grid-template-rows属性来定义网格的列和行。
定位布局：使用CSS的position属性可以将元素相对于其父元素或页面进行定位。常用的定位属性包括relative、absolute和fixed。可以通过设置元素的top、right、bottom和left来调整元素的位置。
多列布局：使用CSS的column属性可以将内容分割成多个列。通过设置容器的column-count和column-width属性来定义列数和列宽。
响应式布局：使用CSS的媒体查询可以根据不同的屏幕大小和设备类型来调整布局。通过设置不同的CSS规则，可以为不同的屏幕分辨率和设备提供不同的布局和样式。

以上是一些常见的CSS布局方法，每种方法都有其适用的场景和优劣点。在实际开发中，可以根据具体的需求选择合适的布局方法来实现网页布局。

2.1 盒模型（Box Model）

盒模型是Web页面中元素的基本布局模型，可以理解为元素在页面中被看作一个个矩形的盒子。盒模型由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。

内容区域（content）：指元素的实际内容，比如文字、图片等。
内边距（padding）：指内容区域与边框之间的空白区域。可以通过设置padding属性来调整。
边框（border）：指包围内容区域和内边距的线段。可以通过设置border属性来调整。
外边距（margin）：指边框与相邻元素之间的空白区域。可以通过设置margin属性来调整。

盒模型的大小由这些部分的宽度、高度来决定，可以通过设置width、height属性来调整。总体来说，一个元素的盒模型包括内容区域、内边距、边框和外边距这四个部分。

在使用CSS布局时，理解盒模型是非常重要的，可以通过调整各个部分的大小和属性来实现各种布局效果。

2.2 定位（Positioning）

定位（Positioning）是指在市场中确定和塑造一个产品、服务或品牌在消费者心目中的位置。定位是一种战略选择，通过在消费者心目中建立独特的形象和价值主张，以区别于竞争对手。

定位主要涉及以下几个方面：

目标市场：确定产品或服务的目标市场，即决定要面向的消费者群体。这可以通过人口统计、市场研究和消费者行为等数据来确定。
竞争优势：确定产品或服务的独特卖点，即产品或服务相对于竞争对手的优势。竞争优势可以是产品特性、价格、品牌形象、服务质量等方面。
价值主张：确定产品或服务的核心价值和收益，即消费者购买产品或服务的理由和好处。价值主张应该与目标市场的需求和期望相匹配。
品牌形象：确定产品或服务的品牌形象，即消费者对产品或服务的认知和感受。品牌形象应该与目标市场的价值观和偏好相一致。

定位的目的是让消费者能够在竞争激烈的市场中迅速识别和理解产品或服务的独特性和价值，从而决定是否购买。通过有效的定位策略，企业可以建立与目标市场的紧密联系，提高市场份额和竞争力。

2.3 浮动（Float）

浮动（Float）是一种CSS属性，用于定位元素在页面中的位置。浮动元素会相对于其父元素或其他浮动元素进行定位，并且会影响其他元素的位置。

当一个元素浮动时，它会脱离常规文档流，可以向左或向右移动，直到其边缘碰到其父元素或其他浮动元素的边缘为止。其他元素会围绕浮动元素进行布局，若没有足够的空间，则会被挤到下一行或下一列。

浮动元素可以使用以下CSS属性进行控制：

float:left;：将元素向左浮动。
float:right;：将元素向右浮动。
float:none;：取消元素的浮动状态。

浮动元素可能会导致父元素的高度塌陷（collapsed），即当父元素只包含浮动元素时，其高度会变为0。可以使用clear属性来解决这个问题。

浮动元素的应用场景包括：

创建多列布局。
实现图片和文字的环绕效果。
实现导航栏和菜单栏。

然而，由于浮动元素的特性，它们可能会对布局产生一些副作用，如导致元素重叠、文字环绕效果不佳、布局不稳定等。因此，在使用浮动元素时，需要谨慎考虑并进行适当的布局调整和清除浮动。

2.4 Flexbox 布局

Flexbox布局是一种用于网页设计的弹性布局技术。它可以帮助开发者轻松地创建适应不同屏幕大小和设备的布局。

Flexbox使用一个容器和它的子元素来创建布局。容器定义了一些属性，子元素则根据这些属性进行布局。

Flex容器的常见属性包括：

flex-direction：定义子元素的排列方向，可以是行（row）、列（column）、行反向（row-reverse）或列反向（column-reverse）。
justify-content：定义子元素在主轴上的对齐方式，可以是居中（center）、靠左（flex-start）、靠右（flex-end）等。
align-items：定义子元素在交叉轴上的对齐方式，可以是居中（center）、靠上（flex-start）、靠下（flex-end）等。
flex-wrap：定义是否允许子元素换行，可以是换行（wrap）或不换行（nowrap）。
align-content：定义多行子元素在交叉轴上的对齐方式，可以是居中（center）、靠上（flex-start）、靠下（flex-end）等。

Flex子元素的常见属性包括：

order：定义子元素的排列顺序。
flex-grow：定义子元素放大的比例。
flex-shrink：定义子元素缩小的比例。
flex-basis：定义子元素的初始尺寸。
align-self：定义子元素在交叉轴上的对齐方式，可以覆盖容器上的align-items属性。

Flexbox布局是一种强大而灵活的布局技术，可以简化网页布局的开发过程。它可以适应不同的屏幕大小和设备，并且能够自动调整子元素的尺寸和位置。

2.5 Grid 布局

Grid 布局是一种二维的布局系统，通过将网页的内容划分为行和列，使得元素的布局和对齐更加灵活。以下是 Grid 布局的一些基本概念和实现方法：

容器（Container）：使用 Grid 布局的元素称为容器。通常是一个父元素，用于包含具体的网页内容。
行（Rows）和列（Columns）：容器被划分为一系列的水平行和垂直列，用于放置网页元素。可以通过指定行和列的数量、大小和间距来定义布局。
网格线（Grid Lines）：行和列的交叉点称为网格线。可以用来对网页元素进行对齐和定位。
单元格（Grid Cell）：由四条相邻的网格线围成的矩形区域称为单元格。可以将网页元素放置在单元格中，实现精确的布局。
网格轨道（Grid Track）：相邻的网格线之间的空间称为网格轨道。可以用来定义单元格的大小和布局。
网格区域（Grid Area）：由多个单元格组成的区域称为网格区域。可以通过指定单元格的起始和结束位置来定义网格区域的大小和位置。

在实现 Grid 布局时，可以使用 CSS 的 display: grid; 属性将容器设置为 Grid 布局。然后使用 grid-template-columns 和 grid-template-rows 属性来定义行和列的数量、大小和间距。通过给具体的网页元素指定 grid-column 和 grid-row 属性，可以将其放置在指定的单元格中。

除了上述基本概念，Grid 布局还支持一些其他的属性和功能，如网格间距、网格对齐、网格线命名等。通过灵活运用这些属性和功能，可以实现各种复杂的网页布局效果。

总结起来，Grid 布局是一种强大而灵活的布局系统，可以帮助开发者更加方便地实现网页布局和对齐。它的兼容性也相对较好，适用于大部分现代浏览器。

 .grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 定义三列 */
  gap: 10px; /* 列与列之间的间隔 */
}复制

 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .container {
    display: flex;
  }
  .left-column {
    flex: 1; /* 占据剩余空间 */
    background-color: lightgrey;
    padding: 20px;
  }
  .right-column {
    flex: 2; /* 占据两倍于 left-column 的空间 */
    background-color: lightblue;
    padding: 20px;
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="left-column">
    <h2>左侧栏</h2>
    <p>这是左侧栏的内容。</p>
  </div>
  <div class="right-column">
    <h2>右侧栏</h2>
    <p>这是右侧栏的内容。</p>
  </div>
</div>
 
</body>
</html>复制

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>完整布局示例</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .header {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-align: center;
  }
  .nav {
    background-color: #444;
    color: white;
    padding: 10px;
  }
  .nav ul {
    list-style-type: none;
    padding: 0;
  }
  .nav ul li {
    display: inline;
    margin-right: 20px;
  }
  .nav ul li a {
    color: white;
    text-decoration: none;
  }
  .nav ul li a:hover {
    text-decoration: underline;
  }
  .main {
    float: left;
    width: 70%;
    padding: 15px;
    background-color: #f1f1f1;
  }
  .sidebar {
    float: left;
    width: 30%;
    padding: 15px;
    background-color: #ddd;
  }
  .footer {
    clear: both;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>我的网站</h1>
</div>
 
<div class="nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">联系我们</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</div>
 
<div class="main">
  <h2>主体内容</h2>
  <p>这是主体内容区域。在这里可以放置文章、图片、视频等内容。</p>
</div>
 
<div class="sidebar">
  <h2>侧边栏</h2>
  <p>这是侧边栏区域。通常用来放置广告、搜索框、链接列表等。</p>
</div>
 
<div class="footer">
  <p>版权所有 &copy; 2023 我的网站</p>
</div>
 
</body>
</html>复制

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例9.10</title>
		<style>
			.all {
				width: 1000px;
				height: 400px;
				border: 2px solid red;
				margin: 0px auto;
			}
 
			.top {
				width: 1000px;
				height: 50px;
				background-color: lightcyan;
			}
 
			.main {
				width: 1000px;
				height: 320px;
			}
 
			.main .left {
				width: 230px;
				height: 300px;
				background-color: yellow;
				float: left;
				margin: 10px;
			}
 
			.main .right {
				width: 730px;
				height: 300px;
				background-color: lightgreen;
				float: left;
				margin: 10px;
			}
 
			.footer {
				width: 1000px;
				height: 30px;
				background-color: lightgrey;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			<div class="main">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>复制

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例9.11</title>
		<style>
			* {
				margin: 10px auto;
				padding: 0px auto;
				font-size: large;
			}
 
			.all {
				background-color: red;
				width: 700px;
				height: 500px;
			}
 
			.left,
			.main,
			.right {
				text-align: center;
				height: 480px;
				line-height: 480px;
				float: left;
			}
 
			.left {
				background-color: antiquewhite;
				width: 150px;
			}
 
			.main {
				background-color: lightcyan;
				width: 400px;
			}
 
			.right {
				background-color: antiquewhite;
				width: 150px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="left">导航菜单</div>
			<div class="main">视觉集中区域，主要内容</div>
			<div class="right">表单或链接</div>
		</div>
	</body>
</html>复制

 <html>
	<head>
		<meta charset="utf-8" />
		<title>示例9.12</title>
		<style>
			* {
				margin: 0px auto;
				padding: 0px auto;
				font-size: large;
			}
 
			.all {
				background-color: red;
				text-align: center;
				width: 700px;
				height: 500px;
			}
 
			.top {
				background-color: antiquewhite;
				width: 680px;
				height: 80px;
				line-height: 80px;
			}
 
			.main {
				background-color: lightcyan;
				width: 680px;
				height: 340px;
				line-height: 340px;
			}
 
			.footer {
				background-color: antiquewhite;
				width: 680px;
				height: 80px;
				line-height: 80px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">导航或者横幅广告</div>
			<div class="main">视觉集中区域，主要内容</div>
			<div class="footer">版权信息</div>
		</div>
	</body>
</html>复制

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例9.13</title>
		<style>
			* {
				margin: 0px auto;
				/*设置浏览器元素水平居中*/
				padding: 0px auto;
				width: 100%;
				height: 100%;
				/*先设置父元素的宽度和高度为100%。*/
			}
 
			.all {
				border: 2px dashed red;
				width: 95%;
				height: 98%;
			}
 
			.top {
				background-color: pink;
				width: 100%;
				height: 15%;
			}
 
			.main {
				width: 100%;
				height: 75%;
			}
 
			.left {
				background-color: yellow;
				width: 20%;
				float: left;
			}
 
			.center {
				background-color: lightcyan;
				width: 60%;
				float: left;
			}
 
			.right {
				background-color: yellow;
				/*中间div的右侧div宽度自适应*/
			}
 
			.footer {
				background-color: pink;
				width: 100%;
				height: 10%;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			<div class="main">
				<div class="left"></div>
				<div class="center"></div>
				<div class="right"></div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>复制

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px auto;
				
			}
			.all{
				width: 1000px;
				height: 840px;
				background-image: url(img/764b371b5324c91d88b1f28d5990272.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/193e2e36174140fb579e64fd1bb8261.jpg"/></div>
			<div class="main">
				<div class="left">
					<p><img src="img/b3477344cbdad25e19df7d149143532.jpg"/></p >
					<p><img src="img/5d59b0d40f6757467060be8fb992cfa.jpg"/></p >
					<p><img src="img/83962f84c2fa955e20eea0f96511aaa.jpg"/></p >
					<p><img src="img/a0272700a36e6465f8dd586cd85e04a.jpg"/></p >
					<p>相关信息</p >
					四大学历提升方案<br />
					新报考解读击<br />
					六大类专业报考指南<br />
					更多信息请点击
				</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/14d973bfdab7a2aa75f0a63fffc2d69.jpg"/>
							</td>
						</tr>
					</table>
					</form>
				</div>
				<div class="right">
					<img src="img/273602823a329f55bbed6bd74beab68.jpg"/>
					<img src="img/8924bbc559c839db4a1eb1fc5e06e76.jpg"/>
					<img src="img/8e900644243bacf6c62d44139d7dc93.jpg"/>
					<img src="img/adfeb4204b794bf21add758e896c24b.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` 元素

2.1 盒模型（Box Model）

2.2 定位（Positioning）

2.3 浮动（Float）

2.4 Flexbox 布局

2.5 Grid 布局

运维工程师的基本功：CentOS的常用命令大全

jQuery Ajax重点

ECharts设置参数时this指向的改变

echarts--3D效果柱状图

Echarts实现折线图效果

vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

计算机毕业设计—43454 基于HTML5的智慧养老服务平台的设计与实现（源码免费领）

前端攻城狮HTML5自查手册

巧用 HTML 列表：＜ul＞、＜ol＞、＜dl＞的实用指南

Vue插值：双大括号标签、v-text、v-html、v-bind 指令

前端哥

【Linux笔记】基础IO(上)

Windows11离线安装wsl2(适用于 Linux 的 Windows 子系统)和Ubuntu

Linux 服务器运维常用命令大全

深入了解 Ubuntu 中的 build-essential：开发者的必备工具

RagFlow Docker Desktop Ollama DeepSeek-R1本地部署自己的本地AI大模型工具

Linux 学习必杀技：从菜鸟到高手的蜕变密码

Trae AI 全新功能 SSHremote助力开发者个人产品打造，高效构建全栈应用

Python Selenium全栈指南：从自动化入门到企业级实战

Spring Cloud之负载均衡之LoadBalance

【一篇搞定配置】一篇带你从配置到使用（PyCharm远程）完成服务器运行项目（配置、使用一条龙）【全网最详细版】

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000

3
在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000

4
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

5
CSS常用属性（文本属性）

2024-11-04 09:11:111000

6
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

7
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

8
vue使用datav echarts

2024-09-06 00:09:381000

9
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

10
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

	<div id="header">
	<!-- 页眉内容 -->
	</div>
	<div id="content">
	<!-- 主内容 -->
	</div>
	<div id="footer">
	<!-- 页脚内容 -->
	</div>

	.grid-container {
	display: grid;
	grid-template-columns: auto auto auto; /* 定义三列 */
	gap: 10px; /* 列与列之间的间隔 */
	}

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	.container {
	display: flex;
	}
	.left-column {
	flex: 1; /* 占据剩余空间 */
	background-color: lightgrey;
	padding: 20px;
	}
	.right-column {
	flex: 2; /* 占据两倍于 left-column 的空间 */
	background-color: lightblue;
	padding: 20px;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<div class="left-column">
	<h2>左侧栏</h2>
	<p>这是左侧栏的内容。</p>
	</div>
	<div class="right-column">
	<h2>右侧栏</h2>
	<p>这是右侧栏的内容。</p>
	</div>
	</div>

	</body>
	</html>

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>完整布局示例</title>
	<style>
	body {
	margin: 0;
	font-family: Arial, sans-serif;
	}
	.header {
	background-color: #333;
	color: white;
	padding: 10px 20px;
	text-align: center;
	}
	.nav {
	background-color: #444;
	color: white;
	padding: 10px;
	}
	.nav ul {
	list-style-type: none;
	padding: 0;
	}
	.nav ul li {
	display: inline;
	margin-right: 20px;
	}
	.nav ul li a {
	color: white;
	text-decoration: none;
	}
	.nav ul li a:hover {
	text-decoration: underline;
	}
	.main {
	float: left;
	width: 70%;
	padding: 15px;
	background-color: #f1f1f1;
	}
	.sidebar {
	float: left;
	width: 30%;
	padding: 15px;
	background-color: #ddd;
	}
	.footer {
	clear: both;
	background-color: #333;
	color: white;
	text-align: center;
	padding: 10px;
	}
	</style>
	</head>
	<body>

	<div class="header">
	<h1>我的网站</h1>
	</div>

	<div class="nav">
	<ul>
	<li><a href="#">首页</a></li>
	<li><a href="#">新闻</a></li>
	<li><a href="#">联系我们</a></li>
	<li><a href="#">关于</a></li>
	</ul>
	</div>

	<div class="main">
	<h2>主体内容</h2>
	<p>这是主体内容区域。在这里可以放置文章、图片、视频等内容。</p>
	</div>

	<div class="sidebar">
	<h2>侧边栏</h2>
	<p>这是侧边栏区域。通常用来放置广告、搜索框、链接列表等。</p>
	</div>

	<div class="footer">
	<p>版权所有 © 2023 我的网站</p>
	</div>

	</body>
	</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>示例9.10</title>
	<style>
	.all {
	width: 1000px;
	height: 400px;
	border: 2px solid red;
	margin: 0px auto;
	}

	.top {
	width: 1000px;
	height: 50px;
	background-color: lightcyan;
	}

	.main {
	width: 1000px;
	height: 320px;
	}

	.main .left {
	width: 230px;
	height: 300px;
	background-color: yellow;
	float: left;
	margin: 10px;
	}

	.main .right {
	width: 730px;
	height: 300px;
	background-color: lightgreen;
	float: left;
	margin: 10px;
	}

	.footer {
	width: 1000px;
	height: 30px;
	background-color: lightgrey;
	}
	</style>
	</head>
	<body>
	<div class="all">
	<div class="top"></div>
	<div class="main">
	<div class="left"></div>
	<div class="right"></div>
	</div>
	<div class="footer"></div>
	</div>
	</body>
	</html>

网页设计 第九章DIV与CSS

1. div 元素

2.1 盒模型（Box Model）

2.2 定位（Positioning）

2.3 浮动（Float）

2.4 Flexbox 布局

2.5 Grid 布局

微信扫一扫：分享

网页设计第九章DIV与CSS

1. `div` 元素