JavaWeb-CSS（选择器，页面定位，行元素块元素行内块元素之间的转换，层的浮动，表格布局页面，div和css布局页面）

最新推荐文章于 2024-08-29 14:21:21 发布

可儿可爱

最新推荐文章于 2024-08-29 14:21:21 发布

阅读量326

点赞数

文章标签： css p2p html

本文链接：https://blog.csdn.net/weixin_62520626/article/details/122233458

版权

本文详细介绍了HTML中的行标签、块标签、行内块标签及其特点，探讨了纯净的行标签和块标签，以及CSS的基础概念、结合方式、选择器类型（包括ID、类、标签、伪类等）以及样式优先级。此外，还讨论了元素定位、浮动布局、页面布局（如表格和div）和CSS属性选择器的应用。内容涵盖了从基础到进阶的HTML和CSS知识，适合初学者和开发者参考。

摘要由CSDN通过智能技术生成

1.行标签和块标签

行标签：默认不会占据一整行的标签，内容有多宽，就占据多宽 b font s u
块标签：就是该标签默认会占据一行的标签 h1 hr ul li
行内块标签：具有一些行标签和块标签的特点 button

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 
		   行标签：默认不会占据一整行的标签，内容有多宽，就占据多宽  b   font  s   u
		   
		   块标签：就是该标签默认会占据一行的标签 h1  hr  ul li
		 
		   行内块标签：具有一些行标签和块标签的特点  button
		 
		 -->

		<h1>这是一个标题标签</h1> <b>后面的标签</b>

		<ul>
			<li>asdfasfasf</li>
			<li>asdfasfasf</li>
			<li>asdfasfasf</li>
			<li>asdfasfasf</li>
			<li>asdfasfasf</li>
			<li>asdfasfasf</li>
		</ul>

		<font size="4" color="">这是行标签</font>
		<font size="4" color="">这是行标签</font>
		<font size="4" color="">这是行标签</font>
		<b>这也是行标签</b>
	</body>
</html>

2.纯净的行标签和块标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		  纯净的块标签： div 就是这个标签，是一个纯净的块标签，所谓纯净，就是该表签，不带任何样式，默认，没有背景颜色，没有字体大小，没有高度等待一些样式  正是因为他纯净，我们才会配合CSS来设置他的样式
		 
		 纯净的行表签： sapn  是一个行标签，不带有任何样式，我们在设置文本样式时，可以使用它来配合CSS 来设置文本的样式
		 
		 -->

		<h1>阿三发射点发射点发</h1>

		<div>asdfasdfasdfasdf</div>
		<div>asdfasdfasdfasdf</div>
		<div>asdfasdfasdfasdf</div>
		<div>asdfasdfasdfasdf</div>

		<div>asdfasdfasdfasdf</div>
		<div>asdfasdfasdfasdf</div>
		
		
		<b>asfasdfasdfasfasfsaf</b>
		<s>asdfasdfasdfasdfasdfsaf</s>
		<u>asdfasdfasdfasdfasdfasdfasfd</u>
		
		<span>asdfasfasdfasdfasdfasdfs</span>
		<span>asdfasfasdfasdfasdfasdfs</span>
		<span>asdfasfasdfasdfasdfasdfs</span>
		<span>asdfasfasdfasdfasdfasdfs</span>
		<span>asdfasfasdfasdfasdfasdfs</span>
		<span>asdfasfasdfasdfasdfasdfs</span>
		

	</body>
</html>

3.CSS的概念

1.实现了样式和html的代码分离。
2.弥补html对属性的的控制不足。
3.精确的控制页面的布局。
4.可以提高页面的执行效率。
5.css还有特殊的功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- CSS：英文全称：Cascading Style Sheets,层叠样式表，作用就是来修饰HTML表签所展示的样式，使表签的样式展示更加丰富，HTML表签自带的样式以及属性，不能满足我们丰富的样式要求
		那么我们可以使用CSS来做，因为他有大量丰富的样式来满足我们的需求，一旦我们学习了CSS 就很少使用表签自带的属性来调整样式了。
		这个表签展示成什么样子，那就交由CSS来控制 
		
		
		-->
		
		<font size="7" color="red">表签自带的属性来控制样式</font>
		
		<span style="font-size: 30mm;color: green">CSS来控制这行文本的样式</span>
		
		
	</body>
