1.元素的层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的层级</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
/*设置偏移量*/
top: 100px;
left: 100px;
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
/*开启相对定位*/
position: relative;
/*父元素的层级再高，也不会盖住子元素*/
z-index: 20;
top: 500px;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
/*开启绝对定位*/
position: absolute;
z-index: 10;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>
运行结果：
image.png
2.简写背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简写背景属性</title>
<style type="text/css">
body{
height: 5000px;
background-color: #bfa;
background: #bfa url(img/3.png) center center no-repeat fixed;
}
</style>
</head>
<body>
</body>
</html>
运行结果：
image.png
3.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!-- 在HTML中，使用table标签来创建一个表格 -->
<table border="1" width="40%" align="center">
<!-- 在table标签中使用tr来表示表格中的一行，有几行就有几对tr -->
<tr>
<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!-- rowspan用来设置纵向的合并单元格 -->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!-- colspan横向的合并单元格 -->
<td colspan="2">D3</td>
</tr>
</table>
</body>
运行结果：
image.png
4.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
table{
/*设置表格的宽度*/
width: 300px;
/*居中*/
margin: 0 auto;
border-collapse: collapse;
/*设置背景样式*/
}
/*设置边框*/
th, td{
border: 1px solid black;
}
/*设置隔行变色*/
tbody > tr:nth-child(even){
background-color: #bfa;
}
/*鼠标移入到tr以后，改变颜色*/
tr:hover{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<!--
可以使用th标签来表示表头中的内容，
它的用法和td一样，不同的是它会有一些默认效果
-->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
</table>
</body>
</html>
运行结果：
image.png
5.长表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长表格</title>
</head>
<body>
<table>
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
image.png
网友评论