zoukankan      html  css  js  c++  java
  • 利用伪元素(:after)来清除浮动和画三角形

    1.清除浮动

    给父元素添加

    <div class="top">
        <div class="left">欢迎来到!</div>
        <div class="right">登录|注册</div>
    </div>
    
    .top .left{
        float: left;
    }
    .top .right{
        float: right;
    }
    .top:after{     //
        content:"";
        height:0px;
        0px;
        clear:both;
        display:block;
        overflow: hidden;或者visibility:hidden
    }

    2.画三角形

    常规实现:

    .tri-up{ 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red;  }
    .tri-left{ 0;height:0;border-top:20px solid transparent;border-bottom: 20px solid transparent;border-left: 20px solid red;}
    .tri-right{ 0;height:0;border-top:20px solid transparent;border-bottom: 20px solid transparent;border-right: 20px solid red;}
    .tri-down{ 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid red; }

    伪元素实现

    /* 下箭头 */
    .jiantou:after{
        display:block;
        content:'';
        border-top:8px solid #ff4d4d;
        border-left:8px solid transparent ;
         border-right:8px solid transparent ;
         border-bottom:8px solid transparent ;    
        /* 定位 */
        position:absolute;
        left:40%;
        top:100%;
    }

    或者下面写法

    /* 下箭头 */
    .jiantou:after{
        display:block;
        content:'';
        border-8px 8px 8px 8px;
        border-style:solid;
        border-color:#ff4d4d transparent transparent transparent; 
        /* 定位 */
        position:absolute;
        left:40%;
        top:100%;
    }
     
  • 相关阅读:
    log4j中Spring控制台输出Debug级信息过多解决方法
    spring使用aop
    过滤器(filter)实现用户登录拦截
    Eclipse将项目部署tomcat的webapps目录
    css初始化样例代码
    dede表单修改默认必填
    DedeCMS提交自定义表单加入验证码功能
    jQuery入门第三天
    jQuery入门第二天
    jQuery入门第一天
  • 原文地址:https://www.cnblogs.com/huxiuxiu/p/13370807.html
Copyright © 2011-2022 走看看