css常用效果总结

1、给input的placeholder设置颜色

 .phColor::-webkit-input-placeholder { /* WebKit, Blink, Edge */

     color:maroon;

 }

 .phColor:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

    color:maroon;opacity:;

 }

 .phColor::-moz-placeholder { /* Mozilla Firefox 19+ */

    color:maroon;opacity:;

 }

 .phColor:-ms-input-placeholder { /* Internet Explorer 10-11 */

    color:maroon;

 }

2、透明度

.demo{

    width:100%;height:25px;background:orange;

    /*兼容IE6+,Chrome,Firefox--注意不要更改下面三条属性的次序*/

    opacity: 0.3;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=30);

}

<p class="demo">hello world</p>

3、超出长度显示省略号

width:300px;height:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

其他文本类属性有：

(1)word-wrap: normal|break-word;

(2)word-break: normal|break-all|keep-all;

normal 使用浏览器默认的换行规则；break-all 允许在单词内换行。

(3)white-space: normal|pre|nowrap|pre-wrap|pre-line;

normal 默认 - 空白会被浏览器忽略；nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。(常用)

4、textarea禁止拖动

resize: none | both | horizontal | vertical

none：用户不能操纵机制调节元素的尺寸；both：用户可以调节元素的宽度和高度；

horizontal：用户可以调节元素的宽度；vertical：让用户可以调节元素的高度；

