HTML元素定位
2018-06-07 本文已影响0人
WANGLIN_HZ
<!DOCTYPE html>
<html>
<head>
<title>元素的层级</title>
<style type="text/css">
.box1{
width: 100px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
}
.box2{
width: 100;
height: 100;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
z-index: 1
}
.box3{
width: 200;
width: 200px;
background-color: yellow;
/*position: relative;*/
/*z-index: 3;*/
position: absolute;
top: 200px;
left: 100px;
z-index: 30;
opacity: 1;
}
.box4{
width: 100;
width: 100px;
background-color: skyblue;
position: relative;
}
.box5{
width: 100;
width: 100px;
background-color: rgb(229,122,111);
position: relative;
}
</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>
<!DOCTYPE html>
<html>
<head>
<title>固定定位</title>
<style type="text/css">
.box1{
width: 50px;
height: 50px;
background-color: red
}
.box2{
width: 80px;
height: 80px;
background-color: rgb(177,199,210);
position: fixed;
left: 0px;
top: 0px;
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(210,219,222);
}
.box4{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
固定定位
- 固定定位的元素会被锁定在屏幕的某个位置上，当 访问者滚动网页时，固定元素会在屏幕上保持不动。
- 当将position属性设置为fixed时，则开启了元素的 固定定位。
- 当开启了固定定位以后，可以使用top、right、
bottom、left四个属性对元素进行定位。 - 固定定位的其他特性和绝对定位类似。
3
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<style type="text/css">
}
</style>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td rowspan="2">C5</td>
</tr>
<tr>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
<tr>
<td>D2</td>
<td>D3</td>
<td colspan="2">D4</td>
</tr>
</table>
</body>
</html>
- 合并单元格指将两个或两个以上的单元格 合并为一个单元格。
- 合并单元格可以通过在th或td中设置属性 来完成。
- 横向合并
colspan - 纵向合并
rowspan
<!DOCTYPE html>
<html>
<head>
<title>给表格添加样式</title>
<style type="text/css">
table{
width: 300px;
margin: 0 auto;
/*border: 1px solid black;*/
/*border-spacing: 0px;*/
/*设置表格边框的合并，则border-spacing失效*/
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}
tbody tr:nth-child(even){
background-color: #bfa;
}
tr:hover{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<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>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>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>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>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>
</table>
</body>
</html>
- 使用table标签创建一个表格。
- tr表示表格中的一行。
- tr中可以编写一个或多个th或td。
- th表示表头。
- td表示表格中的一个单元格
4
<!DOCTYPE html>
<html>
<head>
<title>背景</title>
<style type="text/css">
.box1{
width: 1000px;
height: 1000px;
background-color: green;
margin: 0 auto;
background-image: url(img/by.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>背景</title>
<style type="text/css">
.box1{
width: 1000px;
height: 1000px;
background-color: green;
margin: 0 auto;
background-image: url(img/by.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- background-repeat用于控制背景图片的 重复方式。
- 如果只设置背景图片默认背景图片将会使 用平铺的方式，可以通过该属性进行修改。
- 可选值：
repeat：默认值，图片左右上下平铺
no-repeat：只显示图片一次，不会平铺
repeat-x：沿x轴水平平铺一张图片
repeat-y：沿y轴水平平铺一张图片
5
<!DOCTYPE html>
<html>
<head>
<title>背景偏移与定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-image: url();
background-repeat: no-repeat;
height: 5000px;
background-attachment: fixed;
}
.box1{
width: 500px;
height: 500px;
margin: 0 auto;
background-color: rgb(220,230,220);
background-repeat:no-repeat;
background-image: url(img/1by.jpg);
background-position: -50px -50px;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- background-attachment用来设置背景图 片是否随页面滚动。
- 可选值：
scroll：随页面滚动
fixed：不随页面滚动
6
<!DOCTYPE html>
<html>
<head>
<title>背景固定</title>
<style type="text/css">
body{
height: 5000px;
background-image: url(img/laohu.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
7
<title>表格</title>
<style type="text/css">
}
</style>
</head>
<body>
<table>
<tr>
<td>B2</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>表格布局</title>
</head>
<body>
<table border="1" width="100%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="500px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
- 在Web的历史中，HTML的表格发挥了极大的作用。最 初创建表格就是为了以表格的形式显示数据，后来表格 变成了一个极受欢迎的布局工具。
- 但是有了CSS以后，CSS在布局网页方面实际上会更出 色，所以现在我们使用表格的作用只有一个，就是用来 表示格式化的数据。
- HTML中的表格可以很复杂，但是通常情况下我们不需 要创建过于复杂的表格。
8
<!DOCTYPE html>
<html>
<head>
<title>作业</title>
<meta charset="utf-8" />
<style type="text/css">
div{
width: 400px;
border-top: solid 2px red;
border-bottom: solid 4px gray;
padding: 10px 10px;
}
</style>
</head>
<body>
<div>新闻标题</div>
</body>
</html>
9
<!DOCTYPE html>
<html>
<head>
<title>长表格</title>
</head>
<body>
<table>
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr>
<tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr>
<tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr>
<tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr><tr>
<td>2018.03.01</td>
<td>5000</td>
<td>6000</td>
<td>2000</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td>余额</td>
<td>100</td>
</tfoot>
</table>
</body>
</html>
- caption表示表格的标题。
- thead表示表格的头部。
- tbody表示表格的主体。
- tfoot表示表格的底部。
10
<!DOCTYPE html>
<html>
<head>
<title>按钮练习</title>
<style type="text/css">
.an:link{
display: block;
width: 500px;
height: 400px;
background-image: url();
background-repeat: no-repeat;
}
.an:hover{
/*background-image: url();*/
background-position: -93 0px;
}
.an:active{
/*background-image: url();*/
background-position: -186 0px;
}
</style>
</head>
<body>
<a href="#" class="an">超链接</a>
</body>
</html>
