Html常用Css样式

最新推荐文章于 2023-02-28 14:59:14 发布

丷寒枫丷

最新推荐文章于 2023-02-28 14:59:14 发布

阅读量228

点赞数 1

分类专栏： Html

本文链接：https://blog.csdn.net/qq_24432127/article/details/88933940

版权

Html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			li
			{
				background-color: aqua;
				margin-bottom: 10px;
				width: 200px;
				float:left;
				
			}
			#div3:first-letter
			{
				font-size: 200px;
			}
			p
			{
				border: 1px solid #00FFFF;
				margin: 0px;
				padding: 50px;
			}
		</style>
		
	</head>
	<body>
		<!--
		 border-style: dashed;
		 border-width: 10px;
		 border-color: #FF0000;
		 -----------------------------
		 border: #8A2BE2 dashed 10px;
		 ------------------------------
		 background-image: url() ;
		 background-repeat: ;
		 -->
		<div style="color:red;
		font-size: 25px;
		font-family: microsoft yahei;
		background-color: aquamarine;
		width: 200px;
		border-top:  10px #8A2BE2 dashed;
		border-right:  5px chartreuse solid;
		border-bottom:  10px burlywood dotted;
		border-left:  10px cyan double;
		cursor: pointer;
		overflow: hidden;
		
		
		">
			<p>春眠不觉晓</p>
			<p>处处闻啼鸟</p>
			<p>夜来风雨声</p>
			<p>花落知多少</p>
		</div>
		<div id="div2" style="width:30px; height: 30px; border: 1 #8A2BE2 solid;background-position: -20px -40px; background-image: url(img/1.jpg);">
			
		</div>
		
		<ul style=" list-style-type: none;margin-bottom: 100px;">
			<li>一一</li>
			<li>二二</li>
			<li>三三</li>
		</ul>
		
		
		
		<span style="border: #8A2BE2 1px  solid;width: 200px;height: 200px; display:block;">
			内容
		</span>
		
		<div id="div3" style="border: 1px brown solid;font: 30px times new roman;line-height: 100px;text-indent: 2em;">
			中新网3月29日电 28日晚间，科技人力资源服务平台猎聘发布了2018年全年财报，
			这也是猎聘自2018年6月上市以来发布的首份全年财报。财报显示，猎聘2018年全年营收12.25亿元人民币，
			同比增长48.6%；毛利9.88亿元人民币，同比增长42.5%；经调整归母全年净利润1.033亿元人民币，同比2017年增长471%。
		</div>
	</body>
</html>


<!-- 
	一般常用简单的CSS样式
	color：设置容器文本颜色
	font-size:设置容器文本字体大小
	font-family;设置容器文本字体
	background-color:设置容器的背景颜色
	width：设置容器宽度
	border-style:设置容器边框样式
	border-width:设置容器边框宽度
	border-color：设置容器边框颜色
	border: #8A2BE2 dashed 10px;：（可以同时设置样式 宽度 颜色等）
	border-top:设置头部边框样式
	border-right:设置右部边框样式
	border-bottom:设置底部边框样式
	border-left:设置左部边框样式
	cursor：设置鼠标移动到容器中的样式
	overflow:设置内容溢出的样式  scroll 滚动条 hidden隐藏
	background-image:设置容器的背景图片
	background-repeat：设置容器背景图平铺
	background-position:设置容器背景图的绝对显示位置
	display:  设置容器的显示隐藏;
	margin:设置元素边距边界之间的距离
	padding: 容器内部填充的大小设置
	line-height：设置容器中文本行高
	text-indent：设置容器中第一行的文本向右缩进距离
	first-letter：设置容器第一个字母的样式
 -->