yp秋水伊人

导航

导航布局

 

 

    <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;
width: 80%;
left: 10%;
height: 500px;
background-color: green;
min-width:800px;
box-shadow:25px 15px 25px black;  大图出现阴影

 min-width: 1000px;/*限定宽度在某一范围；*/

.item {
position: relative;
width: 120px;
height: 80px;
background-color: navy;
float: left;
margin-left: 10px;

-moz-border-radius: 2500px;   由正方形 变成 圆形，变成椭圆只需改变宽度
-webkit-border-radius: 2500px;
border-radius: 2500px;


}

posted on 2016-10-16 11:48  yp秋水伊人  阅读(513)  评论(0)  编辑  收藏  举报