一、利用好代码折叠

  css也可以进行优雅的代码折叠而且会比html更好看

  折叠后的效果:

  

  

  这样就可以很舒服的把它折叠起来。

二、向Twitter Bootstrap学习
  1. 学习的第一点就是用class,去减少id。当然这是一个很基本的知识。

  2. 学习的第二点是命名的词汇。

    如group、control、banner、list、item,title、panel、content、container这些表结构和关系的词汇;

    还有一些形容词danger、primary、lg、xs、info等等;

    html以及所有的语言都在推行语义化,标签也一样。多去用贴近生活的方式去语义话的写代码。

三、前端的流行词汇。

  component 和 module 组件和模块是前端不错的class命名词汇。

四、来自于各大规范的css写法。

  一个不错的规范,把css的属性按照重要程度去排序。

  当然这个重要程度无法估量,但是基本都是从结构>修饰>伪类,如display,float,position的重要程度就会比较高一些,然后是margin,padding,left,top之类的,然后是颜色,背景,边框等等。这个标准人为制定。是主观的东西。

  

  

  

  

  网易的规范和常用的命名词汇。

  

优雅的css写法的更多相关文章

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

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

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

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

  3. (转载)不错的CSS写法

    根据微信订阅号“设计达人”推送的文章,学到了如题知识.个人尝试了一下,感觉还不错.原文链接:http://mp.weixin.qq.com/s/g9TyBwB9xIi45TGwTBOLSQ. 字体 从 ...

  4. 清除浮动最有效的css写法

    说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好 ...

  5. [k]优雅的css

    1.图片文字列表 (2016-01-25) 1.1 实现效果图如下: 1.2 代码: html:( 代码十分优雅哦! ) <ul> <li class="step1&quo ...

  6. html css:背景图片链接css写法

    图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...

  7. table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。

    找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了.里面有一个css2里的命令是我没用过的也是这里面关键的:table-layout:fixed; 原理很简单,有爱研究的童鞋可以去css官网 ...

  8. html特殊字符的html,js,css写法汇总

    ⇠  箭头类 符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ &#8672 \u21E0 \21E0 ⇢ &#8674 \u21E2 \ ...

  9. webkit内核浏览器的CSS写法

    -webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择 ...

随机推荐

  1. JS规则 保持先后顺序(操作符优先级)操作符之间的优先级(高到低): 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

    保持先后顺序(操作符优先级) 我们都知道,除法.乘法等操作符的优先级比加法和减法高,例如: var numa=3; var numb=6 jq= numa + 30 / 2 - numb * 3; / ...

  2. 【案例】鼠标按下,DIV跟随移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue 简单留言本

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. 关于安装了sqlite对于vs的组件,重启vs后,在外面可以连接sqlite数据库,但是在建立实体模型时没有sqlite数据源的问题

    出自:http://bbs.csdn.net/topics/390917337 兄弟,刚刚在stackoverflow上找到了解决方法了http://stackoverflow.com/questio ...

  5. this指针/常函数、常对象

    this指针引入 类中对象的成员变量和成员函数是分开存储的,sizeof(空class) = 1,另外示例中涉及到字节对齐的问题,double本身的字节为8,int为4,由于字节对齐,int也为8,所 ...

  6. UITableViewCell delete button 上有其它覆盖层

    第一种解决办法: // Fix for iOS7, when backgroundView comes above "delete" button - (void)willTran ...

  7. Go基础之函数递归实现汉诺塔

    Go递归实现汉诺塔 package main import "fmt" // a 是源,b 借助, c 目的长度 func tower(a, b, c string, layer ...

  8. iOS之CGcontext.h方法和属性简介

    /* CoreGraphics - CGContext.h Copyright (c) 2000-2012 Apple Inc. All rights reserved. */ #ifndef CGC ...

  9. JEECG-Boot 项目介绍——基于代码生成器的快速开发平台(Springboot前后端分离)

    Jeecg-Boot 是一款基于代码生成器的智能开发平台!采用前后端分离架构:SpringBoot,Mybatis,Shiro,JWT,Vue&Ant Design.强大的代码生成器让前端和后 ...

  10. python-爬免费ip并验证其可行性

    前言 最近在重新温习python基础-正则,感觉正则很强大,不过有点枯燥,想着,就去应用正则,找点有趣的事玩玩 00xx01---代理IP 有好多免费的ip,不过一个一个保存太难了,也不可能,还是用我 ...