学习css

最新推荐文章于 2024-08-17 14:58:02 发布

weixin_49474155

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量76

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_49474155/article/details/107645095

版权

一.伪类选择器

选择一些元素具有的状态

语法：元素：状态{}

例如：<a>

状态：

link:初始化的状态

visited:被访问的状态

active:正在访问状态

hover:鼠标悬浮状态

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 未访问链接 */
			a:link{
				color:#DEB887;
			}
			/* 访问过的链接 */
			a:visited{
				color:#A52A2A;
			}
			/* 正在活动链接 */
			a:active{
				color:#DC143C;
			}
			/* 鼠标悬浮状态 */
			a:hover{
				color:#0000FF;
			}
		</style>
	</head>
	<body>
		<a href="#">登录</a>
	</body>
</html>

二.属性

1.字体，文本

font-size:字体大小

color:文本颜色

text-align:对齐方式

line-height:行高

2.背景

background:

3.边框

border:设置边框，符合属性

4.尺寸

width:宽度

height:高度

三.开心庄园案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.slsl p{
				color:sienna;
				font-size:30px;
			}
			.ss p{
				color:sienna;
			}
			img{
				vertical-align: middle;
			}
				
		</style>
	</head>
	<body>
			<p><img src="img/manor-1.jpg"></p>
			<div class="slsl">
			<p>
				如何犁地，播种和收获？
			</p>
			</div>
				<span class="ss"><p>1.点击耙子<img src="img/manor-2.jpg">，即可在庄园中开垦田地；</p></span>
				<span class="ss"><p>2.一开始，你可以开垦数十块的田地；扩充庄园后，可开垦的数量更多；</p></span>
				<span class="ss"><p>3.在商店<img src="img/manor-3.jpg">购买种子后，点击庄园中的田地<img src="img/manor-4.jpg">，即可播种；</p></span>
				<span class="ss"><p>4.别忘了收获自己的劳动所得哦，枯萎后就颗粒无收了！</p></span>
				<span class="ss"><p>5.使用铲子删除庄园里的田地和植物；</p></span>
				<span class="ss"><p>6.到达一定级别，可利用拖拉机、播种机 、收割机 ，方便快捷的劳作。</p></span>
			<div class="slsl">
				<p>如何种果树？</p>
			</div>
				<span class="ss"><p>1.商店中购买果树后，点击庄园空地<img src="img/manor-5.jpg"> ，即可种植；</p></span>
				<span class="ss"><p>2.果树结满果实时，一定要记得及时收获 哦；</p></span>
				<span class="ss"><p>3.幸运的是，果树不会枯萎，收获后的果树，过一段时间后，还会继续结果。</p></span>
			<div class="slsl">
				<p>如何养动物？</p>
			</div>
				<span class="ss"><p>1.点击商店，选择想要饲养的动物后，点击庄园空地，即可饲养动物；</p></span>
				<span class="ss"><p>2.动物成熟之后一定要记得收获<img src="img/manor-6.jpg">哦~</p></span>
				<span class="ss"><p>3.将动物放入相应的居所后，可以更方便地收获；幸运的话，说不定会有意外的惊喜收获呢！</p></span>
				<span class="ss"><p>4.除了商店购买外，还有各种神秘途径可获得动物哦！</p></span>
			<div class="slsl">
				<p>如何装扮自己的庄园？</p>
			</div>
				<span class="ss"><p>1.点击左上角的庄园名称，为自己的庄园起个响当当的名字；</p></span>
				<span class="ss"><p>2.在商店 里购买各种喜欢的建筑和装饰，随心所欲进行装饰；</p></span>
				<span class="ss"><p>3.向好友们许愿或发布需求<img src="img/manor-7.jpg">，让好友们赠送自己心仪的东西；</p></span>
	</body>
</html>