随笔分类 - HTML & CSS
摘要：惜的是只有webkit核心的浏览器才能使用。用法很简单只需要在input添加属性x-webkit-speech即可，例子如下：这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示大图 这时说出来识别后就可以了，我测试下来，中文英语的识别率还挺高的。语音输入其他属性：lang这玩意可以强制输入框里面的语音的语言种类，例如 语音事件目前已知的只有onwebkitspeechchange，顾名思义，就是语音发生变化时触发的事件，一般可以作为提交这样说完以后就自动搜索了 x-webkit-grammar这个不是语音搜索用的属性，但是可以控制这个输入的语法，例如在做搜索框的话就可以用使得语音输入的
阅读全文
摘要：之前项目中遇到纯色的半透明背景，都是这么干： 这里是内容 但是，最近项目中，遇到高度不是固定的，这种方法就不行了。我也想过用Png24图片实现半透明效果，但是要用到图片，而且还有狗日的ie6兼容问题，虽然也可以解决，但是麻烦。那有木有更好的方法呢？？答案是肯定的，不然我写这篇文章干嘛。 就不告诉你这里是内容。我们得到的效果是这样的，IE9 的透明度竟然有 60%!! 这显然不是我们想法的。原因是：IE9 也支持 filter，使得 filter 的结果和 background-color 叠加，所以是 60%。解决方法必须有的：.box{filter:progid:DXIma...
阅读全文
摘要：腾讯系列（13）1.MacQQ的项目团队IBlog2.财付通设计中心 UID3.QQ邮箱博客4.QQ客户端团队博客5.腾讯用户研究与体验设计中心 CDC6.腾讯Web前端 Alloy 团队 Blog7.腾讯微信博客8.腾讯游戏官方设计团队TGideas9.QQ游戏设计中心GDC10.腾讯移动互联网设计团队MXD11.腾讯电商用户设计体验部ECD12.腾讯社交用户体验设计部ISUX13.腾讯大讲堂阿里系列（18）1.阿里巴巴中国站用户体验设计部UED2.淘宝网UED官方博客3.支付宝用户体验部UED4.支付宝官方博客5.阿里巴巴国际站UED团队6.淘宝良无限（无名良品)用户体验团队博客UED7.
阅读全文
摘要：雅虎团队经验：网站页面性能优化的34条黄金守则1、尽量减少HTTP请求次数 终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的
阅读全文
摘要：前言：布局是WEB开发一个重要的课题，进入XHTML/CSS后，使用TABLE布局的方式逐渐淡出，CSS布局以众多优点成为主流，本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到，据我所知，第二版在中国没有翻译出版。你可以从这里下载英文版（不过需要注册个用户名）正文基于CSS的布局能提供更
阅读全文
摘要：上周面试前端开发时候，遇到这样的笔试题目，三列布局，中间内容优先加载，左右两边的div宽度都是200px。我首先想到的是方法是：父级div相对定位，中间的div左右边距都是210px；左右两边的div都绝对定位，分别位于左右两边。在纸上写完，我当时觉得没啥问题啊，但是面试我的考官却对这样布局能否实现效果表示怀疑,当然他也不确定，可能他用的是其他方法。我回家后，试了一下，确实没问题啊。。解决问题的方法又不是只有一个。。<!doctype html><html><head><meta charset="utf-8"><tit
阅读全文
摘要：特别声明：此篇文章由Jekst根据Denise Jacobs的英文文章原名《CSS Architectures: New Best Practices》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/css-architectures-new-best-practices以及作者相关信息——作者：Denise Jacobs——译者：Jekst大家都已意识到了，在过去的几年里，前端开发领域取得了很大的进展，一些新的思想已经实践出新的方法来解决由来已久的问题。本文介绍了前端编程一些
阅读全文
摘要：今天面试的时候遇到这个题目。。。方法一：利用定位<!doctype html><html><head><meta charset="utf-8"><title>CSS 两列布局---左侧固定，右侧自适应</title><style type="text/css">* { margin:0; padding:0; }.box { height:300px; position:relative; }.left { width:200px; height:100%; backg
阅读全文
摘要：IE浏览器中用了滤镜来解决html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}chrome下-webkit-filter: grayscale(100%);IE+火狐+chromehtml { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(d
阅读全文
摘要：今天遇到一个问题，在IE浏览器下，使用label FOR radio后，label中的图片无法选中。例如，这样的代码 <input type="radio" name="radio" id="a" /><label for="a"><img src="/Labs/images/logo.gif" /></label> ，这种情况下，点击label的图片将无法选中radio选项。解决这个问题，目前可以有三种方法，分别是通过JS、CSS或者HTML代码
阅读全文
摘要：CSS中使用font-family属性引用中文字体时，经常采用三种方式定义字体：直接写中文英文别名Unicode码直接使用中文名称时，在不支持中文的系统或编码的页面就有可能会无法正常显示。如果使用Unicode码的话又不方便记忆。下面整理了常用的中文字体的英文别名，便于大家查找和使用：Windows中文名英文名宋体*SimSun黑体*SimHei微软雅黑*Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB仿宋FangSong楷体KaiTi仿宋_GB2312FangSong_GB231
阅读全文
摘要：对于页面上的块级元素，只须定宽及设置margin:0 auto;即可在水平上居中，但对于浮动的元素水平居中是无效的，一个典型的应用就是页面的分页效果了分页效果，在以往可能会采取设置inline-block，然后父容器设置text-align:center方式来实现内容居中，像如下代码：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/h
阅读全文
摘要：前面我们一起探讨了一下CSS3 Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。语法:R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数| 百分数A：透明度。取值0~1之间取值：<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值
阅读全文
摘要：CSS是我们使用的功能强大和最常用 web 语言。他可以兼容新旧不同的浏览器，他的兼容跨度确实够大的，从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站，无论创建怎么样的网站，有些CSS代码是必须要掌握的，可以说这是核心，掌握这样的一些CSS代码，前端布局方面基本上再不成问题，什么边框圆角，工具提示，浏览器hacks等等都不是问题，在今天的文章中分享我收藏的 30 个CSS 代码段，无论您是经验丰富的 web 设计师还是新手，他们都是非常值得借鉴的；Css Reset by Eric Meyer 1 html, body, div, span, applet, o
阅读全文
摘要：程序代码关键词:<input name="keyword" title="keyword" type="text" format="*M" emptyok="false" maxlength="12"/><br/><anchor title="搜索">搜索 <go href="http://www.codepub.com//" method="get"> <pos
阅读全文
摘要：.all IE{property:value\9;}.gte IE 8{property:value\0;}.lte IE 7{*property:value;}.IE 8/9{property:value\0;}.IE 9{property:value\9\0;}.IE 7{+property:value;}.IE 6{_property:value;}.not IE{property//:value;}lte：就是Less than or equal to的简写，也就是小于或等于的意思。lt ：就是Less than的简写，也就是小于的意思。gte：就是Greater than or eq
阅读全文
摘要：今天早上来到公司，习惯打开http://www.cnbeta.com/看IT新闻，头条是window 7下的ie10预览版发布，我于是离开装上并体验，没多久发现如下问题：一、点击超链接的瞬间，超链接的文字会出现灰色的背景，如下图：如果不需要这个背景色，我首先想到的解决办法是：CSS里加上下面一句代码即可解决：a:focus { background:none; }二、条件注释问题<!--[if IE 10]><script type="text/javascript"> window.alert("你使用的是IE10浏览器！");
阅读全文
摘要：/* ZhaoHuanLei:css reset */body,dl,dt,dd,ul,ol,li,form,fieldset,legend,input,select,button,textarea { margin:0; padding:0; }article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }blockquote:before,blockquote:after,q:before,q:after { content:''; conten
阅读全文
摘要：请在IE浏览器下观看：<html xmlns:v='urn:schemas-microsoft-com:vml'xmlns:o='urn:schemas-microsoft-com:office:office'><head><meta http-equiv='content-type' content='text/html; charset=gb2312'><title></title><meta name='generator' content=&
阅读全文
浙公网安备 33010602011771号