CSS美化网页元素

快乐就好ya

已于 2024-09-10 07:56:44 修改

阅读量985

点赞数 9

分类专栏： HTML 文章标签： css css3 前端 html

于 2024-09-10 07:55:46 首次发布

本文链接：https://blog.csdn.net/m0_63233901/article/details/142075160

版权

HTML 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

字体样式

font-family 字体类型

font-size字体大小

px像素

em根据父容器字体大小改变(em"父级字体大小PX)

rem根据根元素字体大小改变(rem*根元素字体大小PX)

font-style 字体风格(倾斜)

font-weight 字体粗细

简写：

font:风格粗细大小类型

css

文本样式

color 文本颜色

单词,十六进制, rgb, rgba(透明度从0-1)

text-align 内容水平移动(在块级元素中生效)

left左(默认)

right右 center居中

line-height 设置行高

text-decoration 文本装饰

none 默认,不要线

underline 下划线

overline 上划线

line-through 删除线

(也可以使用del标签)

vertical-align 垂直对齐方式

vertical-align属性: midd1e居中、top上、bottom下

text-shadow 文字阴影

color颜色

x-offset坐标

blur-radius模糊程度;

y-offset坐标

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

h2{
	font-weight:bold ;
	line-height: 40px;
}
p{
	font-size:12px ;
	line-height: 20px;
}
img{
	vertical-align: middle;
}
div{
	color:#9B2B01 ;
}

伪类样式

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

列表样式

list-style :none 去除ul或ol前缀

背景样式

背景颜色

background-color

背景图片

background-image 背景图片 url路径

background-repeat是否平铺

repeat：沿水平和垂直两个方向平铺

no-repeat: 不平铺, 即只显示一次

repeat-x: 只沿水平方向平铺

repeat-y: 只沿垂直方向平铺

background-position 图像位移

background-position: X Y

水平方向的关键词：

left、center、right

垂直方向的关键词：

top、center、bottom

background简写背景颜色背景图像路径背景位置是否平铺

background-size图像大小

auto 默认值，使用背景图片保持原样

percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的

cover 整个背景图片放大填充了整个元素

contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

使用百分比%

background:linear-gradient 背景颜色渐变

background: linear-gradient(方向,颜色……);

background: -webkit-linear-gradient(1 eft top,#0070c0,#cc0000);

IE浏览器是Trident内核, 加前缀: -ms-

Chrome浏览器是Webkit内核, 加前缀: -webkit-

Safari浏览器是Webkit内核, 加前缀: -webkit-

Opera浏览器是Blink内核, 加前缀: -o-

Firefox浏览器是Mozilla内核, 加前缀: -moz-

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="css/index05.css" />
	<body>
		<div class="ph">
			<div class="cx">畅销书排行 <img src="img/bang.gif"></div>
			<ul>
				<li><img src="img/book_no01.gif"> &nbsp;&nbsp;<a href="#">不抱怨的世界(畅...</a></li>
			    <li><img src="img/book_no02.gif"> &nbsp;&nbsp;<a href="#">遇见未知的自己...</a></li>
			    <li><img src="img/book_no03.gif">&nbsp;&nbsp; <a href="#">活法（季羡林、...</a></li>
			    <li><img src="img/book_no04.gif"> &nbsp;&nbsp;<a href="#">高效能人士的七个习惯</a></li>
			    <li><img src="img/book_no05.gif"> &nbsp;&nbsp;<a href="#">被迫强大（北外女生香奈儿...</a></li>
			    <li><img src="img/book_no06.gif"> &nbsp;&nbsp;<a href="#">遇见心想事成的自己（《遇...</a></li>
			    <li><img src="img/book_no07.gif"> &nbsp;&nbsp;<a href="#">世界上最伟大的推销员（插...</a></li>
			    <li><img src="img/book_no08.gif"> &nbsp;&nbsp;<a href="#">我的成功可以复制（唐骏亲...</a></li>
			    <li><img src="img/book_no09.gif"> &nbsp;&nbsp;<a href="#">少有人走的路：心智成熟的...</a></li>
			    <li><img src="img/book_no10.gif"> &nbsp;&nbsp;<a href="#">活出全新的自己——唤醒...</a></li>
			</ul>
	</body>
</html>

.ph{
	height: 400px;
	width: 300px;
	background:-webkit-linear-gradient(top,#F9FBCB,#F8F8F3)
}
.cx{
	font-size: 16px;
	text-indent: 1em;
	line-height:30px ;
	background-color:#518700 ;
	color:white ;
	font-weight:bold ;
}
img{
	vertical-align:middle ;
	height: 30px;
}
li{
	list-style:none ;
	font-size:12px ;
	line-height:28px ;
	
}
a{
	color: #1a66b3;
	text-decoration: none;

}
a:hover{
	color:red;
	text-decoration: underline;
}
img{
	vertical-align: middle;
	height: 15px;
	width: 15px;
}