第三章 CSS样式深入② 代码

一、课前小测试

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<style type="text/css">

		/*id选择器*/
		#title{
			color:red; /*字体颜色*/
			text-align:center; /*水平对齐方式*/
		}

		/*类选择器*/
		.heise{
			color:black;
			font-size:20px;
			text-decoration:underline; /*文本修饰:下划线*/
		}
		/*标签选择器*/
		p{
			color:blue;
		}
		</style>
	</head>
	<body>
		<h1 id="title">人物简介</h1>
		<hr/>
		<p>
		<span class="heise">孙悟空</span>（又称齐天大圣、孙行者、斗战胜佛），是中国古典神魔小说《西游记》中的主要角色之一。由开天辟地产生的仙石孕育而生，出生地位于东胜神洲的花果山上，因带领猴群进入水帘洞而被尊为 “美猴王”。 [61]  为了学艺而漂洋过海拜师于须菩提祖师，得名孙悟空， [63]  学会大品天仙诀、地煞数七十二变、筋斗云等高超的法术。 [64-66] 
		</p>
		<p>
		<span class="heise">猪八戒</span>前世为执掌天河八万水兵的“天蓬元帅”，精通三十六般变化，所持的兵器为太上老君所造、玉皇大帝亲赐的上宝沁金耙（俗称九齿钉耙）。因调戏霓裳仙子被贬下凡尘，投了猪胎，生的猪头人身，在福陵山云栈洞落草。后受观音菩萨点化，入赘高老庄务农，等待取经人。孙悟空收服他成为唐僧的二徒弟，取名“八戒”，与孙悟空、沙悟净一同保护唐僧去西天取经，几经劫难，因挑担和保护唐僧有功，成了正果，被佛祖封为“净坛使者”。
		</p>
	</body>
</html>

运行结果如下：

二、边框文体文本

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				/*设置容器的宽和高*/
				width:800px;
				height:400px;

				/*边框宽度
				border-width:3px;*/
				/*边框颜色
				border-color:red;*/
				/*边框的样式风格 solid:实线框
				border-style:solid;*/

				/*定义某个方向的边框*/
				border-left:5px solid red;
				border-right:5px dashed green;
				border-top:5px double blue;
				border-bottom:5px solid black;

				/*字体样式*/
				font-size:30px; /*大小*/
				color:green; /*颜色*/
				font-family:黑体;/*类型*/
				font-style:italic; /*字体风格*/
				font-weight:bold; /*粗细*/

				/*文本样式*/
				/*文本水平对齐方式*/
				text-align:center;
				/*设置文本缩进:em比例单位
				text-indent:2em;*/
				
				/*内容行高:行高和容器高度一致时，文本会垂直居中*/
				line-height:400px;

				/*字符间距*/
				letter-spacing:10px;

				/*文本修饰*/
				text-decoration:line-through;
			}
			span{
				/*vertical-align:-20px;*/
			}

			.circle{
				width:200px;
				height:200px;
				border:2px solid red;
				background-color:blue;
				/*设置边框的弧度*/
				border-top-left-radius:100px;
				border-top-right-radius:100px;
				border-bottom-left-radius:100px;
				border-bottom-right-radius:100px;
			}
		 </style>
	</head>
	<body>
		<div class="circle"></div>
		<hr/>
		<div>这是一个内容1这是一个内容1这<span>是</span>一</div>
		  <!--
		  <div>这是一个内容2</div>
		  <span>SPAN1</span>
		  <span>SPAN2</span>
		  -->
	</body>
</html>

运行结果如下：

三、设置边框文本样式文字/容器阴影

图片、代码的路径如下如所示：

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
		ul{
			border:5px solid gray;
			width:200px;
			/*去除默认列表样式*/
			list-style:none;
			/*设置列表项目图片*/
			list-style-image:url(icon2.gif);
			/*设置文本阴影*/
			text-shadow:10px 8px 5px gray;
			/*设置容器阴影*/
			box-shadow:10px 10px 20px gray;
		}
		</style>
	</head>

	<body>
	<ul>
		<li>乌鲁木齐晴转阴35度</li>
		<li>乌鲁木齐晴转阴35度</li>
		<li>乌鲁木齐晴转阴35度</li>
		<li>乌鲁木齐晴转阴35度</li>
		<li>乌鲁木齐晴转阴35度</li>
	</ul>
	</body>
