前端（07 HTML知识）
2018-08-15 本文已影响0人
周肸
1.按钮练习
<!DOCTYPE html>
<html>
<head>
<title>按钮练习</title>
<meta charset="utf-8" />
<style type="text/css">
.cc{
display: block;
width: 161px;
height: 44px;
background-image: url(amazon-sprite_.png)
/*background-repeat: no-repeat;*/
}
.cc:active{
display: block;
width: 43px;
height: 31px;
background-image: url(amazon-sprite_.png);
/*background-repeat: no-repeat;*/
background-position: -58px -338px;
}
/*.cc:active{
background-image: url(timg3.jpg);
background-position: -400px 0px;
}*/
</style>
</head>
<body>
<a href="#" class="cc"></a>
</body>
</html>
2.给表格添加样式
<!DOCTYPE html>
<html>
<head>
<title>给表格添加样式</title>
<meta charset="utf-8" />
<style type="text/css">
table{
width: 694px;
height: 50px;
margin: 0 auto;
border-collapse: collapse;
}
td{
border: 1px solid gold;
text-align-last: center;
}
td:hover{
background-color: orange;
}
a{
font-size: 16px;
font-family: "微软雅黑";
color: pink;
text-decoration: none;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">首页</a></td>
<td><a href="#">公司简介</a></td>
<td><a href="#">解决方案</a></td>
<td><a href="#">公司新闻</a></td>
<td><a href="#">行业动态</a></td>
<td><a href="#">招贤纳才</a></td>
<td><a href="#">联系我们</a></td>
</tr>
</table>
</body>
</html>
