第四章浮动 ② 代码

一、课前小测试

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			.p1{
				border:3px solid red;
				height:200px;
				text-align:center;
				/*行高与高度一致，垂直居中*/
				line-height:200px;
			}
			.xiushi{
				border:2px dashed blue;
				/* 边框 顶部 外边距 */
				margin-top:10px;
				/* 首行缩进 两个字符 详细文本样式用法--->博客：第三章 CSS样式深入 ① 笔记 3.1.3 */
				text-indent:2em;
				height:600px;
				/*背景图片 详细背景样式用法--->博客：第三章 CSS样式深入 ① 笔记 3.3.4*/
				background:url(31.jpg) no-repeat center bottom / 200px 200px;
			}
		</style>
	</head>
	
	<body>
		<div class="p1">欢迎访问我的站点，请先<a href="#">登录</a></div>
		<div class="xiushi">这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容</div>
	</body>
</html>

运行结果如下：

二、当当图标标签类型块状/行内/行内块

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
	</head>
		<style>
			/*
			标签类型:
			块状标签: 独霸一行,可以设置宽和高。div,h1-h6,p
			行内标签: 挤在一行显示，不能设置宽和高。a,span,b,u,i
			行内块标签: 可以设置宽和高，挤在一行显示。img,input

			通过display可以改变元素类型
			display:none block inline inline-block

			*/
			.d1{
				border:1px solid red;
				width:400px;
				height:400px;
				background:orange url(ddw.png) no-repeat left top ;
				/*background:背景颜色 url() no-/repeat 位置 / 背景图片大小 */
				/*
				background:orange url(ddw.png) no-repeat left top / 80px 400px ;
				background:orange url(ddw.png) no-repeat left top / 80px 600px ;
				*/
			}

			a{
				border:1px solid gray;
				width:40px;
				height:40px;
				/*通过display设置为行内块*/
				display:inline-block;
				background-color:pink;
			}
			.a1{
				background:pink url(ddw.png) no-repeat  0px -160px; /* 横/纵方位上下移动时 +/-要搞清楚*/
			}

			.a2{
				background:pink url(ddw.png) no-repeat -40px -160px;
				
			}
		</style>
	<body>
		<div class="d1"></div>
		<a href="#" class="a1"></a>
		<a href="#" class="a2"></a>
		<a href="#" class="a3"></a>
		<a href="#" class="a4"></a>
	</body>
</html>

运行结果如下：

三、改变标签类型

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
		<!--
		标签分类:
		行内标签: span a b u i sub sup 挤在一行，不能设置宽和高
		块状标签: div p h1-h6 table form ul li ol 独霸一行(宽度100%)，可以设置宽和高
		行内块标签: img input 挤在一行，可以设置宽和高
		-->
		<style type="text/css">
			div{
				border:2px solid red;
				width:100px;
				height:100px;
				/* 用display改造为行内 */
				display:inline-block;
			}
			span{
				border:2px solid red;
				width:100px;
				height:100px;
				/*改为块状
				display:block;
				display:inline-block;*/
				/*隐藏元素*/
				display:none;
			}
			
			h1{
				border:2px solid red;
				width:100px;
				height:100px;
				display:inline;
			}
			a{
				border:2px solid blue;
				width:100px;
				height:100px;				
				display:block;
			}
			img{
				border:2px solid blue;
				width:100px;
				height:100px;
				display:block;
				display:inline-block;
			}
			/*h1-h6*/
			/*a*/
			/*img*/
		</style>
	</head>

	<body>
		<div>DIV1</div>
		<div>DIV2</div>
		<span>SPAN1</span>
		<span>SPAN2</span>

		<h1>H1</h1>
		<h1>H2</h1>
		<a href="#">A1</a>
		<a href="#">A2</a>
		<img src="31.jpg" width="100" height="100">
		<img src="31.jpg" width="100" height="100">
	</body>
</html>

运行结果如下：

