简简单单玩转CSS3（2）

最新推荐文章于 2024-01-01 18:04:03 发布

莫余

最新推荐文章于 2024-01-01 18:04:03 发布

阅读量147

点赞数

分类专栏： Java Web 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44824148/article/details/106360937

版权

Java Web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

雷型

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p style="margin: 0;background:orange;height: 2em;width: 1em; ">&nbsp;</p>
	<p style="margin: 0;background:orange;height: 2em;width: 1em;position:relative;top: -1em;right: -1em;  ">&nbsp;</p><br><br>
	<p style="margin: 0;background:cyan;height: 2em;width: 1em;float: left; ">&nbsp;</p>
	<p style="margin: 0;background:cyan;height: 2em;width: 1em;position:relative;top: -1em;right: -1em;  ">&nbsp;</p>
</body>
</html>

河图

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
			height: 33%;
			width: 33%;
			border:1px solid black;
			font-family: 楷体;
			font-size: 50px;
			text-align: center;
			position: fixed;
		}
		#jin{
			top: 33%;
			left: 33%;
			background-color: gold;
		}
		#mu{
			background-color: cyan;
		}
		#shui{
			left: 66%;
			background-color: lightblue;
		}
		#huo{
			top: 66%;
			background-color: red;
		}
		#tu{
			top: 66%;
			left: 66%;
			background-color: brown;
		}
	</style>
</head>
<body>
	<div id="jin"></div>
	<div id="mu"></div>
	<div id="shui"></div>
	<div id="huo"></div>
	<div id="tu"></div>

</body>
</html>

区别

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p{
			display: block;
			font-size: 30px;
		}
		span{
			display: inline;
			font-size: 60px;

		}
		#out{
			color: cyan;
			border:2px dotted blue;
			position: relative;
			top: -12px;
		}
		#in{
			float: left;
			position: absolute;
			border:5px dotted green;
			color: red;
		}
	</style>
</head>
<body>

	<p id="out">aaaaaaaa</p>
	<span id="in"> bbbbbb</span>
</body>
</html>

Z序

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.size{
			position: absolute;
			width: 300px;
			height: 300px;
		}
		#a{
			background-color: cyan;
			border:2px solid yellow;
			left: 100px;
			top: 200px;
			z-index: 1;
		}
		#b{
			background-color: lightblue;
			border:2px dotted black;
			left: 200px;
			top: 300px;
			z-index: 3;
		}
		#c{
			background-color: green;
			border:2px solid red;
			left: 300px;
			top: 400px;
			z-index: 2;
		}
	</style>
</head>
<body>
	<div class="size" id="a">aaaaaa</div>
	<div class="size" id="b">bbbbbb</div>
	<div class="size" id="c">cccccc</div>
</body>
</html>

表格

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		table{
			border-collapse: collapse;
			border:2px solid yellow;
		}
		colgroup,tbody{
			border:solid medium;
		}
		td{
			border:solid thin;
			height: 1.4em;
			width: 1.4em;
			text-align: center;
		}
	</style>
</head>
<body>
	<table>
		<colgroup>
			<col><col><col>
		</colgroup>
		<colgroup>
			<col><col><col>
		</colgroup>
		<colgroup>
			<col><col><col>
		</colgroup>
		<tbody>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
			<tr><td>1</td><td>2</td><td></td><td>5</td><td>1</td><td>2</td><td></td><td>5</td><td>9</td></tr>
		</tbody>
	</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body{
			text-align: center;
		}
		stack{
			display:inline-table;
			border:2px solid red;
		}
		row{
			display: table-row;
			border:2px dotted black;
		}
		d{
			display: inline;
			font-weight: bolder;
			border:2px solid yellow;
		}
	</style>
</head>
<body>
	<stack>
		<row>1<d>2</d>3</row>
		<row>4<d>5</d>6</row>
		<row>7<d>8</d>9</row>
	</stack>
</body>
</html>

莫余

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
简简单单玩转CSS3（2）

雷型<!DOCTYPE html><html><head> <title></title></head><body> <p style="margin: 0;background:orange;height: 2em;width: 1em; ">&nbsp;</p> <p style="margin: 0;background:orange;height: 2em;wid
复制链接

扫一扫