5、按钮-鼠标悬浮-背景色过渡变化(transtion)

 a{padding:8px 16px;border-radius:5px;background-color:#396;color:#fff;text-decoration:none;

   transition:background-color .3s ease-in-out .1s;

   -webkit-transition:background-color .3s ease-in-out .1s;  /*Safari 需要前缀 -webkit-*/

 }

 a:hover{background-color:#063;}

 <a href="#">hello</a>

6、列表-鼠标悬浮-缩进过渡变化(transtion)

<style>

.box .list{width:300px;border:1px solid #ccc;border-radius:5px;overflow:hidden;padding:5px 16px;list-style:none;}

.box .list li{padding:6px 0 6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all 0.25s ease-in-out 0s;}

.box .list li:hover{margin-left:8px;}

.box .list li a{color:#333;text-decoration:none;}

.box .list li span{color:aqua;font-size:20px;padding-right:6px;}

/*text-overflow:ellipsis;显示省略符号来代表被修剪的文本.

  white-space:nowrap;文本不会换行,文本会在在同一行上继续,直到遇到br标签为止.*/

</style>

<div class="box">

    <ul class="list">

        <li class=""><span>•</span><a href="#">list1 list1 list1 list1 list1 list1 list1 </a></li>

        <li class=""><span>•</span><a href="#">list2 list2 list2 list2 list2 list2 list2</a></li>

        <li class=""><span>•</span><a href="#">list3 list3 list3 list3 list3 list3 list3</a></li>

    </ul>

</div>

7、横线-文字-横线

ul{padding:0;margin:30px auto;list-style:none;}

ul .list1{border-bottom:1px solid #666;margin-bottom:-15px;}

ul li a{width:100%;display:block;box-sizing:border-box;padding:5px;text-align:center;text-decoration:none;color:orange;}

ul li a span{background:#fff;padding:0 10px;}

<ul>

    <li class="list1"></li>

    <li class="list2"><a href="javascript:;"><span>Hello world</span></a></li>

</ul>

8、table-border

 <!DOCTYPE html>

 <html>

 <head lang="en">

 <meta charset="utf-8" />

 <style type="text/css">

 /*table-1*/

 #table1{border-collapse:collapse;}

 #table1, #table1 td, #table1 th{border:1px solid black;}

 /*table-3*/

 #table3{border-collapse:separate;border-spacing:10px 10px;}

 #table3, #table3 td, #table3 th{border:1px solid black;}

 /**

 * border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

 * 可能的值：

 * separate--默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

 * collapse--如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

 * inherit--规定应该从父元素继承 border-collapse 属性的值。

 **/

 /**

 * border-spacing--属性设置相邻单元格的边框间的距离,在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。

 **/

 </style>

 </head>

 <body>

 <h2>table-1:</h2>

 <table id="table1">

     <tr><th>Firstname</th><th>Lastname</th></tr>

     <tr><td>Bill</td><td>Gates</td></tr>

     <tr><td>Steven</td><td>Jobs</td></tr>

 </table>

 <p><b>注释：</b>如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误。</p>

 <hr>

 <h2>table-2:</h2>

 <table border='1' cellspacing='0'>

     <tr><th>Firstname</th><th>Lastname</th></tr>

     <tr><td>Bill</td><td>Gates</td></tr>

     <tr><td>Steven</td><td>Jobs</td></tr>

 </table>

 <hr>

 <h2>table-3:</h2>

 <table id="table3">

     <tr><th>Firstname</th><th>Lastname</th></tr>

     <tr><td>Bill</td><td>Gates</td></tr>

     <tr><td>Steven</td><td>Jobs</td></tr>

 </table>

 </body>

 </html>

9、css-图片铺满屏幕

html,body{height:100%;overflow:hidden;padding:;margin:;}

.box{height:100%;background:url(bg.png) no-repeat;background-size:cover;background-position:50% 50%;}

注意：

(1)、全屏的元素及其父元素都要设置height:100%。

(2)、将html、body标签设置height:100%; 或者 min-height:100%;

注：height:100%;是跟随其父元素高度变化而变化的。PC端的图片尺寸一般使用1920*1080。

10、图片文字列表 (2016-01-25)

实现效果图如下：

html：( 代码十分优雅哦！ )

 <ul>

     <li class="step1">下载XXX应用</li>

     <li class="step2">60秒在线申请</li>

     <li class="step3">线下签约</li>

 </ul>

css：

 /*reset-style*/

 html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,

 a,em,img,strong,sub,sup,i,dl,dt,dd,ol,ul,li,fieldset,

 form,label,table,caption,tbody,tfoot,thead,tr,th,td {

     margin:;

     padding:;

 }

 body {

   font-family: "Microsoft yahei", Helvetica, Arial, sans-serif;

   font-size: 14px;

   line-height: 1.42857143;

   background-color: #fff;

 }

 ol,ul {

     list-style: none;

 }

 /*本页面的样式*/

 ul li{display:inline-block;position:relative;text-align:center;margin:10px 60px;font-size:18px;}

 ul li:before{width:184px;height:185px;display:block;margin-bottom:20px;}

 ul .step1:before{content:url(ico1-c.jpg);}

 ul .step2:before{content:url(ico2-c.jpg);}

 ul .step3:before{content:url(ico3-c.jpg);}

 ul li:after{content:url(threeStep.jpg);position:absolute;top:82px;left:195px;}

 ul .step3:after{content:'';}

11、进度条效果 (2016-04-16)

效果图：

实现方法1：

html：

 <div class="box">

     <div class="progress">

         <div style="width:60%">

             <div class="percent"></div>

         </div>

     </div>

 </div>

css：

 *{padding:;margin:;}

 .box{margin:20px 10px;}

 .progress{width:200px;height:10px;border:1px solid #ccc;background:#eee;border-radius:5px;}

 .percent{height:10px;background:maroon;border-radius:5px;animation:line 2s;-webkit-animation:line 2s;}

 @keyframes line{

     from{ width :; }

     to{ width : 100%; }

 }

 @-webkit-keyframes line{

     from{ width :; }

     to{ width : 100%; }

 }

实现方法2：

html：

 <div id="process-box">

     <div id="process-bar"></div>

     <div id="process-txt">0%</div>

 </div>

css：

 body{margin:;padding:;}

 #process-box{width:200px;height:15px;position:relative;border:1px solid #333;margin:20px;border-radius:20px;}

 #process-box #process-bar{width:200px;height:15px;position:absolute;left:;top:;background:maroon;clip:rect(0px,0px,60px,0px);border-radius:20px;}

 #process-box #process-txt{width:200px;height:15px;position:absolute;left:;top:;line-height:15px;text-align:center;color:#999;}

javascript：

 var Obar = document.getElementById('process-bar'),

     Otxt = document.getElementById('process-txt');

 var process_txt = 0,

     process_num = 0;

 setInterval(function(){

     if(process_num <= 200){

         Obar.style.clip = 'rect(0px,' + process_num + 'px,60px,0px)';

         Otxt.innerHTML = parseInt(process_num/200*100) + '%';

         process_num ++;

     }

     return;

 }, 10);

12、css实现简单的幻灯片效果 (2016-04-26)

html：

<div class="banner"></div>

css：

 .banner{

     width:400px;

     height:250px;

     margin:50px auto;

     overflow:hidden;

     box-shadow:0 0 5px rgba(0,0,0,1);

     background-size:100% 100%;

     -webkit-animation:loops 12s infinite;

 }

 @-webkit-keyframes loops{

     0% {

         background:url(banner1.jpg) no-repeat;

     }

     50% {

         background:url(banner2.jpg) no-repeat;

     }

     100% {

         background:url(banner3.jpg) no-repeat;

     }

 }

13、reset.css (2016-04-28)

 html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,

 a,em,img,strong,sub,sup,i,dl,dt,dd,ol,ul,li,fieldset,

 form,label,table,caption,tbody,tfoot,thead,tr,th,td {

     margin:;

     padding:;

 }

 body {

   font-family: "Microsoft yahei", Helvetica, Arial, sans-serif;

   font-size: 12px;

   line-height: 1.42857143;

   background-color: #fff;

 }

 ol,ul {

     list-style: none;

 }

 table {

     border-collapse: collapse;

     border-spacing:;

 }

 caption,th,td {

     text-align: left;

     font-weight: normal;

     vertical-align: middle;

 }

 a{

   text-decoration:none;

 }

 a img {

     border: none;

 }

 article,aside,footer,header,menu,nav,section,summary {

     display: block;

 }

其他：

1、css-hack

css hack技巧大全[转]：http://www.duitang.com/static/csshack.html

常用： color:red\9; /* all ie */ || color:yellow\0; /* ie8 */ || +color:pink; /* ie7 */ || _color:orange; /* ie6 */

2、css插件--animate.css

github：daneden/animate.css

Swiper Animate使用方法：http://www.swiper.com.cn/usage/animate/index.html

3、CSS 代码风格规范

$1：不要轻易改动全站级CSS和通用CSS库。改动后，要经过全面测试。

$2：css的id,class 名称：语义化，以 - 相连，命名少用缩写(除一些所有人一看便知的缩写);

[其他参考]：

nec更好的css方案：http://nec.netease.com/standard

前端 HTML-CSS 规范：http://www.runoob.com/w3cnote/html-css-guide.html

豆瓣的CSS和JS代码风格规范：http://www1.w3cfuns.com/article-5595055-1-1.html

4、css伪类|伪元素

参考：MDN - Pseudo-classes；Pseudo-elements

tips：伪元素使用了两个冒号 (::) 而不是一个冒号 (:). 这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素。

5、sass学习

(1)sass十分钟入门

变量 || 嵌套 || 导入 || mixin || 扩展/继承 || 运算 || 颜色

(2)一个简单demo：

 @charset "UTF-8";

 @import 'base.scss'; // 注意此处的分号不可少。

 $baseColor:orange;

 $baseWidth:200px;

 @mixin box-sizing($sizing){

     -webkit-box-sizing : $sizing;

        -moz-box-sizing : $sizing;

             box-sizing : $sizing;

 }

 .border{

     border:1px solid #ccc;

     border-radius:5px;

 }

 .box{

     width:$baseWidth;

     height:100px;

     @include box-sizing(border-box);

     @extend .border;

 }

 a{

     color:$baseColor;

 }

(3)网上参考：

w3cplus-sass系列教程：http://www.w3cplus.com/sassguide/

sass用法指南：http://www.ruanyifeng.com/blog/2012/06/sass.html

龙恩-sass教程：http://www.cnblogs.com/tugenhua0707/p/3959942.html

css常用效果总结的更多相关文章

CSS 常用效果--持续更新
单行超出省略: white-space: nowrap; text-overflow:ellipsis; overflow:hidden; 多行超出省略: text-overflow: -o-elli ...
常用的几个CSS前端效果
做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如bootstrap等,我们轻松的就就可以做出一些页面效果.但是掌握每一个常见效果的写法还是很重要的,下面整理出一些常见的CSS前端效果,让你更轻 ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
jS事件之网站常用效果汇总
下拉菜单  <!DOCTYPE html> <html> < ...
CSS常用样式（四）之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
CSS常用选择器
关于CSS常用选择器: 1.ID选择器关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...
css常用单位
css常用单位本文来简单介绍下css的常用单位. 绝对长度单位绝对长度单位代表一个物理测量. 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素.最终, ...
CSS常用样式属性
1.CSS字体和文本相关属性属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

随机推荐

VM EXSI安装使用
1.下载VM ESXI:http://lookdfw.blog.163.com/blog/static/5824974220139295524473/ 2.安装VM ESXI: 参考网址:http:/ ...
thinkphp 3.2.3 连接sql server 2014 WAMPSERVER环境包
安装 sqlsrv 扩展首先 sql server 2014 安装没啥说的链接信息自己设置 php 版本 :5.5.12 sqlsrv 驱动微软提供了 3.0 和3.1 版本 3.0 对应 ...
reactjs 注意点
render的return return前要留一空行 return的括号要分别各占一行,不能与html同行 return中的html必须要有顶层容器包裹 return中的循环不能用for,改用map方 ...
JS的splice()方法和slice()方法
在w3c school中描述如下: 定义和用法splice() 方法用于插入.删除或替换数组的元素.语法arrayObject.splice(index,howmany,element1,....., ...
SVN使用教程总结[转]
SVN使用教程总结 SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Sub ...
CF464A （模拟）
http://codeforces.com/contest/465/problem/C Codeforces Round #265 (Div. 2) C Codeforces Round #265 ( ...
Java实现zip压缩多个文件下载
为了更好的演示,首先创建一个文件实体FileBean,包含了文件路径和文件名称: package com.javaweb.entity; import java.io.Serializable; /* ...
jQuery属性选择器.attr()和.prop()两种方法
在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...
runtime(面试)
运行时机制,runtime库里面包含了跟类.成员变量.方法相关的API,比如获取类里面的所有成员变量,为类动态添加成员变量,动态改变类的方法实现,为类动态添加新的方法等需要导入<objc/me ...
Linux统计文件行数
语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. 该命令各选 ...

css常用效果总结

css常用效果总结的更多相关文章

随机推荐

热门专题