2018-12-28 给表格添加样式 长表格 表格的布局 完善c
2019-01-02 本文已影响0人
一片落叶就是渺小
8、给表格添加样式:
table{
/*设置表格的宽度*/
width: 300px;
/*居中*/
margin: 0 auto;
/*边框*/
/*border:1px solid black;*/
/*table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离*/
/*border-spacing: 10px;*/
/*
border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
*/
border-collapse: collapse;
/*设置背景样式*/
/*background-color: #bfa;*/
}
/*设置边框*/
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>
9、长表格
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
完善clearfix
.clearfix:after{
content="";
display=block;
clear:both;
}
当天雪碧图做购物车作业如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车logo</title>
<style type="text/css">
.btn{
display: block;
width: 41px;
height: 28px;
background-image: url("../css/amazon-sprite_.png");
background-repeat: no-repeat;
}
.btn:link{
background-image: url("../css/amazon-sprite_.png");
background-position: -10px -340px
}
.btn:hover{
background-image: url("../css/amazon-sprite_.png");
background-position: -58px -339px;
}
.btn:active{
background-image: url("../css/amazon-sprite_.png");
background-position: -126px -339px;
}
</style>
</head>
<body>
<a href="#" class="btn"></a>
</body>
</html>