四、网店目录菜单悬浮变色

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
		<style type="text/css">
			ul{
				/* border:1px solid red; */
				/*清除列表样式*/
				list-style:none;
				/*清除内填充*/
				padding-left:0px;
				/*清除外边距*/
				margin:0px;
				width:140px;
				/*设置ul背景*/
				background-color:black;
				
			}
			li{
				/*border:2px solid blue;*/
			}
			a{
				/* border:1px solid green; */
				display:block;
				height:40px;
				text-align:center;
				/*清除下划线*/
				text-decoration:none;   /* 注意 */
				line-height:40px;
				/*字体白色*/
				color:white;
				font-weight:bold;
			}
			li:hover {
				background-color:red;
			}
		</style>
	</head>
		
	<body>
		<ul>
			<li>
				<a href="#">这是菜单1</a>
			</li>
			<li>
				<a href="#">这是菜单2</a>
			</li>
			<li>
				<a href="#">这是菜单3</a>
			</li>
			<li>
				<a href="#">这是菜单4</a>
			</li>
			<li>
				<a href="#">这是菜单5</a>
			</li>
			<li>
				<a href="#">这是菜单6</a>
			</li>
		</ul>
	</body>
</html>

运行结果如下：

当鼠标悬浮在菜单上之后：

五、CSS选择器进阶全局/并集/交集选择器

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*全局选择器:匹配所有元素，一般用于重置样式
			*{
				margin:0px;
				padding:0px;
				list-style:none;
				border:2px solid green;
			}*/

			/*并集选择器用逗号分隔多个选择器
			h1,p,.xx{
				color:red;
			}*/

			/*请让li的第二个元素变为红色*/
			/*交集选择器:多个条件同时满足。通过标签选择器和类选择器,id选择器进行组合*/
			li.xx{
				color:red;
			}

			.xx{

			}

			li#d1{
				color:red;
			}
		</style>
	</head>

	<body>
		<h1>这是H1</h1>
		<p class="xx">这是P这是P</p>
			<ul>
			<li>这是一个LI1</li>
			<li class="xx">这是一个LI2</li>
			<li>这是一个LI3</li>
			<li id="d1">这是一个LI4</li>
		</ul>
 </body>
</html>

运行结果如下：

六、儿子/后代/孙子选择器

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*让所有的b变红
			b{
				color:red;
			}*/

			/*后代选择器: 用空格表示*/
			/*让div中的b变红
			div b{
				color:red;
			}*/

			/*子级选择器: 用大于号表示*/
			/*让div的儿子b变红
			div > b{
				color:red;
			}*/

			/*让div的孙子b变红*/
			div > span > b{
				color:red;
			}
		</style>
	</head>

	<body>
		<b>这是body下的b</b>
		<div>
			<b>这是DIV下的b</b>
			<span>
				<b>这是span下的b</b>
			</span>
		</div>
	</body>
</html>

运行结果如下：

七、属性选择器

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*属性选择器:用中括号表示*/
			/*让姓名框变红*/
			input[type='text']{
				border:1px solid red;
			}
			/*让密码框变绿，背景变黄*/
			[type="password"]{
				border:2px solid green;
				background-color:yellow;
			}
			/*让手机框变蓝，文字变红*/
			[name='sj']{
				border:2px solid blue;
				color:red;
			}
		</style>
	</head>

	<body>
		姓名:
		<input type="text" name="xm"/><br/>
		密码:
		<input type="password" name="mm"/><br/>
		手机:
		<input type="phone" name="sj"/><br/>
	</body>
</html>

运行结果如下：

八、伪类选择器默认/访问过/浮动/点击（之后的样式）

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*默认的链接样式*/
			a:link{
				color:red;
				font-size:20px;
			}
			/*访问过链接之后的样式*/
			a:visited{
				color:blue;
				font-size:30px;
			}

			/*鼠标悬浮到a上时的样式*/
			a:hover{
				color:green;
				font-size:40px;
				background-color:pink;
			}

			/*鼠标点击时的样式*/
			a:active{
				color:yellow;
				font-size:50px;
				background-color:#ff66ff;
			}

			div{
				color:red;
				border:2px solid black;
			}
		</style>
	</head>

	<body>
		<a href="#">这一个会变色的菜单</a>
		<div>
			这是一个div内容
			<span>
				这是一个span
			</span>
		</div>
	</body>
