随笔分类 - CSS
摘要：对CSS预处理这个东西的看法，基本就是2种第一种：不就是css吗，我会写就好了搞得那么复杂干嘛第二种：感觉这个东西非常有必要，它规范了代码，使开发变得更轻松好吧以前我是第一种，并且觉得又要配置环境，又要按照他的写法非常的麻烦！用了一阵子之后发现有点离不开它了！囧~~实际上很多东西不是你主观认为他没有...
阅读全文
摘要：响应式 vs 自适应网页设计它们看起来似乎是相同的，但事实并非如此。这两种方法相辅相成，并没有说哪个是正确的那个是错误的，内容决定一切。内容流动随着屏幕尺寸变小，内容将会占据更多的垂直空间，而下方的内容就会被接着往下推，这就是所谓的流动。如果你是使用像素和磅来进行设计的，这可能会有点棘手，但是当你习...
阅读全文
摘要：使用max-width@media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (min-width: 900px) { ...
阅读全文
摘要：什么是Responsive设计？有的同学认为Responsive设计是自适应布局，也有的同学认为Responsive是网格布局。其实这些想法都不正确。Wikipedia对Responsive做 了详细的描述，我在这里就简单的说一下。Responsive设计简单的称为RWD，是精心提供各种设备都能阅读...
阅读全文
摘要：伪元素:before 和 :after可以做的东西是相当惊人的。对于页面上的每一个元素，你拥有了两个更灵活的、而且可以完成其它HTML元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能，而且不会对你的语义标签产生负面影响。这里有一大堆关于这些有趣的效果的示例，你想看的话就接着往下看吧。多重背景...
阅读全文
摘要：相当长的一段时间，现在网站与所谓的“视差”效果一直很受欢迎。 万一你没有听说过这种效果，不同的图像，在不同的方向移动或层主要包括。这导致了一个很好的光学效应，使参观者的注意。在网页设计中，为了实现这是简单的一个网站添加一个jQuery插件的最常见的方式。这样做，不幸的是，有几个缺点。这些插件是将事件...
阅读全文
摘要：RTLBcss3 transforms 3D文字翻开 R T L B
阅读全文
摘要：https://icomoon.io/
阅读全文
摘要：左侧定宽 中间自适应 右侧定宽 /* 三列中间自适应布局 */.g-bd5{margin:0 0 10px;}.g-sd51,.g-sd52{position:relat...
阅读全文
摘要：html template概述包含完整头部信息和主体结构的HTML基础模板。代码展示更好的CSS方案 ...
阅读全文
摘要：不符合NEC规范的选择器用法 .class{} 不要以一个没有类别的样式作为主选择器，这样的选择器只能作为后代选择器使用，比如.m-xxx .class{}。 .m-xxx div{} 不要以没有语义的标签作为选择器，这会造成大面积污染，除非你可以断定现在或将来你的这个选择器不会污染其他同类。 .g...
阅读全文
摘要：最佳选择器写法（模块）/* 这是某个模块 */.m-nav{}/* 模块容器 */.m-nav li,.m-nav a{}/* 先共性 优化组合 */.m-nav li{}/* 后个性 语义化标签选择器 */.m-nav a{}/* 后个性中的共性 按结构顺序 */.m-nav a.a1{}/*...
阅读全文
摘要：值缩写 缩写值可以减少CSS文件大小，并增加可读性和可维护性。 但并非所有的值都必须缩写，因为当一个属性的值缩写时，总是会将所有项都设置一遍，而有时候我们不希望设置值里的某些项。/* 比如我们用下面这个样式来让某个定宽的容器水平居中，我们要的只是left和right， * 而top和bottom不是...
阅读全文
摘要：CSS那些事！这个篇幅是我特意开的，不是因为帮助小菜之类的，而是在多人的团队配合中各种命名冲突的规范让人蛋疼。css这个东西只要不是新的离谱都会写，但是每个人的命名风格，方法，都不同有人喜欢驼峰，有人觉得-不错，有的人觉得_很方便，最后有的英文命名，有的干脆拼音。。。。囧http://www.cnb...
阅读全文
摘要：选择器、属性和值都使用小写 在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。单行写完一个选择器定义 便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。 如果有嵌套定义，可以采取内部单行的形式。/* 单行定义一个选择器 */.m-l...
阅读全文
摘要：使用类选择器，放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。NEC特殊字符："-"连字符"-"在本规范中并不表示连字符的含义。她只表示两种含义：分类前缀分隔符、扩展分隔符，详见以下具体规则。分类的命名方法：使用单个字母+"-"为前缀布局（grid）（.g-）；...
阅读全文
摘要：CSS文件的分类和引用顺序 通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。 我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。 公共型样式：包括了以下几个部分：“标签的重置和...
阅读全文
摘要：/* function */.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}.f-cb,.f-cbli li{zoom:1;}....
阅读全文
