zoukankan      html  css  js  c++  java
  • CSS代码片段

    定位:
        将元素居中
        将元素水平居中
        将元素垂直居中
    样式:
        文字毛玻璃效果
        
        
        
        
        
        
    -------------------------------------------代码------------------------------------------------------
        
    将元素居中:
        1.使用绝对定位实现1
        {
            width: 50px;
            height: 50px;    /*设置元素宽高*/
            position: absolute;    /*修改为绝对定位*/
            top: 50%;
            left: 50%;        /*设置与上、左的距离*/
            margin-top: -25px;
            margin-left: -25px;    /*外边距分别为宽高的一半*/
        }
        2.使用绝对定位实现2
        {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: tranplate(-50%, -50%);
        }
        3.使用父元素文本流水平居中,单元格显示垂直居中
        #parent{
            text-align: center;    /*设置子元素水平居中*/
            display: table-cell;    /*设置为表格单元格显示*/
            vertical-align: middle;    /*设置垂直对齐方式为居中*/
        }
        #child{
            display: inline-block;
        }
        
    将元素水平居中
        1.使用外边距自动实现(相对父元素居中)
        {
            margin: 0 auto;
        }
        2.将父元素文本流水平居中,配合子元素变成行内快(child里的文字也会水平居中,可以在.child添加text-align:left;还原)
        #parent{
            text-align: center;
        }
        #child{
            display: inline-block;
        }
        
    将元素垂直居中
        1.将父元素设置为表格单元格显示,使内容垂直居中(子元素垂直居中)
        #parent{
            display: table-cell;    /*设置为表格单元格显示*/
            vertical-align:middle;    /*设置垂直对齐方式为居中*/
        }
        
    文字毛玻璃效果
        1.将文字设置成黑色透明,然后加上投影
        {        
          color:rgba(0,0,0,0);
          text-shadow: 0 0 10px black;
        }
  • 相关阅读:
    整理Eclipse常用快捷键
    前端网站资源推荐
    Node.js 官方示例中的 ECMAScript 2015
    D3.js 入门系列 — 选择元素和绑定数据
    D3.js 入门系列
    PlaceHolder的两种实现方式
    Vue.js 是什么
    Webstorm官方最新版本for Mac版本 不用注册码/破坏原文件
    vue.js 学习 仅自己加强记忆
    jQuery 动画animate,显示隐藏,淡入淡出,下拉切换,过渡效果
  • 原文地址:https://www.cnblogs.com/hujingnb/p/10632968.html
Copyright © 2011-2022 走看看