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

第九章 DIV+CSS布局

时间：2024-11-15 19:14:38浏览次数：3  
标签：第九章 height width color DIV div CSS left

9.1 DIV+CSS概述

 DIV+CSS是Web设计标准，它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同，它可以实现网页页面内容与表现相分离。DIV组成了网页的格局，CSS 则装饰了格局，比如建一栋房子，开始的架子是DIV，架子搭建好后开始装饰，这个装饰就是CSS样式。用DIV+CSS布局的网页，它使HTML语言变得越来越复杂化、专用化， 源码容易扩展，并且更加规整。

9.1.1 认识DIV

div标签在Web标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<div></div>的形式存在，中间可以放置任何内容，包括其他的div标签。
但是在没有CSS的影响下，每个div标签只占据一行，即一行只能容纳一个div标签。

9.1.2 DIV的宽高设置

对div设置宽高样式，即div宽度和高度同时设置。

1 宽高属性

宽度:width 
       width:250px--设置宽值为250像素。 
       width:50%--设置宽值为父元素的百分之五十。 
       高度:height 
       height:250px-设置高值为250像素。 
       height:50%--设置高值为父元素的百分之五十。

2 div标签内直接设置宽高

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习</title>
	</head>
	<body>
		<div style="border: #0099ff solid 2px;width: 100px;height: 40px;">
	        标签内直接设置宽高
	    </div>
	</body>
</html>

执行结果

3 div使用选择器设置宽高

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习</title>
		<style type="text/css">
			.d1{
				width: 100px;
				height: 80px;
				border: #05fbff 3px solid;
			}
			#d2{
				width: 300px;
				height: 140px;
				border: #ff0004 3px solid;
			}
		</style>
	</head>
	<body>
		<div class="d1">设置宽高</div>
		<div id="d2">百分百设置宽高</div>
	</body>
</html>

执行结果

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

如果div的宽度设置了百分比，则相对其父元素相应改变宽度。但是div的高度则无法根据百分比相应改变。因为设置 div 的高度自适应是相对其父元素的高度而言，本例中 div 的父元素是浏览器本身，所以需要先定义父元素的宽高百分比。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习</title>
		<style type="text/css">
			.d1{
				width: 100px;
				height: 80px;
				border: #05fbff 3px solid;
			}
			*{
				width: 100%;
				height: 100%;
			}
			#d2{
				width: 50%;
				height: 40%;
				border: #ff0004 3px solid;
			}
		</style>
	</head>
	<body>
		<div class="d1">设置宽高</div>
		<div id="d2">百分百设置宽高</div>
	</body>
</html>

执行结果

9.2 DIV+CSS的应用

标准流(normal now)也叫常规流，文档流。在使用 div、span、p标签进行布局时，默认就是使用标准流进行布局。
标准流是垂直布局，是由块元素及其行内元素构成的。从上到下、从左到右按顺序摆放好,默认情况下，互相之间不存在层叠现象。

9.2.1 DIV元素的布局技巧

由于用户的计算机显示屏分辨率不同，因此在布局页面时，要充分考虑页面内容的布局资度情况，并保证页面整体内容在页面居中。一旦内容宽度超过显示宽度，页面将出现水平滚动条。应尽量保证网责具有垂直滚动条，才符合用户的习惯，所以高度不需要考虑，一般都是由页面内容决定网页高度即可。

又因为浏览器的兼容情况，所以在布局页面前，设计者一定要把页面的默认边距清除传统的表格布局时，可以使用属性“align:center;”设置表格居中问题，但是 DIV 的居中是没有属性可以设置的，只能通过CSS样式控制其位置。
使 div 元素水平居中的方法有多种，常用的方法是用CSS设置 div 的左右边距。

设置 div左外边距和右外边距的值为自动(auto)时，左外边距和右外边将相等，即达到了 div 水平居中的效果。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.d1{
				width: 100px;
				height: 80px;
				border: #05fbff 3px solid;
			}
			*{
				width: 100%;
				height: 100%;
			}
			#d2{
				width: 50%;
				height: 40%;
				border: #ff0004 3px solid;
			}
			#d3{
				width: 50%;
				height: 20%;
				border: #ffb8f4 3px solid;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body>
		<div class="d1">设置宽高</div>
		<div id="d2">百分百设置宽高</div>
		<div id="d3">DIV元素居中</div>
	</body>
</html>

执行结果

9.2.2 DIV元素的宽度自适应

