IE下的select和Date

Author : lovecicy

好久没发文章了,发一篇学习笔记吧。 一、select的问题 首先说个select的问题,如果要获取当前选中的select的option的index,可以用这个方法,对各个浏览器都有效: document.getElementById(‘select id’).selectedIndex 如果用jQuery,则是: $(‘#select id’).prop(‘selectedIndex’) 但是如果要获取当前选中的option的value,情况就就不一样了。如果在option里给每个option都设置了value值,那么在所有浏览器中,都可以这么拿: document.getElementById(‘select id’).value/$(‘#select id’).val() 而如果没有为option设置value值,则我们可能希望拿到当前选中的option的text,这时候用上面的方法,FF和chrome可以正常work,在IE下,jQuery的方式可以拿到value,通过原生的js就会拿到空字符串。 这时候针对IE,需要用下面这种方法: var select = document.[Read More]

standard

高性能前端(2) — 高性能CSS

Author : luckyGirl

避免使用@import 有两种方式加载样式文件,一种是link元素,另一种是CSS 2.1加入@import。而在外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟。虽然规则允许在样式中调用@import来导入其它的CSS,但浏览器不能并行下载样式,就会导致页面增添了额外的往返耗时。比如,第一个CSS文件first.css包含了以下内容:@import url(“second.css”)。那么浏览器就必须先把first.css下载、解析和执行后,才发现及处理第二个文件second.css。简单的解决方法是使用<link>标记来替代@import,比如下面的写法就能够并行下载CSS文件,从而加快页面加载速度: <link rel=”stylesheet” href=””first.css”” /> <link rel=”stylesheet” href=”second.css” /> 需要注意的是一个页面中的CSS文件不宜过多,否则应该简化及合并外部的CSS文件以节省往返请求时间(RTT)提升页面加载速度。 避免AlphaImageL[Read More]

standard

你不应该创造按钮(Nicholas C. Zakas)

Author : lovecicy

易用性的一个重要方面就是管理焦点和用户交互。默认情况下,所有的链接和表单控件都能获得焦点。这使你可以使用键盘的Tab键导航,当一个元素获得焦点以后,可以按下Enter键激活。不管你的web应用有多复杂,这个范例都能很好地工作。只要让使用键盘的用户能够在链接和表单控件之间导航,那么他就可以轻松的使用这个web应用。 不幸的是,有时候web开发者在创建界面的时候过于“聪明”了。当我需要某些看起来像一个链接但是表现的像一个按钮改怎么做呢?你会看到很多像这样的代码: <a href=”#” onclick=”doSomething()”>I’m a button</a> 这段代码应该有点倒你胃口。这是一个不会跳转也不做任何事的链接。它做到仅仅是通过给onclick事件添加了一个处理函数来达到某种意图。因为期待的样式是类链接样式,所以使用了锚点标记并添加了一些JavaScript。 那些熟悉ARIA的开发者可能会这样“解决”这个问题: <a href=”#” role=”button” onclick=”doSomething()”>I’m a button&[Read More]

standard

支付宝关于界面制作

Author : lovecicy

alipay about

之前闲来无事,看到支付宝的关于页面,页面挺简单的,就看了看他的页面代码,学习学习。 最后制作了一张简单的页面,中间的slide是用flash做的,模仿不了,就自己用js代码实现了左右滚动。用到js的地方只有两个,一个是slide,另一个是右上角的导航。 页面主要分为四个部分,第一部分是导航,中间是最重要的slide,下面是简介和footer。 实现slide功能的js用jQuery写了一个小插件,模仿的是jQuery.tokeninput插件的结构,有几个地方hard code了,需要再修改一下,欢迎各位js高手提出批评。 实现页面地址:http://lovecicy.com/alipay/about.html 支付宝关于页面:http://ab.alipay.com/i/index.htm

standard

8款精致的纯CSS3按钮特效

Author : lovecicy

按钮是网页中用户交互的重要元素之一,一款吸引人眼球的按钮能更好的引导用户去点击,从而产生网站期望得到的效果。今天向大家分享8款外观精致的纯CSS3按钮特效组合,一起来看看。 1、漂亮的纯CSS3图标按钮组合 带图标的纯CSS3按钮组合,图标简洁清爽,按钮美观大方,很不错的一款按钮特效。 在线演示 / 源码下载 2、CSS伪元素实现的3D按钮 CSS伪元素实现的3D按钮,一共5组按钮,是一款绚丽的CSS3按钮特效。 在线演示 / 源码下载 3、超具立体感的CSS3 3D弹性按钮 CSS3 3D立体弹性按钮,这个按钮是使用纯CSS3制作的3D弹性按钮,你可以试着点击这个按钮,感觉非常有意思。 在线演示 / 源码下载 4、纯CSS3圆形社会化分享按钮 由网页素材大全网站整理发布的纯CSS3圆形社会化分享按钮,这款CSS3按钮十分清爽,也十分漂亮。 在线演示 / 源码下载 5、纯CSS3气泡效果的按钮组合 纯CSS3气泡效果的按钮组合,这款CSS3按钮非常具有创意,当你把鼠标移入按钮时,按钮中就会出现漂亮的气泡效果。我们有更多这样的按钮特效收藏在JS特效网站中。 在线演示 / 源码下载 6、3[Read More]

standard

W3C官网超链接交互样式设计与实现

Author : lovecicy

w3c logo

超链接是网页中,必不可少的内容。超链接的交互设计,也是一个网页中最重要的细节。CSS 也为链接准备了几个伪类选择器,用来设置超链接的交互操作。但是在绝大多数网站中,我们看到的超链接交互样式,通常是:改变一下链接的颜色、取消或者增加下划线、点击链接文本变色或者下划线消失等等。但实际上,超链接的交互设计,并非只能这么简单。 W3C 的官方网站的超链接交互性不错,而且突破常规,下面我们来分析一下。下图是超链接交互性操作,当然推荐直接去 W3C 官方网站看效果。 实现原理和分析 首先,仍然是常规的超链接样式,带一条下划线,但是与普通的超链接样式不同的是,这条下划线要粗(2px 普通的 1px),同时这个下划线和文字颜色不同(用 color 和 text-decoration 定义的超链接下划线颜色是和文本相同的)。所以可以肯定,这个下划线是使用 border-bottom 属性定义的,并且 padding-bottom 了几个像素,空开一定距离。然后交互性操作就很简单了,只需要改变一下底边框的颜色就可以了。当点击事件发生的时候,超链接不是简单的改变了颜色,而是向下移动了几个像素,这样给人的错觉[Read More]

standard

IE, FireFox, Chrome浏览器支持CSS实现Alpha半透明的方法

Author : lovecicy

在网站中, 使用半透明效果的场景很多,但是各个浏览器对于标准的支持又不一样,在网上搜索了一下,总结了下各个浏览器的实现方法。 使用下面的CSS代码,基本可以覆盖主流的浏览器: -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=30)”; /*IE8*/ filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/ opacity: 0.3; /*Opera9.0+、Firefox1.5+、Safari、Chrome、IE9+*/ 现代浏览器都支持opacity属性,主要针对IE8及之前的IE浏览器。

