CSS样式--实际开发总结

最新推荐文章于 2020-12-11 23:21:17 发布

anzhi8831

最新推荐文章于 2020-12-11 23:21:17 发布

阅读量135

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/seanchang/p/5202736.html

版权

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;
   }

超出长度显示省略号

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

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>

View Code

11.

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

后续补充……

转载于:https://www.cnblogs.com/seanchang/p/5202736.html

anzhi8831

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