zoukankan      html  css  js  c++  java
  • 小诀窍

    1. 用css3做一个关闭icon

    html代码:

    <div class="nav-icon">
           <div>合作机构授权<span class="close"></span></div>
    </div>

    css3代码:

    .nav-icon{
            position: relative;
            padding: 24px 0;
            background:#ffffff;
            width: 100%;
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: rgba(0,0,0,0.75);
            letter-spacing: 0;
            text-align: center;
        }
        .close {
           position: absolute;
           right: 10px;
           line-height: 20px;
           font-size: 30px;
           color: #C0C0C0;
        }
        .close::before {
            content: "0D7";
        }

    对于按钮中的叉按钮,用的是Unicode中的一种标识,以下这些也可以使用,标识 编码(16进制) Name 

    ✖ 2716 粗体乘法 
    ✗ 2717 交叉 
    ✘ 2718 粗体交叉 
    × 0D7 乘法符号 
    ⨯ 2A2F 向量乘积 
    x 78 小写字母 
    X 58 大写字母

    效果:

    2.场景:文本一行右对齐,多行左对齐

    .parent {
        flex:1;  //左右撑大
        overflow: visible;   //都是可见的
        white-space:normal //默认,可以换行
        text-align:right //一行向右对齐
    }
    .child {
         display:inline-block //一行显示行类,多行为块级元素
         text-align: left;  //多行左对齐
         word-break: break-all; 文本打散,解决中英文,中文一行,英文一行
    }
    
    
    <div class="parent">
        <p class="child">显示的文本</p>    
    </div>

    3.sticky foot

    在浏览器中,无论是内容超过一屏还是没有超过一屏,底下的按钮始终在页面底部而不是在浏览器底部。 可以通过一个div放在页面底部:

    position:absolute;
     100%; 
    bottom:0;

    4.利用伪类弹框居中

    借助伪类设置一个行内元素,设置height=100% vertical-align: middle; 弹出框相对伪类元素的样式显示,可以让弹出框居中。

    <style>
        .container{
          position: fixed;
          top:0;
          left:0;
          bottom: 0;
          right: 0;
          background: rgba(0,0,0,.5);
          text-align: center;
          font-size: 0;
          white-space: nowrap;
          overflow: auto;
        }
        .container::after {
           content: 'hello world!';
           display: inline-block;
           height: 100%;
           vertical-align: middle;
        }
        .dialog {
          display: inline-block;
          width: 10rem;
          height: 10rem;
          vertical-align: middle;
          text-align: left;
          font-size: 14px;
          white-space: normal;
          background: #ffffff;
          padding: 10px;
        }
    </style>
    <body>
      <div class="container"> 
      <div class="dialog">
          基于vertical-align的水平垂直居中 ---css精选
      </div>
    </div>
    </body>

    5.通过hover伪类来控制div的显示和隐藏

    .mgf_tips_icons:hover .float_tips_area{
         display:block;
         border: 1px solid #dedede;
      }
  • 相关阅读:
    css问题
    前端性能优化整理
    算法之排序
    浅谈webpack优化
    js设计模式
    事件模型
    浏览器缓存
    ucGUI 12864 从打点起
    ucGUI例程收藏
    Qt 自动搜索串口号列表
  • 原文地址:https://www.cnblogs.com/liuyinlei/p/9065920.html
Copyright © 2011-2022 走看看