常用表单美化

最新推荐文章于 2022-10-19 10:07:06 发布

小贾爱编程

最新推荐文章于 2022-10-19 10:07:06 发布

阅读量1.8k

点赞数 1

分类专栏： .NET 文章标签：常用表单美化

本文链接：https://blog.csdn.net/qq_37589387/article/details/88679873

版权

.NET 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

用CSS设定文本样式

常用文本属性列表：

font-size字体大小 font-family字体类型 font-style字体样式 color设置或检索文本的颜色 text-align文本对齐（left、center、right）

font-weight文字粗细 text-decoration文字下划线 line-height文字的行间距 letter-spacing 字间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#txtSylte
			{
				font-size:18px;
				font-family:"微软雅黑";
				font-weight:bold;
				color:blue;
				line-height:35px;
				text-decoration:underline;
				text-align:center;
				letter-spacing:inherit;
			}
		</style>
	</head>
	<body>
		<div id="txtSylte">
			床前明月光，<br/>
			疑是地上霜。<br/>
			举头望明月，<br/>
			低头思故乡。
		</div>
	</body>
</html>

用css设置网页中的背景：

常用的背景属性列表：background-color背景颜色，background-image 背景图片 background-repeat背景图的重复方向

background-position背景图片的位置

背景图片的位置：为了减少HTTP请求的次数，在网页中有时需要将较多的小图片放在一张较大的图片中，然后用背景图片位置属性background-position来定位要显示的图片，可以用绝对定位和相对定位来表示。background-position:10px 20px;表示从该图片左边10px，上边20px算起，background-position:10% 20%；表示分别从该图片左边10%上边20%起

		<style type="text/css">
			body
			{
				background-image:url(img/bodybg.jpg);
				background-repeat:repeat-y;
				
			}
		</style>

div基准点：0px,0px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		 #bgstyle1{width:300px;height:38px;background-image:url(img/taobao.gif);
		 background-position:0px -18px;}
		 #bgstyle2{width:82px;height:80px;border:1px solid blue;background-image:url(img/taobao.gif);
		 background-position:-50px -110px;}
		</style>
	</head>
	<body>
		<div id="bgstyle1"></div>
		<br/>
		<div id="bgstyle2"></div>
	</body>
</html>