1.   div 嵌套,子div中内容超出范围可以设置: display:inline-block; overflow:auto 即可让子div中出现滚轴

2.   让div中内容垂直方向居中 设置:height:div高度;line-height:div高度 即可

3. img.animation { transition: all 400ms ease 0s;} img.animation:hover {transform: scale(1.1);}//块级元素包围img  块元素 添加overflow:hidden  可实现图片放大特效

4. 使span(或其他)显示在div中指定位置  <div style='position:relative'><span style='position:absolute; left:20px; height:30px'></span></div>

5. 给input placeholder设置样式

  :-webkit-input-placeholder { /* WebKit browsers */
       font-size:20px;
       color:    red;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size:20px;
        color:   red;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size:20px;
        color:   red;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size:20px;
        color:    red;
    }

6.  

超出长度显示省略号

一般要指定宽度,然后给如下四个属性。

display:bolck;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

7. transform 使元素变形转换  主要 scale(放大缩小 默认1);tanslate(x,y)位移 http://www.w3cplus.com/content/css3-transform

ui li:hover{transform:scale(2)}//放大

ui li:hover{transform:translate(0,-80px)}//上移

8.transition  :允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。http://www.w3cplus.com/content/css3-transition

  ransition主要包含四个属性值:

      执行变换的属性:transition-property,  默认属性 all

      变换延续的时间:transition- duration,

      在延续时间段,变换的速率变化 transition-timing-function,

1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

      变换延迟时间transition-delay

ui li{transition: all 0.4s ease-in-out 0s;}

例如:3中的图片放大特效

9.隐藏div滚轴但div仍可以滚动  

在div外面再套一个div。这个div设置overflow:hidden,而内容div设置 overflow-y: auto;overflow-x: hidden;然后再设置外层div的width小于内层div的width。

<div class="div-wrap">
<ul class="nav">
<li>sean</li>
</ul>
</div>
.div-wrap {float:left; min-height:500px;width: 95px;overflow: hidden; margin: 0px auto;}/*可以根据$(window).height()大写js控制div-wrap大小*/
.nav {padding-top: 46px; margin-bottom: 10px;height:90%;width: 220px;overflow-y: auto;overflow-x: hidden;}

10. css倒三角  

<html>
<head>
<title></title>
<style type="text/css">
div{
width: 0px;
height: 0px;
border: solid;
border-color: #666 transparent;
border-width: 5px 5px 0 5px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 11.   

background:rgba(0,0,0,0.5);透明度为0.5的黑色

后续补充……

05-28 08:34