</html>

4.CSS和HTML的结合方式

1.内联样式，就是把CSS代码，写到HTML表签的内部，每一个HTML表签，都有一个style 这个属性，那这个属性的值，就是CSS代码
缺点：一次只能控制一个表签的样式，复用性差，书写凌乱
<span style="css属性名:值;css属性名:值;css属性名:值">aasdfasdf</span>
<font style="css属性名:值;css属性名:值;css属性名:值">asfasfasfasfasd</font>

2. 内部样式：在HTML页面上head表签内部提供style表签，然后配合选择器，控制一个和多个表签的展示样式
选择器：选中一个或多个表签的语法优点，可以提高CSS代码的复用性，缺点，只能控制一个HTML页面的展示样式

3.外部样式：将CSS代码单独写到要给文件中，可以一次控制一个或多个页面的展示样式，大大提高了CSS代码的复用性，开发首选 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#bb {
				color: aqua;
				font-size: 100px;
			}
			
			h1{
				color: gold;
			}
		</style>
	</head>
	<body>
		<!-- CSS和HTML的结合方式
		1.内联样式，就是把CSS代码，写到HTML表签的内部，每一个HTML表签，都有一个style 这个属性，那这个属性的值，就是CSS代码
		  缺点：一次只能控制一个表签的样式，复用性差，书写凌乱
		<span style="css属性名:值;css属性名:值;css属性名:值">aasdfasdf</span>
		<font style="css属性名:值;css属性名:值;css属性名:值">asfasfasfasfasd</font>
		
		2. 内部样式：在HTML页面上head表签内部 提供style表签，然后配合选择器，控制一个和多个表签的展示样式
		选择器：选中一个或多个表签的语法  优点，可以提高CSS代码的复用性，缺点，只能控制一个HTML页面的展示样式
		
		3.外部样式：将CSS代码单独写到要给文件中，可以一次控制一个或多个页面的展示样式，大大提高了CSS代码的复用性，开发首选 -->

		<font style="color: red;font-size: 30px;font-family: 楷体;">内联样式，就是把CSS代码，写到HTML表签的内部，每一个HTML表签，都有一个style
			这个属性，那这个属性的值，</font>

		<span style="color: green;font-size: 30px;font-family: 楷体;">内联样式，就是把CSS代码，写到HTML表签的内部，每一个HTML表签，都有一个style
			这个属性，那这个属性的值，</span>

		<b id="bb">阿三发射点发射点发射点</b>

		<h1>啊手动阀手动阀</h1>
		<h1>啊手动阀手动阀</h1>

		<h1>啊手动阀手动阀</h1>
		<h1>啊手动阀手动阀</h1>
		<h1>啊手动阀手动阀</h1>
		<h1>啊手动阀手动阀</h1>
		<h1>啊手动阀手动阀</h1>

		<h1>啊手动阀手动阀</h1>

	</body>
</html>

外部样式：

a.css:

h1{
	color: red;
}

b.css:

h1{
	color: #FFD700;
}

public.css:

body{
	background: greenyellow;
}

a.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用css文件 -->
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/a.css"/>
	</head>
	<body>
		<h1>A页面</h1>
	</body>
</html>

b,html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/b.css"/>
	</head>
	<body>
		<h1>B页面</h1>
	</body>
</html>

