zoukankan      html  css  js  c++  java
  • H5+css3属性随笔

    20170227

    padding 简写属性在一个声明中设置所有内边距属性。

    margin 简写属性在一个声明中设置所有外边距属性。

    placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

    alt 属性规定在图像无法显示时替代文本。

    在电脑键盘上,esc是escape(逃跑)的简写,ctrl是control(控制)的简写,而alt是alter(改变)的简写。

    repeat:背景图像在垂直和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将只显示一次。

    margin:0 auto;使其左右居中

    margin:上 右 下 左;

    字体设置line-height使其上下居中

    margin-left :与左边的距离

    letter-spacing:使字与字之间有一定距离

    text-align:文字居中显示

    小技巧

    清除浮动的技巧:消除子元素浮动对父元素背景/边框/不能被子元素撑开的方法

    1. 父元素结尾处增加一空元素div,并清除其浮动。缺点:如果布局复杂,需要增加许多空标签。

    2.在父元素定义overflow:hidden(浏览器会自动检查浮动区域的高度)

    注:不必理会原理,知道用法即可。缺点:超出部分会被隐藏

    3.利用伪类:after 父元素内容后增加空元素,并清除浮动。

    :active 选择器用于选择活动链接。

    当你在一个链接上点击时,它就会成为活动的(激活的)。

    提示:请使用 :link 选择器对指向未被访问页面的链接设置样式,:visited 用于设置指向已访问页面的链接的样式, :hover 选择器用于设置鼠标指针浮动到链接上时的样式。

    animation 属性是一个简写属性,用于设置六个动画属性:

    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    animation:lunbo 5s linear infinite;animation-direction:normal;

     linear:匀速  infinite无限

    display:flex;多栏多列布局

    border-right:1px solid rgba(60,60,30,0.3);添加右边灰色边框

    20170301

     border-radius:圆角

     input:focus{}的妙用

    20170304

    1.display:flex弹性盒子

    2.overflow:hidden 超出隐藏

    3.background可以同时添加两张图片,同时设置浮动和大小

      background:url(../img/15.PNG),url(../img/2.PNG);
        background-repeat: no-repeat;
        background-size:20px,20px;
        background-position: left,right;

    4.flex:1;设置?一个数字,规定项目将相对于其他灵活的项目进行扩展的量。

    flex知识:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    5.border-radius:5px;设置圆角

    6. :nthchild(n):见css选择器

    7.背景颜色线性渐变

    background-image:linear-gradient(to bottom,#DAAAAA,#E87373 80%,#DAAAAA);
     

    8.给字体加阴影

    /*给字体加阴影 x y z*/
        text-shadow:0 1px 1px rgba(0,0,0,0.8);
    
  • 相关阅读:
    常见数据结构使用场景
    Java与算法之(4)
    Java与算法之(3)
    Java与算法之(2)
    Java与算法之(1)
    Maven适配多种运行环境的打包方案
    从头开始基于Maven搭建SpringMVC+Mybatis项目(4)
    从头开始基于Maven搭建SpringMVC+Mybatis项目(3)
    从头开始基于Maven搭建SpringMVC+Mybatis项目(2)
    从头开始基于Maven搭建SpringMVC+Mybatis项目(1)
  • 原文地址:https://www.cnblogs.com/liao13160678112/p/6437662.html
Copyright © 2011-2022 走看看