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">
.box1{
width: 1920px;
height: 1200px;
margin: 0 auto;
background-color: #bfa;
/*background-image: url(timg3.jpg)*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
3.背景屬性
<!DOCTYPE html>
<html>
<head>
<title>簡寫屬性背景</title>
<meta charset="utf-8" />
<style type="text/css">
body{
height: 5000px;
/*background-color: #bfa;
background-repeat: no-repeat;
background-image: url(timg3.jpg);
background-position: center;
background-attachment: fixed;*/
background-color: #bfa;
background: url(timg3.jpg) center center
no-repeat fixed;
}
</style>
</head>
<body>
</body>
</htmml>
4.表格
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta charset="utf-8" />
<style type="text/css">
</style>
</head>
<body>
<table border="1" width="50%" align="center">
<tr>
<td rowspan="2">A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td colspan="2">A2</td>
</tr>
</table>
</body>
</htmml>
5.給表格新增樣式
<!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>
6.導航標
<!DOCTYPE html>
<html>
<head>
<title>導航標</title>
<meta charset="utf-8" />
<style type="text/css">
table{
width: 960px;
height: 42px;
margin: 0 auto;
border: 1px solid gold;
}
a{
font-family: "微軟雅黑";
font-size: 12px;
padding: 5px 10px;
border: 1px solid gold;
background-color: gold;
text-decoration: none;
margin-right: 1px;
}
td{
overflow: hidden;
text-align: 30px;
padding-top: 5px;
text-align-last: center;
}
a:hover{
background-color: red;
}
tr{
padding-left: 300px;
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">上一頁</a></td>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td>...</td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">下一頁</a></td>
</tr>
</table>
</body>
</htmml>
7.固定單位
<!DOCTYPE html>
<html>
<head>
<title>固定定位</title>
<meta charset="utf-8" />
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
opacity: 0.5;
filter: alpha(opacity=50)
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
opacity: 0.5
}
.box3{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
left: 200px;
top: 200px;
opacity: 0.5;
}
/*.box4{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
}
.box5{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
}*/
</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>
8.給表格新增樣式
<!DOCTYPE html>
<html>
<head>
<title>給表格新增樣式</title>
<meta charset="utf-8" />
<style type="text/css">
table{
width: 300px;
margin: 0px auto;
/*border: 1px solid black;
border-bottom: 10px;*/
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}
/*tr:nth-child(odd){
background-color: #bfa
}*/
tr:nth-child(even){
background-color: #bfa
}
tr:hover{
background-color: blue;
}
</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>2</td>
<td>豬八戒</td>
<td>男</td>
<td>高老莊</td>
</tr>
<tr>
<td>2</td>
<td>豬八戒</td>
<td>男</td>
<td>高老莊</td>
</tr>
</table>
</body>
</html>
9.固定定位
<!DOCTYPE html>
<html>
<head>
<title>固定定位</title>
<meta charset="utf-8" />
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
}
.box4{
width: 100px;
height: 100px;
background-color: gold;
position: fixed;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div style="">
<div class="box1">
<div class="box4"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>