编程语言
首页 > 编程语言> > JavaWeb-CSS(选择器,页面定位,行元素块元素行内块元素之间的转换,层的浮动,表格布局页面,div和css布局页面)

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>
	<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>

 

标签:color,标签,阿斯顿,元素,background,margin,选择器,页面
来源: https://blog.csdn.net/weixin_62520626/article/details/122233458