5.id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* id 选择器 前面使用 #
		 id选择器，一次只能选中一个表签，进行样式的控制
		 
		 */
			#myh1 {
				color: red; 
				font-family:'楷体';
				font-size:20px;
				
			}
			#mydiv{
				color: red;
				font-family:'楷体';
				font-size:20px;
				/* 加粗 100---900 bolder bold */
				font-weight:bold; 
			}
		</style>
	</head>
	<body>
		<!-- 注意每个表签的 id值时唯一的，不能有重复的 -->
		<h1 id="myh1">阿斯顿发射点法大师傅</h1>
		
		<div id="mydiv">
			纯净的div表签
		</div>
	</body>
</html>

6.class选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* class 选择器 以 点开头  可以选择多个表签进行控制 */
			.myh{
				color: red;
			}
			#one{
				font-size: 10px;
			}
		</style>
	</head>
	<body>
		<!-- classs属性值，多个表签可以一样 -->
		<h1 class="myh" id="one">阿斯顿发生发生大</h1>
		<h1 class="myh">阿斯顿发生发生大</h1>
		<h1 class="myh">阿斯顿发生发生大</h1>
		<h1 class="myh">阿斯顿发生发生大</h1>
		<h1 class="myh">阿斯顿发生发生大</h1>

		<h1 class="myh">阿斯顿发生发生大</h1>
		<h1 class="myh">阿斯顿发生发生大</h1>
		<h1 class="myh">阿斯顿发生发生大</h1>

		<h1 class="myh">阿斯顿发生发生大</h1>
		<h1 class="myh">阿斯顿发生发生大</h1>
		<h1 class="myh">阿斯顿发生发生大</h1>
		
		<font class="myh">adsffffffffffffff</font>

	</body>
</html>

7.标签名选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 表签名选择器，根据表签名称来选择 ，可以选中多个表签 */
			h1{
				color: #00FFFF;
			}
			li{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<h1>阿斯顿发射点发生</h1>
		<h1>阿斯顿发射点发生</h1>
		<h1>阿斯顿发射点发生</h1>
		<ul>
			<li>adsfadsfdsaf</li>
			<li>adsfadsfdsaf</li>
			<li>adsfadsfdsaf</li>
			<li>adsfadsfdsaf</li>
		</ul>
	</body>
</html>

8.包含选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 包含选择器 层层往里面选择*/
			#d1 ul li a{
				font-size: 30px;
			}
			
			#d2 ul li a{
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<ul>
				<li><a id="mya" href="#">adsfadsfadsfadsfds</a></li>
				<li><a href="#">adsfadsfadsfadsfds</a></li>
				<li><a href="#">adsfadsfadsfadsfds</a></li>
				<li><a href="#">adsfadsfadsfadsfds</a></li>
				<li><a href="#">adsfadsfadsfadsfds</a></li>
			</ul>
		</div>
		
		<div id="d2">
			<ul>
				<li><a id="mya" href="#">adsfadsfadsfadsfds</a></li>
				<li><a href="#">adsfadsfadsfadsfds</a></li>
				<li><a href="#">adsfadsfadsfadsfds</a></li>
				<li><a href="#">adsfadsfadsfadsfds</a></li>
				<li><a href="#">adsfadsfadsfadsfds</a></li>
			</ul>
		</div>
	</body>
</html>

9.通配符选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 全局统配，可以选中所有表签 */
			* {
				color: #ADFF2F;
			}
			/* 局部统配 */
			#d2 h1 *{
				color: #FFD700;
			}
		</style>
	</head>
	<body>
		<h1>啊手动阀手动阀</h1>
		<h2>啊的说法都是帆帆帆帆帆帆帆帆</h2>
		<font>啊多发点是否</font>
		<div id="">
			adsfasfadsfsf
		</div>

		<div id="d2">
			<h1>
				<ul>
					<li>adfasdfdsf</li>
					<li>adfasdfdsf</li>
					<li>adfasdfdsf</li>
					<li>adfasdfdsf</li>

				</ul>
				<ol>
					<li>adfasdfdsf</li>
					<li>adfasdfdsf</li>
					<li>adfasdfdsf</li>
					<li>adfasdfdsf</li>
				</ol>
			</h1>
		</div>
	</body>
