[k]优雅的css
1、图片文字列表 (2016-01-25)
1.1 实现效果图如下:
1.2 代码:
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 {
- ;
- ;
- }
- 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:'';}
2、进度条效果 (2016-04-16)
2.1 效果图:
2.2 实现方法1:
html:
- <div class="box">
- <div class="progress">
- <div style="width:60%">
- <div class="percent"></div>
- </div>
- </div>
- </div>
css:
- ;;}
- .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{
- ; }
- to{ width : 100%; }
- }
- @-webkit-keyframes line{
- ; }
- to{ width : 100%; }
- }
2.3 实现方法2:
html:
- <div id="process-box">
- <div id="process-bar"></div>
- <div id="process-txt">0%</div>
- </div>
css:
- ;;}
- #process-box{width:200px;height:15px;position:relative;border:1px solid #333;margin:20px;border-radius:20px;}
- ;;background:maroon;clip:rect(0px,0px,60px,0px);border-radius:20px;}
- ;;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);
3、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;
- }
- }
4、按钮样式 (2016-04-28)
html:
- <a href="javascript:;" class="submit">报名</a>
- <a href="javascript:;" class="submit" disabled>已报名</a>
scss:
- @charset 'utf-8';
- @mixin btnFunc($width,$height,$bg,$fs,$color,$br){
- width:$width;
- height:$height;
- background:$bg;
- font-size:$fs;
- color:$color;
- border-radius:$br;
- display:inline-block;
- text-align:center;
- line-height:$height;
- }
- .submit{
- text-decoration:none;
- @include btnFunc(120px,35px,#ff4a59,20px,#fff,5px);
- &:active{
- background:#d31928;
- }
- &[disabled]{
- background:#b2b2b2;
- }
- }
[k]优雅的css的更多相关文章
- 如何写出优雅的CSS代码 ?(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...
- 如何写出优雅的css代码 ?
如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...
- 优雅的css写法
一.利用好代码折叠 css也可以进行优雅的代码折叠而且会比html更好看 折叠后的效果: 这样就可以很舒服的把它折叠起来. 二.向Twitter Bootstrap学习 1. 学习的第一点就是用cla ...
- 如何写出优雅的JavaScript代码 ? && 注释
如何写出优雅的JavaScript代码 ? 之前总结过一篇<如何写出优雅的css代码?>, 但是前一段时间发现自己的js代码写的真的很任性,没有任何的优雅可言,于是这里总结以下写js时应当 ...
- CSS知识总结之设计模式(持续学习中)
OOCSS 参考:http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss ...
- Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
- css优化,提高性能
CSS 优化主要是四个方面: 加载性能比如不要用 @import 等等,@import会影响css文件的加载速度,考虑加载性能时,主要是从减少文件体积.减少阻塞加载.提高并发方面入手,任何 hint ...
- css常用属性总结:背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
- css常用属性总结之 id和class的区别,使用类还是ID?
前面两篇文章我们分别谈到了class和id的相关知识和如何使用,但是在实际项目中,我们该如何抉择,class还是id? 先回顾下两者的区别吧! 1.id具有唯一性,class具有普遍性,所以一个页面同 ...
随机推荐
- bzoj 1296: [SCOI2009]粉刷匠
Description windy有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝色. windy每次粉刷,只能选择一条木板上一段连续的格子,然后涂上一种颜色. 每个 ...
- Macbook被格式化之后
macbook不小心被手贱格式化了,开机显示一个大问号. 于是查询得到恢复方式是使用command+R. 照做了,试了好几次,那个地球还是卡住不动的.都没有提示让我输入wifi密码. 于是又查了一下, ...
- knockoutJS学习笔记04:监控属性
一.语法介绍 先来看一个简单的例子: <span data-bind="text:name"></span> var obj = {name:ko.obse ...
- cocos2d-x 3.10 PageView BUG
cocos2d-x 3.10 PageView 拖动滚动到下一个单元,没事件,3.11有修复.
- css 拾遗
1, 实现尖角 <style> .up{ border-top: 30px solid red; border-right:30px solid gold; border-bottom:3 ...
- BZOJ2510: 弱题
求k时刻一个标号转移到各位置的概率,最后枚举每个标号加权求期望.可以发现转移矩阵是循环矩阵,因此乘法是n^2的.另外这个乘法是圆周卷积的形式,然后就作死写了发fft,发现精度升天了= = #inclu ...
- 面试题目——《CC150》Java
package cc150.java; import java.util.Iterator; public class CircularArray { public static void main( ...
- xml格式的数据转化成数组
将得到的xml格式的数据转化成数组 <?php //构造xml $url = "http://api.map.baidu.com/telematics/v3/weather?locat ...
- 最终解决 mouseenter, mouseleave , mouseout mousehover mousemove等事件的区别?
在jquery中, html页面的div的显示和隐藏, 修改等的功能, 最终都要由 事件 触发来引用, 不管是键盘事件, 还是鼠标事件... mouseenter和mouseleave是成对对应的, ...
- C# 读取excel日期时获取到数字转换成日期
string strDate= DateTime.FromOADate(Convert.ToInt32(data[i][7])).ToString("d"); strDate= D ...