html右边侧边栏固定悬浮(PHP渲染)

最新推荐文章于 2021-07-07 14:48:03 发布

AreoWarm

最新推荐文章于 2021-07-07 14:48:03 发布

阅读量5.2k

点赞数 1

分类专栏： html php 文章标签：侧边栏悬浮

本文链接：https://blog.csdn.net/zhanjianjiu/article/details/85369220

版权

php 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

CSS:

.toolbars ul li{
            list-style: none;
        }
        .toolbars ul a{
            text-decoration: none;
            color: #666;
        }
        .toolbars ul a:hover{
            color:#969696!important;
        }
        /*京东右侧固定图标菜单栏*/
        .toolbars{
            position: fixed;
            top: 0;
            right: 0;
            height: 100%;
            width: 6px;
            background-color: #7a6e6e;
        }
        .toolbars ul{
            position:absolute;
            top: 40%;
            right: 0;
            transform: translate(0,-40%);
            z-index: 3;
        }
        .toolbars ul li{
            width: 34px;
            /* height: 35px; */
            margin-bottom: 30px;
            font-size:15px; 
            background-color: #7A6E6E;
            vertical-align:middle;
            text-align: center;
            position: relative;
        }
        .toolbars ul .jdvip .toolbars-ico{
            display: block;
            width: 34px;
            /* height: 35px; */
            color: #fff; 
            padding-top: 10px;
            padding-bottom: 10px;  
            background-color:red;
        }
        .toolbars ul .cart .toolbars-ico{
            display: block;
            width: 34px;
            /* height: 35px; */
            color: #fff;
            padding-top: 10px;
            padding-bottom: 10px;  
            background-color:blue;
        }

HTML:

<div class="toolbars">
	    	<ul>
	    		<li class="jdvip" style="display:{$kdaddress ? 'block': 'none'}">
	    			<i></i>
	    			<a class="toolbars-ico" href="{$kdaddress}">查<br>看<br>快<br>递</a> 
	    		</li>
	    		<li class="cart" style="display:{$dsaddress ? 'block': 'none'}">
	    			<a class="toolbars-ico" href="{$dsaddress}">180<br>天<br>读<br>书<br>计<br>划</a> 
	    		</li>
                </ul>     	
	    </div>

注：这里用了php渲染，单独样式只需要将html中的{}全部删掉就好了。