首页 > 其他分享 >第9章DIV+CSS布局

第9章DIV+CSS布局

时间：2024-11-15 16:14:51浏览次数：3  
标签：color 布局 height width background DIV font CSS left

9.1 DIV+CSS概述

9.1.1 认识DIV

无特殊作用，一个盒子

9.1.2 DIV的宽高设置

9.1.2.1 宽高属性

宽度：width

高度：height

单位：可使用像素或者百分比

9.1.2.2 div标签内直接设置宽高

使用style属性设置宽高

9.1.2.3 div使用选择器设置宽高

可使用class，id等选择器

9.1.2.4 div高度的百分比设置问题

设置高度百分比时，需设置全局百分比，宽度则不需要

			*{
				height: 100%;
			}

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧

div居中设置（设置左右外边距自动）

				margin-left: auto;
				margin-right: auto;

9.2.2 DIV元素的宽度自适应

当左边盒子为固定宽度时，右侧盒子则根据浏览器设置而宽度自动调整

代码展示

			.all{
				height: 200px;
				border: #00aaff solid 3px;
			}
			.left{
				width: 200px;
				height: 100px;
				border: #005500 solid 3px;
				float: left;
			}
			.right{
				height: 200px;
				border: #ffaaff solid 3px;
				margin-left: 200px;
			}

图片展示

9.2.3 DIV内容的居中

属性：text-align

设置属性为center（水平居中）

text-align: center;

属性：height 和 line-height

当height 和 line-height像素相等时（垂直居中）

9.2.4 DIV元素的嵌套

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		.all{
			width: 700px;
			height: 700px;
			border: 2px solid red;
			margin: 0px auto;
		}
		.top{
			width: 700px;
			height: 100px;
			background-color: lightcyan;
		}
		.main{
			width: 700px;
			height: 520px;
		}
		.main .left{
			width: 180px;
			height: 500px;
			background-color: yellow;
			float: left;
			margin: 10px;
		}
		.main .right{
			width: 480px;
			height: 500px;
			background-color: lightgreen;
			float: left;
			margin: 10px;
		}
		.footer{
			width: 700px;
			height: 80px;
			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>

图片展示

9.3 DIV+CSS的典型布局

9.3.1 左中右布局

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></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>

图片展示

9.3.2 上中下布局

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></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>

图片展示

9.3.3 混合布局

上中下嵌套左中右

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0px auto;
				padding: 0px auto;
				width: 100%;
				height: 100%;
			}
			.all{
				border: 2px dashed red;
				width: 95%;
				height: 100%;
			}
			.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;
			}
			.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>

图片展示

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

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
			    margin: 0 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: "楷体", serif;
			    font-size: 18px;
			    text-align: center;
			    line-height: 30px;
			}
			a,span{
			    color: red;
			    font-weight: 700;
			    text-align: center;
			}
			p{
			    font-family: "黑体", serif;
			    font-weight: 700;
			    color: brown;
			    font-size: 28px;
			    text-align: center;
			}
			table{
			    font-family: "黑体", serif;
			    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">
									姓名:<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" 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>

图片展示

标签：color,布局,height,width,background,DIV,font,CSS,left
From： https://blog.csdn.net/2301_80799126/article/details/143769783

相关文章

  • css动态检测视口屏幕的尺寸
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>css动态检测屏幕的视口尺寸</title&g......
  • 使用css 画三角形的三种方法
    使用纯css绘制三角形方法一使用边框实现先实现一个div四个粗边框不同颜色保留左右和下边框设置左右边框为颜色为transparent<body><divclass="div1"></div><divclass="div2"></div><divclass="div3"></div>&l......
  • CSS复合选择器详解与应用指南
    CSS复合选择器详解与应用指南CSS复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，可以更准确、更高效地选择目标元素（标签）。以下是CSS复合选择器所有重要的基础知识点：一、复合选择器的类型1.后代选择器：又称为包含选择器，可以选择父元素里面的子元素。其写法......
  • Codeforces Round 986 (Div. 2)
    AB没什么好说的。C把我卡了。dp非常明显，最开始我想的是单向做，\(f[i][0/1]\)表示前\(i\)块蛋糕已经分出去了，01表示Alice是否拿过了，此时分给了几个人。尝试写写转移就知道为什么寄了。状态不够，没法表示答案。就算转移到了最后也没法得出我们需要的答案。可以发现，这个dp不好做的......
  • 第8章利用CSS制作导航菜单
    8.1水平顶部导航栏水平菜单导航栏是网站设计中应用最广泛的导航设计，一般放置在页面的顶部。8.1.1简单水平导航栏的设计与实现8.1.1.1导航栏的创建<nav>标签是HTML5新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内容整合，所以常用<nav>标签在页面上创建导航栏菜单......
  • 第九章 DIV+CSS布局
    9.1DIV+CSS概述9.1.1认识DIVdiv标签在Web标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<div></div>的形式存在，中间可以放置任何内容，包括其他的div标签。但是在没有CSS的影响下，每个div标签只占据一行，即一行只能容纳一个div标签。9.1.2DIV的宽高设置对div......
  • HarmonyOS ArkUI(基于ArkTS) 开发布局 （上）
    一 ArkUI(基于ArkTS)概述基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架，提供了构建应用UI所必需的能力点击详情特点开发效率高，开发体验好代码简洁：通过接近自然语义的方式描述UI，不必关心框架如何实现UI绘制和渲染。数据驱动U......
  • 使用Tailwind CSS的几个小Tips
    前情TailwindCSS是一个原子类CSS框架，它将基础的CSS全部拆分为原子级别。它的工作原理是扫描所有HTML文件、JavaScript文件以及任何模板中的CSS类名，然后生成相应的样式代码并写入到一个静态CSS文件中。TailwindCSS快速、灵活、可靠、没有运行时负担。自从接触了Tai......
  • 第九章DIV+CSS布局
    9.1DIV+CSS概述    DIV+CSS是Web设计标准，它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同，它可以实现网页页面内容与表现相分离。DIV组成了网页的格局，CSS 则装饰了格局，比如建一栋房子，开始的架子是DIV，架子搭建好后开始装饰，这个装饰就是CSS样式。用......
  • 响应式Web设计：纯HTML和CSS实现技巧
    响应式Web设计是一种确保网页在不同设备和屏幕尺寸下都能良好显示的设计方法。以下是使用纯HTML和CSS实现响应式设计的关键技巧：流式布局（FluidLayouts）：使用相对单位（如百分比）而非固定单位（如像素）来定义元素的宽度，使元素能根据容器宽度动态调整。媒体查询（MediaQueries）：根据不同......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99