目录
一,样式的基本语法
1 标签选择器
input{
width:120px;
border:solid 1px #ff0000;
}
2 ID选择器
#flow{color:#ff0000}
3 类选择器
.center{
text-align:center;
font-weight:bold;
}
二,常见样式
三,样式表类型
1 行内样式
<input name="user" type="text" style="width:100px; border:solid 1px #cccccc;" />
2 内部样式表
<html>
<head>
<title>内部样式表</title>
<style type="text/css">
body{
font-size:12px;
line-height:20px;
}
.video{
margin: 3px;
float: left;
}
</style>
</head>
3 外部样式表
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
……
</body>
</html>
四,JavaScript访问样式的常见方法
1. 使用getElement系列方法访问
2. 改变样式属性:
className属性
Style属性
五,Style对象的常用属性
六,JavaScript中常用的事件列表
七,案例
案例一 制作广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="position: fixed;">
<img src="img/adv.jpg" >
</div>
<div align="center">
<img src="img/main1.JPG" >
<img src="img/main2.JPG" >
<img src="img/main3.JPG" >
</div>
</body>
</html>
案例二 鼠标选中效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a{
border: 2px solid red;
}
.b{
}
</style>
</head>
<body>
<table width="2000px">
<tr>
<td><img src="img/new_01.jpg" onmousemove="fa(this)" onmouseleave="fb(this)"></td>
<td><img src="img/new_02.jpg" onmousemove="fa(this)" onmouseleave="fb(this)"></td>
<td><img src="img/new_03.jpg" onmousemove="fa(this)" onmouseleave="fb(this)"></td>
</tr>
</table>
<script type="text/javascript">
function fa(obj){
obj.className="a";
}
function fb(obj) {
obj.className="b";
}
</script>
</body>
</html>
案例三 鼠标选中改变效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aa{
border: 1px solid whitesmoke;
}
.a{
border: 1px solid red;
}
.b{
}
</style>
</head>
<body>
<table class="aa" align="center" width="1000px">
<tr align="center">
<td colspan="5"><img src="img/show3_big.jpg" id="sa"></td>
</tr>
<tr align="center">
<td><img src="img/show1.jpg" onmousemove="fa(this,'show1_big.jpg')" onmouseleave="fb(this)"></td>
<td><img src="img/show2.jpg" onmousemove="fa(this,'show2_big.jpg')" onmouseleave="fb(this)"></td>
<td><img src="img/show3.jpg" onmousemove="fa(this,'show3_big.jpg')" onmouseleave="fb(this)"></td>
<td><img src="img/show4.jpg" onmousemove="fa(this,'show4_big.jpg')" onmouseleave="fb(this)"></td>
<td><img src="img/show5.jpg" onmousemove="fa(this,'show5_big.jpg')" onmouseleave="fb(this)"></td>
</tr>
</table>
</body>
<script type="text/javascript">
function fa(obj,abc){
obj.className="a";
var a=document.getElementById("sa");
a.setAttribute("src","img/"+abc);
}
function fb(obj){
obj.className="b";
}
</script>
</html>