</html>

运行结果如下：

四、背景样式 div

图片、代码的路径如下如所示：

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
		#con{
			width:600px;
			height:400px;
			border:2px solid red;
			/*背景样式:
				背景颜色: background-color
				背景图片: background-image
				背景平铺方式: background-repeat
						   repeat:铺满 no-repeat:不平铺 repeat-x:水平 repeat-y:垂直
				背景位置: background-position:水平 垂直
						取值:
						数值 
						百分比 
						关键字(left center right,top center bottom)
				背景大小: background-size
			*/
			/*background-color:blue;
			background-image:url(map1.jpg);
			background-repeat:no-repeat;
			background-position:center center;
			background-size:50px 50px;*/

			/*背景复合写法
			background:颜色 图片 平铺方式 位置 / 大小
			*/
			/*background:red url(map1.jpg) no-repeat 50px top / 200px 200px;*/
			/*多组背景*/
			background:url(map1.jpg) no-repeat 50px top / 200px 200px,
					   url(tuijian1.jpg) no-repeat right bottom /100px 100px;
			   
		}
		</style>
	</head>

	<body>
		<div id="con"></div>
	</body>
</html>

运行结果如下：

五、精美台历

图片、代码的路径如下如所示：

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
	<meta charset="utf-8">
		<style type="text/css">
		#calender{
			width:600px;
			height:400px;
			border:2px solid gray;
			box-shadow:5px 5px 10px gray;
			/*设置盒子页面居中*/
			margin:20px auto;
			/*字体样式*/
			color:red;
			font-size:30px;
			text-align:center;
			font-family:隶书;
			/*行高与高度一致，内容垂直居中*/
			line-height:400px;
			/*背景图片*/
			background:url(taili.jpg) repeat-y;
		}
		</style>
	</head>

	<body>
		<div id="calender">
			精美台历
		</div>
	</body>
</html>

运行结果如下：

六、动画效果鼠标悬浮

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			#con{
				width:300px;
				height:200px;
				background-color:#ffcc33;
				/*针对宽度的变化，在1s内完成*/
				transition:all 1s;
			}

			/*设置元素的鼠标悬浮样式*/
			#con:hover{
				background-color:#ff66ff;
				color:red;
				font-size:50px;
				width:200px;
				height:150px;
			}
		</style>
	</head>

	<body>
		<div id="con">这是一个内容</div>
	</body>
</html>

运行结果如下：

鼠标在图片上悬浮之后:

七、滑动菜单

代码如下：

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	ul{
		/*去除列表样式*/
		list-style:none;
		margin:0px; /*清除外边距*/
		padding:0px; /*清除内填充*/
		text-align:center;
	}

	.menu{
		border:2px solid red;
		width:150px;
		background-color:#999;
	}
	.menu ul{
		background-color:#ccc;
		/*隐藏元素*/
		height:0px;
		/*隐藏ul溢出的内容*/
		overflow:hidden;
		/*设置动画*/
		transition:height 1s;
	}

	/*鼠标悬浮到li上时，让li里面的ul变化*/
	.menu li:hover ul{
		height:63px;
	}
  </style>
 </head>

 <body>
  <ul class="menu">
	<li>
		一级菜单1
		<ul>
			<li>二级菜单1</li>
			<li>二级菜单2</li>
			<li>二级菜单3</li>
		</ul>
	</li>
	<li>
		一级菜单2
		<ul>
			<li>二级菜单1</li>
			<li>二级菜单2</li>
			<li>二级菜单3</li>
		</ul>
	</li>
	<li>
		一级菜单3
		<ul>
			<li>二级菜单1</li>
			<li>二级菜单2</li>
			<li>二级菜单3</li>
		</ul>
	</li>
  </ul>
 </body>
</html>

运行结果如下：

鼠标在图片上悬浮之后: