有时我都不敢相信自己是一个python程序员，以python工程师的名义进了公司之后，除了Django和一些并不复杂的脚本以外，其余时间写了大量的CSS和jQuery，现在回头看之前的一些代码，写得十分丑陋又低效，其中的CSS就有很大改进空间。 正如多数人的认知一样，HTML和CSS并不难学难用，从学习曲线上来说确实如此，难度甚至不如使用VIM。但是写不写得好又是另一回事，好的CSS代码能用最少的代码量实现功能，易修改且性能佳。易修改，举个...
CSS的@import的用法: @import在很多页面都有应用，不过使用的频率还是比link标签要少的多，所以可能还有很多布局者对此不是太熟悉，下面就简单介绍一下它的用法。它是用来引入外部样式表的一种方式，格式有以下两种: @import "style.css";@import url("style.css"); @import既可以为页面引入外部样式表，也可以在一个样式表中引入另一个样式表，代码实例如下: 实例一: 蚂蚁部落 @import "mytest/div+css/mytest.css"; ...
CSS选择器之属性选择器 1：[attr] 存在此属性即可 2：[attr = 'attr_value'] 属性值为给定值即可 3：[attr ^= 'attr_value'] attr属性键以container开头 即便是字符串匹配 div[data-type ^= 'container'] { background-color : #000; } 开头存在 container 匹配成功 开头存在 container 匹配成功 不在开头 匹配失败 4：[attr *= 'attr_value'] attr属性键中存在给定的值即可 即便是字符串匹配 div[...
首先，这篇文章只说css3的属性，在不支持这些属性的浏览器里怎么实现这些效果不在这篇文的考虑范围之内。 渐变Gradient 线性渐变：linear-gradient 语法：-moz-linear-gradient( [ || ,]? , [, ]* ) 示例：-moz-linear-gradient(top,#fff,#000); 这个示例的意思是，从上往下实现渐变，从上往下实现由白色变为黑色的渐变top也能写成top left表示从左上角开始实现渐变 径向渐变radial-gradient 语法：-webkit-radi...
学习Sass无非就是想高效的、 面向对象编写CSS，Sass中的Interpolation #{}就是重要的一部分。开始一探究竟... 1. 简单的栗子 SCSS： @charset "UTF-8"; //不声明在ruby编译时会报错，因为下面有中文注释;$prop1: border; //一个值；@mixin set-one($side, $val){ #{$prop1}-#{$side}: $val; //#{$prop1}-$side: $val; <= 这样写编译会出现错误，记得#{$side};}.box-bor{ @include set-one(width, 2px); ...
这是25学堂从haorooms博客转载过来的一篇非常有用的css单位的博文，特别是对于想要学习移动H5开发的小伙伴来说，是一篇很干的干货。 第一部分移动H5开发入门知识：CSS单位介绍和用法 说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单...
学过网页开发就会知道，CSS 不能算编程语言，只是网页样式的一种描述方法。 为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。 本文介绍的 CSS Modules 有所不同。它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖，这恰恰是网页组件最急需的功能。 因此，CSS Mod...
经常用到这两个属性，但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结： 相同点：他们都会飘出一个小浮层，显示文本内容。 不同点： 1.alt只能是元素的属性，而title即可以是元素的属性也可以是标签，例如:标题。 2.alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提供额外说明文...
VG是英文Scalable Vector Graphics的缩写，意为可缩放矢量图形。随着浏览器技术的进步，SVG在网页上的运用越来越多。SVG有很多优点，比如体积小、缩放时不失真、可以动态的改变，适合制作动画、格式可读，易于使用，搜索引擎优化等。SVG在动画方面的表现格外优秀，本文主要是介绍SVG中的几个用于动画的元素，它们分别是： 我将用具有坚定的演示里让大家明白这几个元素的具体用法。 元素的用法介绍元素通常放置到一个SVG图像元素里面...
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD。 w3c建议：应该始终向 HTML 文档添加 声明，这样浏览器才能获知文档类型。 SGML（标准通用置标语言）:是一种定义电子文档结构和描述其内容的国际标准语言。SGML本身并不是一个...
导航，少量数据表格，居中 ul和li应用 #menu{width:1000px;height:35px;float:right;margin:0px; clear:both; vertical-align: bottom;} #ul li{list-style-type:none; clear:both;width:100px;display:inline; font-size: larger;} #myul li{float:left;width:100px;} 首页 行业图书 服饰潮流 美容会所 妈咪宝贝 礼品书籍 新闻资讯 用户留言 联系我们 默认是竖排，并且带圆点 hello hello hello hello 去...
在刚接触XHTML CSS设计网页时，对于标签的使用没什么经验，也很随意，经常是想起什么就用什么，认为只要能实现效果就可以。但随着学习的深入和对搜索引擎优化知识的了解，发现其实标签的使用也是一门学问。我们在脚本之家——jb51.net的CSS教程文章中一直在强调语义，那么对于HTML标签该如何使用呢？他们一般的使用位置在哪里呢？ 在刚接触XHTML CSS设计网页时，对于标签的使用没什么经验，也很随意，经常是想起什么就...
Iframe用法精析 用于设置文本或图形的浮动图文框或容器。 BORDER 设定围绕图文框的边缘宽度 FRAMEBODER 设置边框是不否为3维（0=否，1=是） HEIGHT,WIDTH 设质边框的宽度和高度 SCROLLING 是否有滚动条（YES,NO,AUTO) SRC 指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*) “画中画”效果--谈IFRAME标签的使用 纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东...
表格的分组显示(Structured Table) （IExplore Only） 1）按行分组 ... - 表的题头(Header) ... - 表的正文(Body) ... - 表的脚注(Footer) 例： FoodDrinkSweet ABC DEF 2）按列分组 #=left, right, center 例： FoodDrinkSweet ABC DEF 3）列的属性控制 #=从左数起，具有指定属性的列的列数 #=left, right, center 例： FoodDrinkSweet ABC DEF
1. 取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2. 只读文本框内容 在input里添加属性值 readonly 3. 防止退后清空的TEXT文档(可把style内容做做为类引用) 4. ENTER键可以让光标移到下一个输入框 5. 只能为中文(有闪动) 6. 只能为数字(有闪动) 7. 只能为数字(无闪动) 57)) event.returnValue=false" /> 8. 只能输入英文和数字(有闪动) 9. 屏蔽输入法 10. 只能输入 数字，小数点，减号（-） 字...