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的黑色

后续补充……

CSS样式--实际开发总结的更多相关文章

  1. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  2. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  3. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  4. Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  5. TERSUS无代码开发(笔记04)-CSS样式设置

    CSS样式设置 1.常用显示样式 大小尺寸 说明  间距边距 说明  各类颜色 说明  width 宽 margin 外边距         color  颜色        height 高 pad ...

  6. 循序渐进BootstrapVue，开发公司门户网站（2）--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

    在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...

  7. Web前端开发基础 第四课（认识CSS样式）

    CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...

  8. WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒

    1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...

  9. 网站开发综合技术 第二部分 CSS样式表

    第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1 ...

随机推荐

  1. [转]SPICE仿真软件基础(整理)

    现在常用的SPICE仿真软件为方便用户使用都提供了较好的用户界面,在用仿真库中的元器件连成原理图后就可以进行仿真(当然要设置必要的仿真参数),但实际上只是用原理图自动产生了SPICE的格式语句,还是要 ...

  2. I/O Directory类

    Directory类 Directory类位于System.IO 命名空间.Directory类提供了在目录和子目录中进行创建移动和列举操作的静态方法.此外,你还可以访问和操作各种各样的目录属性. 1 ...

  3. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  4. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  5. SQLserver CASE WHEN

    declare @shuzu int set @shuzu=1 select (case @shuzu when '1' then '444' when '2'then '555' end) as ' ...

  6. iOS进阶之多线程

    多线程 注意:iOS关于UI的刷新和添加必须在主线程中操作! pthread的创建方法: pthread_t pthread; //第一个参数 线程指针 //第二个参数 线程的一些属性 //第三个参数 ...

  7. clip:rect矩形剪裁

    clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换. 矩形剪裁 还需要绝对定位 ...

  8. X3850M2安装CertOS 7 KVM 2--DMMP

    1,在DS8000中调整vg为单台服务器.检查另一台服务器内已经没有磁盘信息. 2,在余下的服务器中安装DMMP. 参考:http://edwin-wang.com/2012/08/device-ma ...

  9. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  10. pointer to function

    指针.函数.数字.结构体.指针函数.函数指针 初学不好区分,做点儿实验来有效区分一下,以下代码采用dev-C++平台测试 //pointer to fucntion 函数功能是 基地址加偏移量得到偏移 ...