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. SQL基础&笔试题

    仅以此篇博客纪念让我羞愧的一次笔试,作为对数据库基础的恶补. 一.SQL的基本概念: SQL是集数据定义语言DDL,数据操纵语言DML,数据控制语言DCL的功能于一体,可以独立完成数据库生命周期的全部 ...

  2. Common.Logging log4net Common.Logging.Log4Net 配置

    1.log4net 单独配置 log4net支持多种格式的日志输出,我这里只配置输出到本地的txt文件这种格式. <log4net> <root> <appender-r ...

  3. 将halcon导出的c++程序打包成dll库

     1.从“文件”菜单中,选择“新建”,然后选择“项目…”. 2.从“项目类型”窗格中选择“Visual C++”下的“Win32”. 3.从“模板”窗格中,选择“Win32 控制台应用程序”. 4.为 ...

  4. 如何用vs2010打开vs2013的项目？

    众所周知,用vs2013打开vs2010十分简单,无须做什么. 从VS2010开始,不再制作专有的文件格式,这只是一个xml格式的文本文件,其中决定了解决方案的平台工具集和VS版本. 既然.sln只是 ...

  5. 2014年7月份第3周51Aspx源码发布详情

    Froor高校校园网站源码  2014-7-18 [VS2010]源码介绍:这是一款有关高校门户网站的毕业设计源码,功能相对比较完善,界面也比较美观,对门户网站感兴趣的朋友们可以下载研究一下.该源码功 ...

  6. C语言程序设计第九次作业

    一.学习内容      本次课我们重点学习了怎样向函数传递数组,鉴于大家对函数和数组的理解和运用还存在一些问题,下面通过一些实例加以说明,希望同学们能够认真阅读和理解.      例1:火柴棍拼数字 ...

  7. Java 验证码工具类

    package com.wuyu.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import ...

  8. Ubuntu 64位下搭建ADT的种种问题

    我使用的adt版本为 adt-bundle-linux-x86_64-20140702.zip 1. Eclipse启动时提示 adb 无法加载动态链接库 libstdc++.so.6 以及  lib ...

  9. Ubuntu 使用Cisco VPN、AnyConnect、OpenConnect的方法。

    自己建的廉价Shadowsocks服务器总是不稳定,众所周知,PPTP在中国大陆已经废了.为了连接外网,所以购买了BlueCloud的VPN.但是他们家的VPN是使用Cisco VPN,可以使用Any ...

  10. 第三次作业 GIThub操作

    一.Git 客户端操作 1.在project文件夹初始化一个repository 2.添加并提交readme.txt 3.修改并查看状态 4.多次修改并提交 5.创建分支mv1并checkout至该分 ...