</html>

运行结果如下：

当鼠标悬浮在链接上边时显示：

当鼠标悬浮点击链接时显示：

九、文字缠绕

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color:red;
				float:left;
				/*float:right;
				float:none;*/
			}
		</style>
	</head>

	<body>
		<div>内容</div>环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字vvv
	</body>
</html>

运行结果如下：

十、浮动

代码如下：

<!DOCTYPE html >
<html>
 <head>
	<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			span{
				border:1px solid red;
			}

			.s2{
				float:left;
				width:100px;
				height:100px;
			}
			.s3{
				float:left;
			}
			.s1{
				float:left;
			}
		</style>
	</head>

	<body>
		<span class="s1">SPAN1</span>
		<span class="s2">SPAN2</span>
		<span class="s3">SPAN3</span>
	</body>
</html>

运行结果如下：

十一、浮动塌陷

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*
			元素浮动之后，高度变为0，底部空虚。后面元素趁虚而入，会挤上来
			*/
			.d1{
				width:100px;
				height:100px;
				border:1px solid red;
				float:left;
			}
			.d2{
				width:150px;
				height:150px;
				border:1px solid blue;
				float:left;
			}
			.d3{
				width:200px;
				height:200px;
				border:1px solid black;
				float:left;
			}
		</style>
	</head>

	<body>
		<div class="d1">这是DIV1这是DIV1这是DIV1这是DIV1</div>
		<div class="d2">这是DIV2这是DIV2这是DIV2这是DIV2</div>
		<div class="d3">这是DIV3这是DIV3这是DIV3这是DIV3</div>
	</body>
</html>

运行结果如下：

十二、浮动塌陷解决

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*浮动塌陷产生的原因，以及解决方案*/
			/*
			浮动塌陷原因:
			1.父容器没有高度
			2.父容器中所有的子元素都浮动
			此时导致父容器塌陷，父容器高度为0
			浮动塌陷的解决方法：
			1.父容器设置高度
			2.通过overflow设置hidden/auto,
			让父容器自动包裹子元素，解决塌陷问题(最常用的方法)
			3.在浮动元素的后面，添加一个新元素，
			设置元素的样式属性clear:both。会清除浮动元素的影响
			解决塌陷问题（额外添加标签，不常用）
			4.使用after伪类解决塌陷问题
			*/
			ul{
				border:5px solid red;
				list-style:none;
				padding:0px;
				/*height:100px;
				overflow:hidden;*/
			}
			/*通过after清除塌陷*/
			ul:after{
				/*在ul后面添加空字符串*/
				content:"";
				/*设置内容块状显示*/
				display:block;
				/*设置内容清除两边的浮动效果*/
				clear:both;
			}
			li{
				width:200px;
				border:3px solid blue;
			}
			.x1{
				height:50px;
				float:left;
			}
			.x2{
				height:30px;
				float:left;
			}
			.x3{
				height:80px;
				float:left;
			}
			.x4{
				/*清除浮动元素的影响
				clear:left
				clear:right
				clear:both
				clear:none
				*/
				clear:both
			}
			.d1{
				border:3px solid black;
				height:30px;
				background-color:yellow;
			}
			/*:after伪类可以在元素内部追加内容*/
			.mydiv:after{
				/*添加的内容*/
				content:"这是动态添加的内容";
				/*对添加的内容修饰*/
				color:red;
			}
		</style>
	</head>
	<body>
		<div class="mydiv">这是我的原始内容</div>
		<ul>
			<li class="x1">子元素1</li>
			<li class="x2">子元素2</li>
			<li class="x3">子元素3</li>
			<!-- <li class="x4"></li> -->
		</ul>
		<div class="d1"></div>
	</body>
</html>

运行结果如下：