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

1.1 实现效果图如下:

1.2 代码:

html:( 代码十分优雅哦! )

  1. <ul>
  2. <li class="step1">下载XXX应用</li>
  3. <li class="step2">60秒在线申请</li>
  4. <li class="step3">线下签约</li>
  5. </ul>

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. ;
  6. ;
  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:'';}

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

2.1 效果图:

2.2 实现方法1:

html:

  1. <div class="box">
  2. <div class="progress">
  3. <div style="width:60%">
  4. <div class="percent"></div>
  5. </div>
  6. </div>
  7. </div>

css:

  1. ;;}
  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. ; }
  7. to{ width : 100%; }
  8. }
  9. @-webkit-keyframes line{
  10. ; }
  11. to{ width : 100%; }
  12. }

2.3 实现方法2:

html:

  1. <div id="process-box">
  2. <div id="process-bar"></div>
  3. <div id="process-txt">0%</div>
  4. </div>

css:

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

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);

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

html:

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

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. }

4、按钮样式 (2016-04-28)

html:

  1. <a href="javascript:;" class="submit">报名</a>
  2. <a href="javascript:;" class="submit" disabled>已报名</a>

scss:

  1. @charset 'utf-8';
  2. @mixin btnFunc($width,$height,$bg,$fs,$color,$br){
  3. width:$width;
  4. height:$height;
  5. background:$bg;
  6. font-size:$fs;
  7. color:$color;
  8. border-radius:$br;
  9. display:inline-block;
  10. text-align:center;
  11. line-height:$height;
  12. }
  13. .submit{
  14. text-decoration:none;
  15. @include btnFunc(120px,35px,#ff4a59,20px,#fff,5px);
  16. &:active{
  17. background:#d31928;
  18. }
  19. &[disabled]{
  20. background:#b2b2b2;
  21. }
  22. }

[k]优雅的css的更多相关文章

  1. 如何写出优雅的CSS代码 ?(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  2. 如何写出优雅的css代码 ?

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

  3. 优雅的css写法

    一.利用好代码折叠 css也可以进行优雅的代码折叠而且会比html更好看 折叠后的效果: 这样就可以很舒服的把它折叠起来. 二.向Twitter Bootstrap学习 1. 学习的第一点就是用cla ...

  4. 如何写出优雅的JavaScript代码 ? && 注释

    如何写出优雅的JavaScript代码 ? 之前总结过一篇<如何写出优雅的css代码?>, 但是前一段时间发现自己的js代码写的真的很任性,没有任何的优雅可言,于是这里总结以下写js时应当 ...

  5. CSS知识总结之设计模式(持续学习中)

    OOCSS 参考:http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss  ...

  6. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  7. css优化,提高性能

    CSS 优化主要是四个方面: 加载性能比如不要用 @import 等等,@import会影响css文件的加载速度,考虑加载性能时,主要是从减少文件体积.减少阻塞加载.提高并发方面入手,任何 hint ...

  8. css常用属性总结:背景background下篇

    前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...

  9. css常用属性总结之 id和class的区别,使用类还是ID?

    前面两篇文章我们分别谈到了class和id的相关知识和如何使用,但是在实际项目中,我们该如何抉择,class还是id? 先回顾下两者的区别吧! 1.id具有唯一性,class具有普遍性,所以一个页面同 ...

随机推荐

  1. bzoj 1296: [SCOI2009]粉刷匠

    Description windy有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝色. windy每次粉刷,只能选择一条木板上一段连续的格子,然后涂上一种颜色. 每个 ...

  2. Macbook被格式化之后

    macbook不小心被手贱格式化了,开机显示一个大问号. 于是查询得到恢复方式是使用command+R. 照做了,试了好几次,那个地球还是卡住不动的.都没有提示让我输入wifi密码. 于是又查了一下, ...

  3. knockoutJS学习笔记04:监控属性

    一.语法介绍 先来看一个简单的例子: <span data-bind="text:name"></span> var obj = {name:ko.obse ...

  4. cocos2d-x 3.10 PageView BUG

    cocos2d-x 3.10 PageView 拖动滚动到下一个单元,没事件,3.11有修复.

  5. css 拾遗

    1, 实现尖角 <style> .up{ border-top: 30px solid red; border-right:30px solid gold; border-bottom:3 ...

  6. BZOJ2510: 弱题

    求k时刻一个标号转移到各位置的概率,最后枚举每个标号加权求期望.可以发现转移矩阵是循环矩阵,因此乘法是n^2的.另外这个乘法是圆周卷积的形式,然后就作死写了发fft,发现精度升天了= = #inclu ...

  7. 面试题目——《CC150》Java

    package cc150.java; import java.util.Iterator; public class CircularArray { public static void main( ...

  8. xml格式的数据转化成数组

    将得到的xml格式的数据转化成数组 <?php //构造xml $url = "http://api.map.baidu.com/telematics/v3/weather?locat ...

  9. 最终解决 mouseenter, mouseleave , mouseout mousehover mousemove等事件的区别?

    在jquery中, html页面的div的显示和隐藏, 修改等的功能, 最终都要由 事件 触发来引用, 不管是键盘事件, 还是鼠标事件... mouseenter和mouseleave是成对对应的, ...

  10. C# 读取excel日期时获取到数字转换成日期

    string strDate= DateTime.FromOADate(Convert.ToInt32(data[i][7])).ToString("d"); strDate= D ...