雷型
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p style="margin: 0;background:orange;height: 2em;width: 1em; "> </p>
<p style="margin: 0;background:orange;height: 2em;width: 1em;position:relative;top: -1em;right: -1em; "> </p><br><br>
<p style="margin: 0;background:cyan;height: 2em;width: 1em;float: left; "> </p>
<p style="margin: 0;background:cyan;height: 2em;width: 1em;position:relative;top: -1em;right: -1em; "> </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;
}
top: 33%;
left: 33%;
background-color: gold;
}
background-color: cyan;
}
left: 66%;
background-color: lightblue;
}
top: 66%;
background-color: red;
}
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;
}
color: cyan;
border:2px dotted blue;
position: relative;
top: -12px;
}
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;
}
background-color: cyan;
border:2px solid yellow;
left: 100px;
top: 200px;
z-index: 1;
}
background-color: lightblue;
border:2px dotted black;
left: 200px;
top: 300px;
z-index: 3;
}
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>