有时会用到浮动效果，实现DIV元素的宽度自适应。宽度自适应是指两个并排的div其中左边的 div为固定宽度，右边div则根据浏览器的宽度自动调整，这种用法常用于文章列表和文章内容的页面布局。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#all{
				border: #05fbff 3px solid;
				height: 100px;
			}
			#left{
				border: #ff0004 3px solid;
				width: 100px;
				height: 100px;
				float: left;
			}
			#right{
				border: #ffb8f4 3px solid;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="all">
			<div id="left">左边固定</div>
			<div id="right">右边宽度自适应</div>
		</div>
	</body>
</html>

执行结果

9.2.3 DIV内容的居中

平时说的 div 内容居中，只是保持div 内容的水平居中。但是很多网站需要用到的是水平和垂直居中。这里用行高(line-height)属性来实现，当行高的值等于容器的高度值，内容便垂直居中。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			#d4{
				border: #00fbff 2px solid;
				width: 300px;
				height: 100px;
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="d4">DIV内容居中</div>
	</body>
</html>

执行结果

9.2.4 DIV元素的嵌套

传统的表格布局中，搜索引擎如果遇到多层表格嵌套时，可能抓取不到3层以上的内容，或者会跳过嵌套的内容直接放弃整个页面。

而 DIV+CSS布局则不会存在这样的问题，为了实现复杂的布局结构，div 元素也需要相嵌套。但在布局页面时尽量少嵌套，否则将影响浏览器对代码的解析速度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			.all{
				width: 700px;
				height: 700px;
				border: 2px solid red;
				margin: 0px auto;
			}
			.top{
				width: 700px;
				height: 100px;
				background-color: lightgreen;
			}
			.main{
				width: 700px;
				height: 520px;
			}
			.left{
				width: 180px;
				height: 500px;
				background-color: skyblue;
				float: left;
				margin: 10px;
			}
			.right{
				width: 480px;
				height: 500px;
				background-color: hotpink;
				float: left;
				margin: 10px;
			}
			.footer{
				width: 700px;
				height: 80px;
				background-color: lightgray;
			}
		</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的典型布局

设计者为了让页面外观与结构分离，就要用CSS样式来规范布局。使用CSS样式可以让代码更加简洁和结构化，使站点的访问和维护更加容易。 网页设计的第一步是版面布局的设计。通过前面的学习，我们已经对页面布局的技巧有了基本理解。本节将结合前面知识，展示目前较为常用的CSS布局样式。

9.3.1 左中右布局

左中右布局在网页设计时最为常用，即div-left是导航菜单，div-main 是视觉集中点，放置主要内容，div一right是表单或链接等。而左中右三个区域一并被包含在一个大的div-all中。

示例代码

<!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 上中下布局

上中下布局符合许多网站共同的特点，即 div-top是导航或者横幅广告，div-main 是视觉集中点，放置主要内容，div-footer 是版权信息等。而上中下三个区域一并被包含在一个大的 div-all 中。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			*{
				margin: 0px auto;
				padding: 0px auto;
				font-size:large;
			}
			.all{
				background-color:red;
				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 type="text/css">
			*{
				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: "楷体";
				font-size: 18px;
				text-align: center;
				line-height: 30px;
			}
			a,span{
				color: red;
				font-weight: 700;
				text-align: center;
			}
			p{
				font-family: "黑体";
				font-family: 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><br />
			</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="imageFied" id="imageFied" 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>

执行结果

标签：第九章,height,width,color,DIV,div,CSS,left
From： https://blog.csdn.net/songboy1/article/details/143804410

相关文章

  • css制作消息框
     css如下:        .msg{            width:200px;height:50px;            margin-bottom:20px;            background:#20B2AA;color:#fff;            text-align:center;line-height:50px;......
  • 前端CSS规范
     分号每个属性声明后面都要加分号。命名不使用id选择器适用有意义的名词命名单词全部小写，名词超过1个时，使用-分隔符属性声明顺序原则：整体到局部，外部到内部，重要属性优先.element{display:block;float:left;position:absolute;top:0;......
  • 第9章DIV+CSS布局
    9.1DIV+CSS概述9.1.1认识DIV无特殊作用，一个盒子9.1.2DIV的宽高设置9.1.2.1宽高属性宽度：width高度：height单位：可使用像素或者百分比9.1.2.2div标签内直接设置宽高使用style属性设置宽高9.1.2.3div使用选择器设置宽高可使用class，id等选择器9.1.2.4div高度的百......
  • 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......
  • 使用Tailwind CSS的几个小Tips
    前情TailwindCSS是一个原子类CSS框架，它将基础的CSS全部拆分为原子级别。它的工作原理是扫描所有HTML文件、JavaScript文件以及任何模板中的CSS类名，然后生成相应的样式代码并写入到一个静态CSS文件中。TailwindCSS快速、灵活、可靠、没有运行时负担。自从接触了Tai......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99