背景项目练习_c文件存练习的项目背景-CSDN博客

本文链接：https://blog.csdn.net/g960526/article/details/89062923

背景项目练习

本节一共有两个练习,放在同一个源代码中;此次项目的练习,主要是在练习背景样式的使用, 尤其是在一张大图片中查找自己所需要的背景位置,其次就是练习伪类选择器hover的用法.在代码的结尾会有我个人对此项目练习的总结,有兴趣的同学可以参考一下.

源代码如下:

<!doctype html> <!-- 文档类型 -->
<html>  
	<head> <!-- 头部标签 -->
		<meta charset="utf-8"> <!-- 字符集编码 -->
		<title>背景项目练习</title> <!-- 标题标签 -->
		<meta name="descrption" content="">  <!-- 网页描述 -->
		<meta name="keywords" content=""> <!-- 关键词 -->
		<style type="text/css">  /* 头部样式 */
			*{margin:0px;padding:0px;} /* 外边距的重置样式 */
			li{list-style:none;}  /* 列表标签序列的重置 */

		/* project one Start */  /* 项目一开始 */
			.icon{width:40px;height:40px;} /*  给所有icon设置一个公共的样式,所有的icon的宽度和高度是相等的 */
			p{display:inline-block;vertical-align:middle;}  /* 给所有的P标签设置为行块标签,使其在同一个li下的两个P标签可以在同一行显示;并且设置垂直对齐方式为中间对齐 */
			ul{width:320px;margin:30px auto;padding:10px 20px;border:7px solid #d9d9d9;} /* 给ul设置一个适当的宽度,在设置一个外边距并且居中显示;设置一个适当的内边距和边框 */
			.text{font-family:"宋体";font-weight:bold;} /* 给文本内容设置一个合适的字体和粗细 */
			.icon1{background:url("./3.png") no-repeat -430px 11px;} /* 给icon1添加一个所需要的背景(这里是数字1),并设置为不平铺,最后找准所要的那个背景部分的位置 */
			.icon2{background:url("./3.png") no-repeat -430px -188px;}/* 给icon2添加一个所需要的背景(这里是数字2),并设置为不平铺,最后找准所要的那个背景部分的位置 */
			.icon3{background:url("./3.png") no-repeat -430px -28px;}/* 给icon3添加一个所需要的背景(这里是数字3),并设置为不平铺,最后找准所要的那个背景部分的位置 */
			.icon4{background:url("./3.png") no-repeat -430px -229px;}/* 给icon4添加一个所需要的背景(这里是数字4),并设置为不平铺,最后找准所要的那个背景部分的位置 */
			.icon5{background:url("./3.png") no-repeat -430px -68px;}/* 给icon5添加一个所需要的背景(这里是数字5),并设置为不平铺,最后找准所要的那个背景部分的位置 */
			.icon6{background:url("./3.png") no-repeat -430px -268px;}/* 给icon6添加一个所需要的背景(这里是数字6),并设置为不平铺,最后找准所要的那个背景部分的位置 */
			.icon7{background:url("./3.png") no-repeat -430px -111px;}/* 给icon7添加一个所需要的背景(这里是数字7),并设置为不平铺,最后找准所要的那个背景部分的位置 */
		/* End project one */  /* 项目一结束 */




		/* project two Start */  /* 项目二开始 */
			.list{list-style:none;width:40px;height:40px;margin:0px auto 3px;} /*  将所有的list中公共的样式写在一起 */
			.item{width:300px;margin:30px auto;padding:50px 0px;background-color:rgba(255,0,0,0.2);} /* 给item设置一个宽度,让其在页面中居中,并设置一个合适的内外边距和背景颜色  */
			.item .item_item1{background:url("./1.png") no-repeat -80px -280px;} /* 用复合写法,给item_item1里面设置一个图片背景,不平铺的方式,最后找准所要的那个背景部分的位置 后面2 3 4 5同理 */
			.item .item_item1:hover{background:url("./1.png") no-repeat -120px -280px;}/* 上面过程以经给item_item1设置好背景,在这里设置鼠标悬浮在背景上时,所要出现的另一个背景形状  后面2 3 4 5同理*/
			.item .item_item2{background:url("./1.png") no-repeat 0px -200px;}
			.item .item_item2:hover{background:url("./1.png") no-repeat -40px -200px;}
			.item .item_item3{background:url("./1.png") no-repeat 0px -240px;}
			.item .item_item3:hover{background:url("./1.png") no-repeat -40px -240px;}
			.item .item_item4{background:url("./1.png") no-repeat 0px -280px;}
			.item .item_item4:hover{background:url("./1.png") no-repeat -40px -280px;}
			.item .item_item5{background:url("./1.png") no-repeat 0px 0px;}
			.item .item_item5:hover{background:url("./1.png") no-repeat -40px 0px;}
		/* End project two */  /* 项目二结束 */


		</style>
	</head>
	<body>


	<!-- project one Start  -->  <!-- 项目一开始 -->
		<ul> <!--  定义一个ul标签 -->
			<li >
				<p class="icon icon1"></p> <!-- 定义一个P标签,并会在宽高上设置合适的大小,从而存放背景(这里是数字1)  后面几个同理 -->
				<p class="text">秋冬最夯:贝雷帽、报童帽大PK</p> <!-- 在定义一个P标签,存放所需要的文本内容  后面几个同理 -->
			</li>
			<li >
				<p class="icon icon2"></p>
				<p class="text">比大牌更有格调的小众婚戒品牌</p>
			</li>
			<li >
				<p class="icon icon3"></p>
				<p class="text">手腕不过裆,用什么来补救?</p>
			</li>
			<li >
				<p class="icon icon4"></p>
				<p class="text">丑鞋出没!穿好了算你赢</p>
			</li>
			<li >
				<p class="icon icon5"></p>
				<p class="text">红色这么穿,才能气场全开!</p>
			</li>
			<li >
				<p class="icon icon6"></p>
				<p class="text">再说汉字土这些品牌要生气了!</p>
			</li>
			<li >
				<p class="icon icon7"></p>
				<p class="text">户外眼睛再丑也能赢得男神归</p>
			</li>
		</ul>
	<!-- 	End project one   -->   <!-- 项目一结束 -->


	
		
	<!-- project two Start  -->   <!-- 项目二开始 -->
		<ul class="item">
			<li class="item_item1 list"></li>
			<li class="item_item2 list"></li>
			<li class="item_item3 list"></li>
			<li class="item_item4 list"></li>
			<li class="item_item5 list"></li>
		</ul>
	<!-- End project two   -->   <!-- 项目二结束 -->

	</body>
</html>

<!-- 
	个人总结:
		1.在从一张大图片中选取一部分用来充当背景时,在一开始不熟悉时可以将所要放背景的方框的宽高设置大一些,然后在慢慢修改背景图片的方向,从而找到自己所需要的背景位置位置
		2.在熟练后,可以直接使用截图工具测出背景图片的大概范围,然后在慢慢调整
		3.在使用背景的复合写法的时候,需要注意背景位置和背景大小中间有/隔开
-->

效果图如下:

两个效果图对应着源代码中的两个项目,并且在每一个过程中都有详细的解释,读者可以将源代码复制到自己的编辑器中运行,这样刚容易理解.