</html>

10.伪类选择器

1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活（按下）状态 a:active
其中的hover 和active 可以用于其他控价

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
			 伪类选择器，是针对 a 表签的四种状态来进行选择的
			 链接状态
			 鼠标移上状态
			 鼠标按下状态
			 链接访问过后的状态
			 */
			/* 链接状态 */
			a:link {
				color: #FFD700;
				/* 去掉a标签的下划线 */
				text-decoration:none;
			}

			/* 鼠标移上状态 */
			a:hover {
				font-size: 30px;
				color: aqua;
				/* 去掉a标签的下划线 */
				text-decoration: none;
			}

			/* 鼠标按下状态 */
			a:active {
				color: #FF0000;
				/* 去掉a标签的下划线 */
				text-decoration: none;
			}

			/*链接访问过后的状态  */
			a:visited {
				color: brown;
				/* 去掉a标签的下划线 */
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a href="a.html">跳到a页面</a>
		<a href="b.html">跳到b页面</a>
	</body>
</html>

11.伪类选择的鼠标悬浮和按下状态对其他标签也起作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 200px;
				width: 200px;
				background-color: #00FFFF;
			}
			/* 鼠标悬浮 */
			#d1:hover{
				height: 300px;
				width: 300px;
				background-color:red;
			}
			/* 鼠标按下 */
			#d1:active{
				background-color:yellow;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
</html>

12.选择器优先级

在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高 2、类选择器 3、标记选择器
!important>内联样式>id选则器>class选则器>标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 多个选择器，选中了同一个表签，如果他们控制的样式没有冲突，就叠加生效
		 
		 如果多个选择器控制同一个表签的样式，有冲突呢？ 那听哪个选择器的呢?
		 根据选择器的优先级来决定
		 !important>内联样式>id选择器>class选择器>标签名选择器
		 
		 */
			#myh1{
				color: red;
			}
			.aa{
				background-color: #ADFF2F;
				color: #FFFF00;
			}
			h1{
				/*  !important 让此样式的优先级最高*/
				color: blue !important;
				font-size: 100px;
			}
		</style>
	</head>
	<body>
		
		<h1 id="myh1" class="aa" style="color: pink;">阿斯蒂芬撒地方</h1>
	</body>
</html>

13.子选择器

div >p{
意思是 div 里面所有的子标签p 都被会选中注意对孙子标签是不起作用的
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#fu>h1 {
				color: red;
			}

			#fu2>h1 {
				color: yellow;
			}

			div h1 {
				background-color: gainsboro;
			}
		</style>
	</head>
	<body>
		<div id="fu">
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h2>22222222</h2>
			<h2>22222222</h2>
			<h2>22222222</h2>
			<h2>22222222</h2>
			<h2>22222222</h2>
		</div>

		<div id="fu2">
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h1>阿斯顿发射点发大水</h1>
			<h2>22222222</h2>
			<h2>22222222</h2>
			<h2>22222222</h2>
			<h2>22222222</h2>
			<h2>22222222</h2>
		</div>
	</body>
</html>

14.相邻选择器

div +p{
意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p 之间隔着一个元素那是选不中的
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#one {
				height: 200px;
				width: 200px;
				/* 边框：粗细，边框颜色，线条样式 solid 实线 */
				border: 1px black solid;
				background-color: #FF0000;
			}
			/* + 相邻选择器 */
			#one+div {
				height: 200px;
				width: 200px;
				/* 边框：粗细，边框颜色，线条样式 solid 实线 */
				border: 1px black solid;
				background-color: blue;
			}
			
			#one:hover +div{
				background-color:yellow;
			}
			
		</style>
	</head>
	<body>
		<div id="one">
			1111
		</div>
		<div id="two">
			2222
		</div>
		
	</body>
</html>

15.相邻所有选择器

