web111

* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px; }

.list_dt {
    background: rgb(0, 0, 0);
    color: white;
    width: 120px; padding: 0 40px 0 20px;
    height: 34px;
    line-height: 34px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    border-bottom: 1px solid #464646; }

.list_dt:hover {
    background: #222;}
.list_dt:hover ._after {
    display: block;
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #4285F4; }
/*.list_dt_icon {*/
/*position: absolute;*/
/*right: 10px;*/
/*top: 9px;*/
/*display: block;*/
/*width: 16px;*/
/*height: 16px;*/
/*background: url("images/downWhite.png") no-repeat;  }*/

.list_dd { display: none; }

.list_li{
    background: #4e4e4e;
    list-style-type: none;
    color: white;
    width: 120px;
    padding: 5px 30px;
    height: 34px;
    line-height: 34px;
    cursor: pointer;
    border-bottom: 1px solid #6b6b6b; }

.list_li:hover{ background: #4285F4; }

.floors{
    background-color: #1b1060;
}
.count{
    /*background: #dab193;*/
    cursor: pointer;
}
.count:hover{border: 1px solid #ffffff;}  /*background: #f0cdb3;*/
.mark{
    height: 38px;
    background: url(image/mark.png) 0 0 no-repeat;
    background-size: 100%;
}
.tool{
    width: 68px;
    height: 47px;
    font-size: 13px;
    text-align: center;
    color: #ffffff;
    background: rgba(174, 174, 174, 0.85);
    position: absolute;
    top: 16px;
    left: 36px;
    display: none;
}


/*N3-2F*/
#AP035{
    width: 10px;
    height: 10px;
    position: absolute;
    left: 86px;
    top: 489px;
}
#AP035:hover >.tool{
    display: block;
}
/*N3-3F*/
#AP082{
    width: 10px;
    height: 10px;
    position: absolute;
    left: 123px;
    top: 54px;
}
#AP082:hover >.tool{
    display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入boorstrap，jquery-->
    <!--引入本地的js文件-->
    <script type="text/javascript" src="zhao/js1.js"></script>
    <style>
        div[class*="col-md"]{
            border: 1px solid rgba(128, 118, 111, 0.68);
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="background: rgba(52, 58, 64, 1);">
        <div class="row">
            <!--下拉菜单-->
            <div class="col-md-2">
                <dl>
                    <!--N1-->
                    <dt class="list_dt">
                        <span class="_after"></span>
                    <p style="align-content: center">N1</p>
                    </dt>
                    <dd class="list_dd">
                        <ul>
                            <!--<li class="tab_selected" onclick="ShowImage(1, 'tab');">-->
                            <li class="list_li" onclick="ShowImage(1, 'F');">
                                N1-1F
                            </li>
                            <li class="list_li" onclick="ShowImage(2, 'F');">
                                N1-2F
                            </li>
                                <!--N1-3F,N1-4F, N1-5F 同理-->
                        </ul>
                    </dd>
                    <!--N2，N3，N4，N5同理-->
                </dl>
            </div>
            <!--图片轮播-->
            <div class="col-md-10">
                <!--N1-->
                <!--N1-1F-->
                <div class="floors" style="display:block" id="F1">
                    <!--插入svg文件-->
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(".list_dt").on("click",function () {
        $('.list_dd').stop();
        $(this).siblings("dt").removeAttr("id");
        if($(this).attr("id")=="open"){
            $(this).removeAttr("id").siblings("dd").slideUp();
        }else{
            $(this).attr("id","open").next().slideDown().siblings("dd").slideUp();
        }
    });
</script>
</html>

function ShowImage(page, tag)
{
    var i = 1;
    var el;
    while (el = document.getElementById(tag + i)) {
        if (i == page)
            el.style.display = 'block';
        else
            el.style.display = 'none';
        i++;
    }
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="index.css"/>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <div class="div_bg">
    <!-- 201 -->
    <div class="count" id="a_201">
        <div class="shuzi">201</div>
        <div class="tool">
            <span>201</span><br/>
            <span>海澜之家</span>
        </div>
    </div>
    <!-- 202 -->
    <div class="count" id="a_202">
            <div class="shuzi">202</div>
            <div class="tool">
                <span>202</span><br/>
                <span>幸福之家</span>
            </div>
        </div>

  </div>

</body>
</html>

.div_bg{
    height: 700px;
    background: url(image/lou.png) 0 0 no-repeat;
    background-size: 40%;
    position: relative;
}
.count{
    background: #dab193;
    cursor: pointer;
}
.count:hover{background: #f0cdb3;border: 1px solid #ffffff;}
.shuzi{
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    font-weight: 500;
}
.tool{          
    width: 68px;
    height: 47px;
    font-size: 13px;
    text-align: center;
    color: #ffffff;
    background: rgba(174, 174, 174, 0.85);;
    position: absolute;
    top: 16px;
    left: 36px;
    display: none;
}

#a_201{
    width: 42px;
    height: 25px;
    position: absolute;
    top: 306px;
    left: 312px;
}
#a_201:hover >.tool{
    display: block;
}

#a_202{
    width: 42px;
    height: 25px;
    position: absolute;
    top: 336px;
    left: 312px;
}
#a_202:hover >.tool{
    display: block;
}

zhao_crystal

发布了82 篇原创文章 · 获赞 20 · 访问量 10万+

私信关注

猜你喜欢