一.伪类选择器
选择一些元素具有的状态
语法:元素:状态{}
例如:<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>