css常用效果总结-白红宇

css常用效果总结

阅读量：4882 次

发布时间：2019-06-11

本文共 8178 字，大约阅读时间需要 27 分钟。

1、给input的placeholder设置颜色

1 .phColor::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 2     color:maroon; 3 } 4 .phColor:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 5    color:maroon;opacity:  1; 6 } 7 .phColor::-moz-placeholder { /* Mozilla Firefox 19+ */ 8    color:maroon;opacity:  1; 9 }10 .phColor:-ms-input-placeholder { /* Internet Explorer 10-11 */11    color:maroon;12 }

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);}hello world

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)

1 a{
    padding:8px 16px;border-radius:5px;background-color:#396;color:#fff;text-decoration:none;2   transition:background-color .3s ease-in-out .1s;3   -webkit-transition:background-color .3s ease-in-out .1s;  /*Safari 需要前缀 -webkit-*/4 }5 a:hover{
    background-color:#063;}6 hello

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


         
              
       •list1 list1 list1 list1 list1 list1 list1 
        
       •list2 list2 list2 list2 list2 list2 list2
        
       •list3 list3 list3 list3 list3 list3 list3

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;}
         
      
    
      Hello world

8、table-border

1 2 3 4

5 23 24 25 26

table-1:

Firstname	Lastname
Bill	Gates
Steven	Jobs

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

table-2:

Firstname	Lastname
Bill	Gates
Steven	Jobs

table-3:

Firstname	Lastname
Bill	Gates
Steven	Jobs

47 48

View Code

9、css-图片铺满屏幕

html,body{
   height:100%;overflow:hidden;padding:0;margin:0;}.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：( 代码十分优雅哦！ )

View Code

css：

1 /*reset-style*/ 2 html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p, 3 a,em,img,strong,sub,sup,i,dl,dt,dd,ol,ul,li,fieldset, 4 form,label,table,caption,tbody,tfoot,thead,tr,th,td { 5     margin: 0; 6     padding: 0; 7 } 8 body { 9   font-family: "Microsoft yahei", Helvetica, Arial, sans-serif;10   font-size: 14px;11   line-height: 1.42857143;12   background-color: #fff;13 }14 ol,ul {15     list-style: none;16 }17 18 /*本页面的样式*/19 ul li{
    display:inline-block;position:relative;text-align:center;margin:10px 60px;font-size:18px;}20 ul li:before{
    width:184px;height:185px;display:block;margin-bottom:20px;}21 ul .step1:before{
    content:url(ico1-c.jpg);}22 ul .step2:before{
    content:url(ico2-c.jpg);}23 ul .step3:before{
    content:url(ico3-c.jpg);}24 ul li:after{
    content:url(threeStep.jpg);position:absolute;top:82px;left:195px;}25 ul .step3:after{
    content:'';}

View Code

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

效果图：

实现方法1：

html：

View Code

css：

1 *{
    padding:0;margin:0;} 2 .box{
    margin:20px 10px;} 3 .progress{
    width:200px;height:10px;border:1px solid #ccc;background:#eee;border-radius:5px;} 4 .percent{
    height:10px;background:maroon;border-radius:5px;animation:line 2s;-webkit-animation:line 2s;} 5 @keyframes line{ 6     from{ width : 0; } 7     to{
     width : 100%; } 8 } 9 @-webkit-keyframes line{10     from{ width : 0; }11     to{
     width : 100%; }12 }

View Code

实现方法2：

html：

View Code

css：

1 body{
    margin:0;padding:0;}2 #process-box{
    width:200px;height:15px;position:relative;border:1px solid #333;margin:20px;border-radius:20px;}3 #process-box #process-bar{
    width:200px;height:15px;position:absolute;left:0;top:0;background:maroon;clip:rect(0px,0px,60px,0px);border-radius:20px;}4 #process-box #process-txt{
    width:200px;height:15px;position:absolute;left:0;top:0;line-height:15px;text-align:center;color:#999;}

View Code

javascript：

1 var Obar = document.getElementById('process-bar'), 2     Otxt = document.getElementById('process-txt'); 3 var process_txt = 0, 4     process_num = 0; 5 setInterval(function(){ 6     if(process_num <= 200){ 7         Obar.style.clip = 'rect(0px,' + process_num + 'px,60px,0px)';  8         Otxt.innerHTML = parseInt(process_num/200*100) + '%'; 9         process_num ++;10     }11     return;12 }, 10);

View Code

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

html：

css：

1 .banner{ 2     width:400px; 3     height:250px; 4     margin:50px auto; 5     overflow:hidden; 6     box-shadow:0 0 5px rgba(0,0,0,1); 7     background-size:100% 100%; 8     -webkit-animation:loops 12s infinite; 9 }10 @-webkit-keyframes loops{11     0% {12         background:url(banner1.jpg) no-repeat;             13     }14     50% {15         background:url(banner2.jpg) no-repeat;16     }17     100% {18         background:url(banner3.jpg) no-repeat;19     }20 }

View Code

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

1 html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p, 2 a,em,img,strong,sub,sup,i,dl,dt,dd,ol,ul,li,fieldset, 3 form,label,table,caption,tbody,tfoot,thead,tr,th,td { 4     margin: 0; 5     padding: 0; 6 } 7 body { 8   font-family: "Microsoft yahei", Helvetica, Arial, sans-serif; 9   font-size: 12px;10   line-height: 1.42857143;11   background-color: #fff;12 }13 ol,ul {14     list-style: none;15 }16 table {17     border-collapse: collapse;18     border-spacing: 0;19 }20 caption,th,td {21     text-align: left;22     font-weight: normal;23     vertical-align: middle;24 }25 a{26   text-decoration:none;27 }28 a img {29     border: none;30 }31 article,aside,footer,header,menu,nav,section,summary {32     display: block;33 }

View Code

其他：

1、css-hack

css hack技巧大全[转]：

常用： 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使用方法：

3、CSS 代码风格规范

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

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

[其他参考]：

nec更好的css方案：

前端 HTML-CSS 规范：

豆瓣的CSS和JS代码风格规范：

4、css伪类|伪元素

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

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

5、sass学习

(1)sass十分钟入门

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

(2)一个简单demo：

1 @charset "UTF-8"; 2 @import 'base.scss'; // 注意此处的分号不可少。 3  4 $baseColor:orange; 5 $baseWidth:200px; 6  7 @mixin box-sizing($sizing){ 8     -webkit-box-sizing : $sizing; 9        -moz-box-sizing : $sizing;10             box-sizing : $sizing;11 }12 .border{13     border:1px solid #ccc;14     border-radius:5px;15 }16 .box{17     width:$baseWidth;18     height:100px;19     @include box-sizing(border-box);20     @extend .border;21 }22 a{23     color:$baseColor;24 }

View Code

(3)网上参考：

w3cplus-sass系列教程：

sass用法指南：

龙恩-sass教程：

转载于:https://www.cnblogs.com/k11590823/p/4716406.html

你可能感兴趣的文章