div ~p{
意思是选中 div 后面所有同级的p元素即使多个p 元素之间有隔着的其他元素也是能选中p元素
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1 {
				height: 200px;
				width: 200px;
				/* 边框：粗细，边框颜色，线条样式 solid 实线 */
				border: 1px black solid;
				background-color: #FF0000;
			}
			/* ~ 相邻所有选择器 */
			#d1~div {
				height: 200px;
				width: 200px;
				/* 边框：粗细，边框颜色，线条样式 solid 实线 */
				border: 1px black solid;
				background-color: blue;
			}
			
			#d1:hover ~div{
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			1111
		</div>
		<div id="" class="mydiv">
			00000
		</div>
		<div id="" class="mydiv">
			00000
		</div>
		<div id="" class="mydiv">
			00000
		</div>

	</body>
</html>

16.属性选择器

a[title] { 意思是选中 a标签里面只要有 title 这个属性的都会选中 }
a[title=num1] 意思是选中属性title=num1 的a 标签
a[title^=num] 选中title的属性值以num 开头的a标签
a[title$=num]选中title的属性值以num 结尾的a标签
a[title|=num] 选中title的属性值以num-连接的a标签如<a title=“num-ai”>
a[title~=num] 选中title的多个属性值以空格隔开的有其中一个属性值都能选中例如<a tilte=“num num2 num3”> 三个属性值你任意选一个都能选中比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签
a[title*=num] 选中title属性值包含num的都能选中例如<a title=“mynumaaaa”>
a[title=num][name=lisi] 多个属性选择意思是选中 title=num 并且 name=lisi 的这个a标签 <a title=“num” name=“lisi”>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 属性选择器 */
			[align] {
				color: red;
			}

			h1[align='left'] {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h1 align="center">111111</h1>
		<h1 align="left">111111</h1>
		<h1 align="right">111111</h1>
	</body>
</html>

17.过滤选择器（其他伪类选择器）

:first-letter	div:first-letter 选中div中的第一行的第一个字母或者汉字
:first-line	div:first-line 选中 div 中子元素第一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				font-size: 30px;
				font-weight: 900;
			}
			p::first-letter{
				font-size:50px;
				color: red;
			}
			p::first-line{
				background-color: #DCDCDC;
			}
		</style>
	</head>
	<body>
		<p>
			像我这样优秀人的，本该灿烂过一生
			<br>
			像我这样默默无闻的人，世上还有多少人
		</p>
	</body>
</html>

18.页面定位

元素的定位方式有相对定位和绝对定位两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
			  页面的原点位置，在左上角，第一个元素，就会跑到原点位置
			  页面元素默认使用的定位方式是相对定位
			  相对定位：第一个元素在原点位置，后面的元素参数他前面的元素
			  绝对定位：元素之前不参考，所有元素只参考原点位置。
			 
			 */
			
			button{
				/* 元素的定位方式：
				relative 相对定位，默认值 
				absolute 绝对定位
				
				*/
				position:relative;
			}
		</style>
	</head>
	<body>
		<button type="button">一个按钮</button>
		<button type="button">两个按钮</button>
		<button type="button">三个按钮</button>
	</body>
</html>

19.相对定位时元素之间的间距

相对定位设置四个方向的间距
margin-right: 20px;
margin-top: 50px;
margin-bottom: 200px;
margin-right: 20px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				position: relative;
				width: 200px;
				height: 200px;
				border: 1px black solid;
			}
			/* 
			相对定位：设置四个方向的间距
			
				margin-right: 20px;
			    margin-top: 50px;
				margin-bottom: 200px;
				margin-right: 20px; */
			#d1{
				background-color: red;
				margin-left: 120px;
			}
			#d2{
				background-color: #0000FF;
				margin-top: 50px;
				margin-bottom: 200px;
				margin-right: 20px;
			}
			#d3{
				margin-top: 150px;
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			11111
		</div>
		<div id="d2">
			2222
		</div>
		<div id="d3">
			3333
		</div>
	</body>
