zk1

网页代码:


<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/xinjiang.css"/>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
var i=0;
$("#hehe").live("click",function(){
  if (i%2==0) {
  $("#tu").attr({"src":"../img/a11.jpg"});
  i+=1;
  }else{
  $("#tu").attr({"src":"../img/a3.jpg"});
  i+=1;
  }
      
})
})
</script>
</head>
<body>
<div id="header">
<div id="a1">
<div id="d3">
<div id="d1">
<br /><br /><br /><br /><br /><br />
<span style="font-size: 70px; text-align: center; color: white;">&nbsp;&nbsp;新疆</span>
</div>
<div id="d2">
<br /><br /><br /><br /><br /><br /><br /><br />
<span style="font-size: 30px; color: white;">行知书</span>
</div>
</div>
</div>
<div id="a2">
<table border="0" style="width: 1000px; text-align: center; line-height: 45px;" >
<tr>
<td id="aa">
<a href="#" id="hehe">首页</a>
</td>
<td id="aa">
<a href="#" id="hehe">新疆简介</a>
</td>
<td id="aa">
<a href="#" id="hehe">风十人情</a>
</td>
<td id="aa">
<a href="#" id="hehe">吃在新疆</a>
</td>
<td id="aa">
<a href="#" id="hehe">路线选择</a>
</td>
<td id="aa">
<a href="#" id="hehe">自助行</a>
</td>
<td id="aa">
<a href="#" id="hehe">摄影摄像</a>
</td>
<td id="aa">
<a href="#" id="hehe">游记精选</a>
</td>
<td id="aa">
<a href="#" id="hehe">资源下载</a>
</td>
<td id="aa">
<a href="#" id="hehe">雁过留言</a>
</td>

</tr>
</table>
</div>
<div id="b1">
<div id="c1">
<img src="../img/a11.jpg"/ style=" width: 250px; height: 200px;">
</div>
<div id="c2">
<img src="../img/a10.jpg" style=" width: 250px; height: 200px;">
</div>
</div>
<div id="b2">
<img src="../img/a8.jpg"/ width="500px" height="400px" id="tu">
</div>
<div id="b3">
<div id="e1">
<img src="../img/a3.jpg" style=" width: 250px; height: 200px;">
</div>
<div id="e2">
<img src="../img/a7.jpg" style=" width: 250px; height: 200px;">
</div>
</div>
</div>
</body>

</html>




css:

#header{
width: 1000px;
height: 1000px;
margin: 0 auto;
}
#a1{
width: 1000px;
height: 240px;
background: url(../img/bb.jpg);
padding-top: 5px;
}
#d1{
width: 200px;
height: 240px;
float: left;
}
#d2{
width: 130px;
height: 240px;
float: left;
}
#a2{
width: 1000px;
height: 50px;
background: #cbd8e3;
border-bottom: 3px solid black;
}
#b1{
width: 250px;
height: 400px;
background: paleturquoise;
float: left;
}
#b2{
width: 500px;
height: 400px;
background: blueviolet;
float: left;
}
#b3{
width: 250px;
height: 400px;
background: yellow;
float: left;
}
#c1{
width: 250px;
height: 200px;
background: #8A2BE2;
}
#c2{
width: 250px;
height: 200px;
background: #FFFF00;
}
#d3:hover{
transition: all 1s;
display: block;
transform: rotate(360deg);
}
#c1:hover{
transition: all 1s;
display: block;
transform: scale(1.5);
}
#c2:hover{
transition: all 1s;
display: block;
transform: scale(1.5);
}
#e1{
width: 250px;
height: 200px;
background: #8A2BE2;
}
#e2{
width: 250px;
height: 200px;
background: #FFFF00;
}
#e1:hover{
transition: all 1s;
display: block;
transform: rotate(60deg);
}
#e2:hover{
transition: all 1s;
display: block;
transform: rotate(60deg);
}
#aa:hover{
transition: all 1s;
display: block;
background: red;
}
#hehe:hover{
transition: all 1s;
display: block;
transform: scale(1.2);
color: yellow;

}


全功能实现

阅读更多
文章标签: 1
个人分类: s a' a
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