一起CSS

当前位置:一起CSS

jQuery下拉框美化插件DropKick

分类:CSS

DropKick 是一个下拉框美化插件,使用非常简单,直接为下拉框 select 调用方法即可,瞬间让你摆脱繁琐。DropKick 有 3 种主题,你可以选择一种与你的页面更加搭配的,当然你也可以自己定义 CSS

DropKick 支持键盘上下选择;支持回调,可以轻松的获取 value 值。

DropKick 不支持 IE6,但会显示下拉框默认的样式,不影响页面使用;而其他的浏览器都支持。DropKick 暂时不支持 optgroup,会被忽略。如果你不需要考虑 IE6 和不需要使用 optgroup,那 DropKick 是一个很好的选择。

阅读全文 >>

查看:1,201 评论:7

网站优化:八款测试网站速度的免费工具

分类:前端技术

网站的速度是不能掉以轻心的,特别是因为它对 SEO 的影响很大。为了帮你解决这个问题,今天我们收集了 8 个测试网站速度的免费工具。这些工具中,有的会提出一些提高网站速度的建议,有的会告诉你加载速度的详细信息和其他一些信息,所以,一定要试试这些工具。

PageSpeed Insights

PageSpeed Insights 是 Google 出品的一款工具,它能在线分析页面内容,生成提高网站速度的建议。同时它还有一款基于 Fierbug 的插件 PageSpeed,可以下载安装。

PageSpeed Insights

阅读全文 >>

查看:4,032 评论:6 标签:,

W3C 发布 CSS Variables Module Level 1 首个草案

分类:CSS

W3C CSS 工作组于4月10日发布了 CSS Variables Module Level 1 首个草案。CSS Variables 是什么呢?很明显,Variables 是变量,CSS Variables 就是 CSS 变量。

只要有点开发经验的人都知道定义变量是非常有用的,所以在 CSS 中如果在样式表中经常使用某个值(比如某个颜色或某种字体),可以将其定义为变量,修改样式表时只需更改该变量的值,就更新整个样式表,而无需逐个更改每个样式规则。

CSS Variables 的定义必须以“var-”开头,后面直接跟变量名,然后是属性值,如“var-fontColor:#333”,“fontColor”就是变量,可以在需要的时候以“var(fontColor)”引用。如:

:root { 
	var-fontColor:#333;
}
body {
	color:var(fontColor);
}

由于变量名可以任意命名,所以如果您根据具体情况命名的话,那么样式表就会显得更有"语义",就更容易阅读。

如果一个变量的属性被声明多次,则会根据 CSS 选择器的权限对应应用。如:

:root { var-color:blue;}
div { var-color:green;}
#alert { var-color:red;}
* { color:var(color);}

<p>我继承根元素,是蓝色的</p>
<div>我应用div规则,是绿色的</div>
<div id='alert'>
  我应用 #alert 规则,是红色的
  <p>因为继承 alert,所以我也是红色</p>
</div>

更多关于 CSS Variables 的介绍你可以查看官方草案:http://www.w3.org/TR/css-variables/。由于还是草案,所有规则都有可能更改或替换,您也可以提交关于功能和语法上的反馈。有兴趣的话多注意官方的消息吧。

查看:4,114 评论:9 标签:

IE8 IE9 display:none 引发的 scrollTop 问题

分类:CSS,前端技术

前两天一个同事跟我说页面上有个问题:一个有滚动条的显示、隐藏 div 在 IE 8、IE 9 里每次重新显示的时候,滚动条总是跑回顶部。我查看源码,看到那东东上赫然出现了刺眼的 onmouseover 、onmouseout,我最不喜欢这里出现在这些了(作为前端开发者,你懂得!),第一印象可能是这里的问题。好吧,我改写一下。然而,当我把分离、简洁、可读性强的代码放上去后,依然是老样子。你可以用 IE 8 或 IE 9 查看这个 Demo

莫非真的是我的样式引起的?经过再次检查以及在单独的页面测试下,最终得知是 IE 8、IE 9 的问题。当一个元素设置 display:none 后,scroll(scrollHeight、scrollLeft、scrollTop、scrollWidth)属性值变为 0,再设置为 display:block 后,元素的 scroll 属性值会变回设置 display:none 之前原本的值,但 IE 8、IE 9 却没有变回原有的值,依然是 0,所以就出现了滚动条跑回顶部这样的问题(即 scrollTop 值为 0)。使用 IE 9 的“开发人员工具”可以查看元素的 scroll 属性值的变化,如下图:

IE9 开发人员工具面板

阅读全文 >>

查看:5,652 评论:7

HTML 5 表单

分类:前端技术

表单是页面中不可缺少的元素,没有表单,就没有现在如此生动,趣味的页面。不过虽然表单很重要,但在 HTML 5 之前,表单的元素不多,属性和方法也不多,很多属性和方法都是用 JavaScript 模拟的,用 JavaScript 模拟这些功能要花费不少的时间和精力。如果用户能使用到这些模拟的功能,那么花费是值得的;如果用户客户端禁用 JavaScript,那么这些功能将全部挂掉,时间和精力都白白浪费了。 HTML 5 出现之后,这一切都不同了。HTML 5 增加的表单、表单类型以及表单属性,不但节省了开发者的时间,而且让更多应用成文可能。下面来看看 HMTL 5 新增表单类型的简单说明。

新增的 input 元素类型

类型 类型名称 功能描述
color 颜色选择器 输入颜色值的文本框
date 日期选择器 输入日期的文本框
datetime 日期时间选择器 输入 UTC 日期和时间的文本框
datetime-local 日期时间选择器(本地) 输入本地日期和时间的文本框
month 月份选择器 输入月份的文本框
time 时间文本框 输入时间的文本框
week 周选择框 输入周的文本框
email 邮件输入框 输入 E-mail 地址的文本框
number 数字输入框 输入数字的文本框,可以设置输入值的范围
range 数字滑动条 通过拖动滑动条改变一定范围内的数字
search 搜索输入框 输入搜索关键字操作的文本框
tel 电话号码输入框 输入电话号码
url Web 地址输入框 输入 URL 地址的文本框

阅读全文 >>

查看:8,121 评论:8 标签:

页面 1/2512345678910...尾页