</html>

20.绝对定位设置间距

top:50px;
left:100px;
right: auto;
bottom: auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				position: absolute;
				
				width: 200px;
				height: 200px;
				border: 1px black solid;
			}
		/* 
		   绝对定位，设置元素距离原点位置：
		   
		   top:50px;
		   left:100px;
		   right: auto;
		   bottom: auto;
		 
		 */
			#d1{
				top:50px;
				left:100px;
				right: auto;
				bottom: auto;
				background-color: red;
				
			}
			#d2{
				top:80px;
				left:120px;
				background-color: #0000FF;
				
			}
			#d3{
				top:150px;
				left:200px;
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			11111
		</div>
		<div id="d2">
			2222
		</div>
		<div id="d3">
			3333
		</div>
	</body>
</html>

21.行标签块标签行内块标签对CSS样式的不同之处

行标签，设置上下间距不生效，设置左右间距是生效的
行内块标标签:设置上下左右间距是生效的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 块标签，对设置上下左右的间距是生效的 */
			h1{
				margin-top: 50px;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<!-- 行标签，设置上下间距不生效，设置左右间距是生效的。 -->
		<b style="margin-left: 200px;margin-top: 500px;">这是个行标签</b>
		<h1>这是个块标签</h1>
		
		
		<!-- 行内块标标签:设置上下左右间距是生效的， -->
		<button type="button" style="margin-left: 150px;margin-top: 500px;">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
		
		
	</body>
</html>

22.行元素块元素行内块元素之间的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				/* 把块元素，转换成行元素 */
				display: inline;
			}
			
			span{
				/* 把行元素，转换成块元素 */
				display: block;
				margin-top: 100px;
			}
		 h2{
			 /* 把块元素，转换成行内块元素 */
			 display: inline-block;
			 margin-top: 300px;
		 }
		 
		 div{
			 height: 300px;
			 width: 300px;
			 background-color:red;
			 /* none 可以隐藏块元素 */
			 display: none;
		 }
		</style>
	</head>
	<body>
		<h1>啊多发点是否</h1>
		<h1>啊多发点是否</h1>
		
		<span>asfasdfadsfasdf</span>
		<span>asfasdfadsfasdf</span>
		<span>asfasdfadsfasdf</span>
		<span>asfasdfadsfasdf</span>
		
		<h2>asdfasfasffsasddddddddddddddddddd</h2>
		<h2>asdfasfasffsasddddddddddddddddddd</h2>
		<h2>asdfasfasffsasddddddddddddddddddd</h2>
		<h2>asdfasfasffsasddddddddddddddddddd</h2>
		
		
		<div id="d1">
			
		</div>
		
	</body>
</html>

23.层的浮动

浮动：可以使块标签，一字排开 float: left

clear: left; 清除左浮动
clear: both; 清除左右浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 浮动：可以使块标签，一字排开 float: left;*/
			#d1{
				height: 300px;
				width: 300px;
				background: red;
				float: left;
			}
			#d2{
				height: 300px;
				width: 300px;
				background: green;
				float: left;
			}
				
			#d3{
				height: 300px;
				width: 300px;
				background:yellow;
				float:left;
			}
			
			#d4{
				height: 300px;
				width: 300px;
				background:pink;
			}
		</style>
	</head>
	<body>
	  <div id="d1">
	  	111
	  </div>
	  <div id="d2">
	  	222
	  </div>
	  <div id="d3">
	  	333
	  </div>
	  <!-- clear: left; 清除左浮动
	   clear: both; 清除左右浮动
	   -->
	  <div style="clear: both;"></div>
	  <div id="d4">
	  	444
	  </div>
	</body>
</html>

