导航布局

最新推荐文章于 2019-08-09 15:18:00 发布

weixin_30603633

最新推荐文章于 2019-08-09 15:18:00 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/yp11/p/5966276.html

版权

    <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;

}

转载于:https://www.cnblogs.com/yp11/p/5966276.html

weixin_30603633

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航布局

<link href="css/daohang.css" rel="stylesheet" /> <script src="js/daohang.js"></script> <link href="css/page1.css" rel="stylesheet" /></head>&l...
复制链接

扫一扫