<link href="css/daohang.css" rel="stylesheet" /> <script src="js/daohang.js"></script> <link href="css/page1.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div id="top"> <div id="top_left"></div> <div id="top_right"> <a href="Default.aspx"><div class="item" id="item1" style="background-color: red;"></div></a> <a href="Default2.aspx"><div class="item"></div></a> <a href="Default3.aspx"><div class="item"></div></a> <a href="Default4.aspx"><div class="item"></div></a> <div class="item"></div> <div class="item"></div> </div> </div>
JS写外面：鼠标移入移出变色。
window.onload = function () { var items = document.getElementsByClassName("item"); for (var i = 0; i < items.length; i++) { items[i].onmouseover = function () { if (this.style.backgroundColor != "red") this.style.backgroundColor = "yellow"; }; items[i].onmouseout = function () { if (this.style.backgroundColor != "red") this.style.backgroundColor = "navy"; }; } };
#bigimg {
position: relative;
80%;
left: 10%;
height: 500px;
background-color: green;
min-800px;
box-shadow:25px 15px 25px black; 大图出现阴影
min- 1000px;/*限定宽度在某一范围；*/
.item {
position: relative;
120px;
height: 80px;
background-color: navy;
float: left;
margin-left: 10px;
-moz-border-radius: 2500px; 由正方形 变成 圆形，变成椭圆只需改变宽度
-webkit-border-radius: 2500px;
border-radius: 2500px;
}