24.使用表格进行页面布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin-top: 0px;
				margin-left: 0px;
				margin-right: 0px;
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="" width="100%" height="40px">

			<tr>
				<td width="300px"></td>
				<td width="102px">
					<img src="img/logo.png">
				</td>
				<td align="center" width="200px">
					<font size="5">西部开源欢迎你！</font>
				</td>
				<td width="280px"></td>
				<td width="50px"><img src="img/phone1.png"></td>
				<td width="200px">029-86699937 88262419</td>
				<td width="300px"></td>
			</tr>
		</table>

		<table border="0" cellspacing="0"  width="100%">

			<tr>
				<td>
					<img src="img/linux.jpg" height="480px"  width="100%" >
				</td>
			</tr>
		</table>
	</body>
</html>

25.div和css布局页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				margin-top: 0;
			}

			#tubu {
				width: 100%;
				height: 400px;
				border: 1px black solid;
				/* 背景图片 */
				background-image: url(img/linux.jpg);
				/* 背景图片尺寸 */
				background-size: 100% 100%;
			}

			#dh {
				width: 100%;
				height: 80px;
				margin-top: 10px;
				border: 1px black solid;
			}

			#zuo {
				width: 25%;
				height: 600px;
				border: 1px black solid;
				float: left;

			}

			#zhong {
				width: 40%;
				height: 600px;
				border: 1px black solid;
				margin-left: 5%;
				float: left;
			}

			#you {
				width: 25%;
				height: 600px;
				border: 1px black solid;
				float: right;
				margin-right: -2px;
			}

			#dibu {
				margin-top: 10px;
				width: 100%;
				height: 400px;
				border: 1px black solid;
			}

			#box {
				margin-top: 10px;
			}

			.btn {
				margin-top: 10px;
				height: 60px;
				width: 150px;
				border: 1px black solid;
				float: left;
				margin-left: 5.5%;
				/* 文本左右居中 */
				text-align: center;
				/* 文本上下居中：取值就是外框的高度 */
				line-height: 60px;
				/* 边框圆角 */
				border-radius: 5px;
				background-color: skyblue;
				color: white;
				font-size: 20px;
				box-shadow: 5px 5px 5px gray;
			}

			.btn:hover {

				font-size: 21px;

			}

			a:link {
				color: white;
				text-decoration: none;
			}

			a:hover {
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="tubu">
			头部横幅
		</div>
		<div id="dh">
			<div class="btn">
				<a href="#">进入首页</a>
			</div>
			<div class="btn">
				<a href="#">学习原地</a>
			</div>
			<div class="btn">
				<a href="#">关于本站</a>
			</div>
			<div class="btn">
				<a href="#">学习资料</a>
			</div>
			<div class="btn">
				<a href="#">报名需知</a>
			</div>
			<div class="btn">
				<a href="#">联系我们</a>
			</div>
		</div>
		<div id="box">
			<div id="zuo">
				<table border="0" cellspacing="0" width="100%" height="100%">
					
					
					<tr>
						<td>Data</td>
						<td>Data</td>
					</tr>
					<tr>
						<td>Data</td>
						<td>Data</td>
					</tr>
					<tr>
						<td>Data</td>
						<td>Data</td>
					</tr>
					<tr>
						<td>Data</td>
						<td>Data</td>
					</tr>
					<tr>
						<td>Data</td>
						<td>Data</td>
					</tr>
					
				</table>
			</div>
			<div id="zhong">
				中
			</div>
			<div id="you">
				右
			</div>
		</div>

		<div id="" style="clear: both;">

		</div>
		<div id="dibu">
			底部
		</div>
	</body>
</html>

可儿可爱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-CSS（选择器，页面定位，行元素块元素行内块元素之间的转换，层的浮动，表格布局页面，div和css布局页面）

1.行标签和块标签行标签：默认不会占据一整行的标签，内容有多宽，就占据多宽 b font s u块标签：就是该标签默认会占据一行的标签 h1 hr ul li行内块标签：具有一些行标签和块标签的特点 button<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> &...
复制链接

扫一扫