zoukankan      html  css  js  c++  java
  • 今日学习新的css样式

    z-index:1000; 离眼睛的层级关系,值越大离眼睛越近,无单位级别

    font-weight:800; 用样式把文字加粗,无单位级别

    display:block;   盒子模型显示

    word-break:break-all; 强制换行

    border-radius:5px;  css3新技术,让边框出现圆滑弧度

    padding:10px 内部补白文字到边框的距离增加10px空白

    margin:10px 外补白,边框外面四周有10px的空隙

    text-indent:26px 段落缩进2个字符可以计算如:font-size:12px; letter-spacing:1px; 2个字的缩进为(12+1)*2px

    overflow:auto;    如果div比较小会出现滚动条,如果足够装下则不出现

    overflow:hidden; 隐藏超过div框架之外的内容

    ul,ul li{

    list-style:none;           去除ul前面的黑色点点

    }

    -webkit- columns: auto 3;  让一段段落分成3栏  谷歌浏览器前缀

    为了增强兼容性可以这样写:

    -ms- columns: auto 3;            IE浏览器前缀

    -0- columns: auto 3;               欧鹏浏览器前缀operal

    -moz- columns: auto 3;           火狐浏览器前缀firfox

            columns: auto 3; 

    -webkit- column-rule:1px dashed gray; 给段落加入1像素的灰色的虚线

    -webkit-column-gap:30px  栏的间距

    position:fixed;  固定

    -webkit-transtion:all 2s ease-in  0     动画 2s总运行时间  ease-in动画效果   0延迟时间从0开始

    文字效果变换

    text-transform:low 小写字母、

    text-transform:up   大写

    text-transform:cap 首字母大写

    text-shadow:2px 2px 5px red; 上移 下移 阴影大小 阴影的颜色

    tr:nth-child(2n){background-color:red;}    奇偶行变色

    tr:nth-child(2n+1){background-color:green;}

    tr:first-child{

                            font-size:16px;                       控制第一行的样式

                             font-weight:800px;

                            background-color:gary;

                    }

        h1{
          counter-increment:item;  /* 定义编号 */
     } 
     h1:before{
         content: counter(item)"、"; /* 使用编号 */
     }
     /*h1:after{content:'-end'}*/
     
     a:before{
      content:url(images/arrow.png);
     }
     a:after{
         content:'-'attr(href); 
     }

    -webkit-transform:rotate(45deg)旋转45度角

    -webkit-transform:skew(20deg,0)扭曲20度

    -wbkit-transform:scale(0.5,0.5) 小于1为缩放 大于1为扩放

    -webkit-transfom:translatex(150px) translateY(100px); x轴水平翻转150px,y轴垂直翻转100px;

    border-radius:150px 100px 30px 100px;从左上角开始四个角的弧度

    outline:none; 去掉input自带的边框

  • 相关阅读:
    leetcode 70 Climbing Stairs
    leetcode 203 Remove Linked List Elements
    【HMM】
    【设计总结】
    【docker】导出导入容器
    【设计工具】样机图
    【设计细节】apple sound
    【产品分析】盒马生鲜 套路
    【喂到嘴经济】这个词有点意思
    【需求分类】KANO模型
  • 原文地址:https://www.cnblogs.com/lsr111/p/4391228.html
Copyright © 2011-2022 走看看