左侧楼层导航

「爱情、让人受尽委屈。」 2021-11-17 17:04 266阅读 0赞

<div class="FloorsDiv" style="display: block;">  
<div class="smwrap" style="display:inline-block">  
    <span class="floor">1F</span>      
    <span class="hide"><a href="\#FloorDiv01">搜索通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
</div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
    <span class="floor">2F</span>  
    <span class="hide"><a href="\#FloorDiv02">微信通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
    <span  class="floor">3F</span>  
    <span class="hide"><a href="\#FloorDiv03">建站通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
    <span  class="floor">4F</span>  
    <span class="hide"><a href="\#FloorDiv04">网店通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
    <span  class="floor">5F</span>  
    <span class="hide"><a href="\#FloorDiv05">外贸通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
    <span  class="floor">6F</span>  
    <span class="hide"><a href="\#FloorDiv06">设计通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
   <span  class="floor">7F</span>  
    <span class="hide"><a href="\#FloorDiv07">企业通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
     <span  class="floor">8F</span>  
    <span class="hide"><a href="\#FloorDiv08">法务通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
     <span  class="floor">9F</span>  
    <span class="hide"><a href="\#FloorDiv09">知产通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
     <span  class="floor">10F</span>  
    <span class="hide"><a href="\#FloorDiv10">财税通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
<div class="smwrap" style="display:inline-block">  
     <span  class="floor">11F</span>  
    <span class="hide"><a href="\#FloorDiv11">社保通</a></span>  
    <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">  
    </div>  
    <div style="clear: both;"></div>  
</div>

css

/\*-------------------楼层---------------\*/  
 .FloorsDiv \{  
width: 47px;  
height:auto;  
display: inline-block;  
position: fixed;  
z-index: 99998;  
left:100px;  
bottom: 50px;  
text-align:center;  
background:\#fff;  
color:\#a9a9a9;  
\}  
 .FloorsDiv span\{  
     width:47px;  
     height:25px;  
     line-height:25px;  
     float:left;  
     font-size:14px;  
     text-align:center;  
     \}  
 .FloorsDiv span a\{  
     font-size:12px;  
     color:\#a9a9a9;\}  
      
.hide\{display:none;\}  
\#FloorDiv01,\#FloorDiv02,\#FloorDiv03,\#FloorDiv04,\#FloorDiv05,\#FloorDiv06,\#FloorDiv07,\#FloorDiv08,\#FloorDiv09,\#FloorDiv10,\#FloorDiv11  
\{  
    display:inline-block;  
    \}

转载于:https://www.cnblogs.com/zhouyx/p/5508070.html