zoukankan      html  css  js  c++  java
  • 伪类:after的使用以及结合attr来添加属性的技巧

    本案例以实现侧边栏的效果为例来说明

    直接上代码看效果:

    css

    <style type="text/css">
            *{margin:0;padding:0;list-style: none;}
            
            ul{position: fixed; right:0;top:50%;  transform: translate(0,-50%); }
            li{width:20px; height:20px; background:#666 url(img/i1.png) no-repeat center center;padding:5px; margin: 10px 0; border-radius:4px 0 0 4px ;cursor: pointer;position: relative;  }
            li:nth-of-type(2){ background-image: url(img/i2.png); }
            li:nth-of-type(3){ background-image: url(img/i3.png); }
            
            li:after{ content:attr(name); width:80px; line-height:30px; background-color:#900; position: absolute;top:0; right:-90px;color:#fff;padding-left: 10px; 
                transition:all .5s; 
                z-index: -1;  }
    
            li:hover:after{ right:30px; }
            li:hover{ border-radius: 0; background-color: #900; }
        </style>

    html

    利用name像id,class那样是元素都可以添加的特征,然后利用attr在css里来添加属性,再让其在:after里面进行添加内容为文字

    这种运用方式很巧妙

    <ul>
            <li name="购物车"></li>
            <li name="我的关注"></li>
            <li name="我的脚印"></li>
        </ul>
  • 相关阅读:
    爬虫 效率
    Scrapy 数据存储 图片和文件
    装饰器
    Django 项目部署测试
    Django 项目部署
    Django JS
    三十九、管理信息系统 第三部分 作业
    三十八、模型分离(选做)
    三十七、密码保护
    三十六、实现搜索功能
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/6130378.html
Copyright © 2011-2022 走看看