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. MFC-01-Chapter01:Hello,MFC---1.3 第一个MFC程序（04）

    1.3.3 框架窗口对象 MFC的CWnd类及其派生类为窗口或应用程序创建的窗口提供了面向对象的接口. CMainWindow是从CFrameWnd类派生而来,CFrameWnd模仿框架窗口的行为,可 ...

  2. 高精度快速预览打开dwg文件的CAD控件CAD Image DLL介绍及下载

    CAD Image DLL对于DXF格式, DWG格式(AutoCAD R12 到AutoCAD 2004/2005), PLT 以及 HPGL/HPGL2文件都有快速的显示速度和精度,开发者再也不会 ...

  3. 百度star编程赛-练习1

    ztr loves math http://acm.hdu.edu.cn/showproblem.php?pid=5675 显然:4 ^ n * (a + b) * (a -b) #include & ...

  4. volatile关键字和mutable关键字

    如果不用volatile关键字会如何?可能会造成一个后果就是:编译器发现你多次使用同一个变量的值,然后它可能会假设这个变量是不变的值,并且把这个变量的值放入寄存器中,方便下一次使用,提高存取速度. 一 ...

  5. IOS百度地图获取所在的城市名称

    笔者的app要实现定位所在省和城市名称,借此总结巩固一下! @interface VenueListVC : BasePageTableViewVC<BMKLocationServiceDele ...

  6. 基于css3的轮播效果

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

  7. 算法练习：寻找最小的k个数

    参考July的文章:http://blog.csdn.net/v_JULY_v/article/details/6370650 寻找最小的k个数题目描述:查找最小的k个元素题目:输入n个整数,输出其中 ...

  8. UE4 中在 Actor 中动态 Create Component 与ChildActor 的 小笔记

    Note:旧版本的UE4 的Attach 和12.13版本有些不一样 创建Component: UCpp_MyComponent* temp_imageCom = NewObject<UCpp_ ...

  9. REVERSE-Daily(4)-Elfcrackme2

    非常坑爹的一道题目,看似非常简单,实则有套路 链接: http://pan.baidu.com/s/1i4XLCd3 密码:9zho 为了练手 我会写出三种解法,包括 结合ascii码值范围的爆破,动 ...

  10. mac下安装和配置mysql5.7.9

    我安装的是5.7.9版本的sql 一开始在网上看到的都是其他版本的安装,弄得自己卸载了好几次 mysql就只有一个dmg主文件,安装这一个就好了. 5.7以后安装的mysql不再使用旧版的默认密码:r ...