standard

IE haslayout详解

Author : luckyGirl

要掌握好浏览器的兼容问题,IE无疑占据重要地位,虽然现在做的项目无需兼容IE6,但是IE6还是占据一定市场,做好IE6的兼容还是很有必要滴,在集合IE bug之前,首先了解一下IE的haslayout属性,许多IE的布局问题都是来源于它。   IE/Win的显示与其他浏览器不同的原因之一是,显示引擎使用一个称为布局(layout)的内部概念。 什么是layout? “Layout”是一个 Internet Explorer for Windows的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。 IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下,所有元素都控制自己的尺寸和定位。但是,这会在IE中导致很大的性能问题。因此,IE/Win 开发团队决定只将布局应用于实际需要它的那些元素,这样就可以充分地减少性能开销。   拥有layout的定义 一个元素”得到 layout”,或者说一个元素”拥有 l[Read More]

standard

IE6 实现min-height min-width max-height max-width

Author : luckyGirl

min-height min-width max-height max-width在IE6下是不支持的,实现这些声明效果是很有必要滴,毕竟当内容少时,不希望布局因此受到影响,网上查了一下,如何使用CSS实现IE6的以上属性,总结如下: 主要有3种办法: 方法1,2主要是运用了ie6在当容器的内容大于容器的大小时自动增加容器的大小的BUG,当然1,2,3都能实现min-height 和 min-width,要实现max-height跟max-width只能靠方法3了   方法1. 使用!important .withMinWidth{     min-width:100px;     width: auto !important;     width: 100px; } 这里有点要说明,IE6并不是不支持!important,而是对它的支持也有一定的bug,我的理解是不能重复体现 !important 这个在CSS中权重最大的效果,只有的样式可以覆盖!important 的属性 相关测试可参考: http://www.wkeke.cn/archives/ie6-and-important[Read More]

standard

清理浮动的几种方法以及对应规范说明

Author : lovecicy

原文:http://w3help.org/zh-cn/casestudies/001 作者:钱宝坤   前言 浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间,这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是,由于浮动特性,容器如果没有明确设定高度,会依照普通流内元素高度设置,这样就会导致脱离普通流的浮动元素溢出容器,影响其后元素布局。 我们将现有已知的清楚浮动元素方法罗列下: 采用一个HTML标签,以及css的clear属性,来手工清理浮动; 采用伪类:after,动态建立一个块元素,设定 clear 属性,清理之前的浮动元素; 采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素; 采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素; 使用 TABLE 以及 TD 标签作为浮动元素容器; 采用 float:le[Read More]

standard