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)

实现效果图如下:

css常用效果总结

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)

效果图:

css常用效果总结

实现方法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

上一篇:打开Excel时提示“向程序发送命令时出现问题”


下一篇:jquery mobile的学习资料