html

Page 1 of 2

Archives

文件夹

字pc端用click事件来触发就可以了,但是在移动端click是触发不到file的input,要用touch。 如果想pc端和移动端都可以正常使用,可以用FastClick解决兼容问题。 另外在移动端用file是访问手机的相机或者相册(测试了ios,android是可以,wp不行)。

转载自:W3CPLUS Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href=”css/reset.css” rel=”stylesheet” type=”text/css” media=”screen” /> <link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”all” /> <link href=”css/print.css” rel=”stylesheet” type=”text/css” media=”print” /> 或者这样的形式: <style type=”text/css” media=”screen”> @import url(“css/style.css”); </style> 不知道大家留意没有,其中两种方式引入CSS样式都有一个共同的属性“media”,而这个“media”就是用来指定特定的媒体类型,在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型,如屏幕(screen)和打印(print)的样式表,当然还有其他的,比如说“TV”,“handheld”等,其中“all”表示的是支持所有媒体介质。有关于更多的Media类型,可以点击这里。 上面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的”Media Queries”的更多使用方法和相关知识,下面我们开始进入今天的主题。CSS3中的Media Queries增加了更多的媒体查询,同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件,如果媒体符合相应的条件,那么就会调用对应的 样式表。换句简单的说,“在CSS3中我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个 例子,你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制 作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。 首先来看一个简单的实例: <link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”small.css” /> 上面的media语句表示的是:当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容: 1、screen:这个不用说大家都知道,指的是一种媒体类型; 2、and:被称为关键词,与其相似的还有not,only,稍后会介绍; 3、(max-width:600px):这个就是媒体特性,说得通俗一点就是媒体条件。 前面这个简单的实例引出两个概念性的东西,一个就是媒体类型(Media Type)和 媒体特性(Media Query),首先一起来理解一下这两个概念: 一、媒体类型(Media Type) […]

转载前说明:感谢作者,我终于找到个说法了,之前因为没有相关资料一直是通过改变代码结构来解决该问题的,现在看到这些总结也总算不会无计可施,同样碰到问题的同学有福了。 转载自:http://www.yuzi.me/Share/ie6floatbug.html IE7 的web标准之道IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计。看着FireFox的 市场占有率不停的上升,微软终于推出了IE7。但IE7是否真的能够力挽狂澜,是否真的能够得到用户的信任,是否真的能够得到网页设计者的认可呢? 估 计很多的朋友都是因为这个华丽的“重复文字”一词进来的,其实这纯粹是一个bug作为。这个bug在国际上比较获得认可的名字叫做——“IE6重复文字 bug”。这是一个非常好玩但是有很令人摸不到头脑的bug。如果,你不知道产生原因的话,将会令人非常头痛。这也是我在现实工作中真正遇到过的情况。 测试一下:复制以下代码放IE6下测试 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml“> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta name=”author” content=”Yuzi,煜子,网页设计师网站” /> <meta name=”Copyright” content=”Yuzi,煜子” /> <title>IE6重复文字bug</title> </head><body><div style=”width:200px; height:100px; padding-left:70px;”><div style=”float:left;”></div> <!–如果是IE6,你将多看到一个“影”字–> <div style=”float:left; width:200px;”>IE6下DIV容器中双Float元素字符重影</div> </div> </body> 下面是测试页面分别在IE6,IE7,IE8,FireFox(火狐浏览器),Chrome(谷歌浏览器),Oepra以及Safari(苹果浏览器)中显示效果截图 通过截图,你会惊讶的看到在IE6中,多出了一个“影”字。下面来讲讲出现这个“影”字的一些条件(bug重现条件) 一个容器包含2两个具有“float”样式的子容器。 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小3(说到3,这里稍微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”) 在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因) 为何会出现重影 bug虽然的的确确的存在,但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词,谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来,但是现在仍然没有官方的说法。下面列出来的这两种说法,只是现在网上认可度比较高的而已。 说法一: IE6浏览器对<!– –>注释的解释存在bug引起的。“3像素bug”的扩展后遗症。 […]

$(document).ready(function(){ $(“#btn_copy”).click(function(){ $(“#TextArea1”).select(); copyValue(“TextArea1”); }) }) //复制功能 function copyValue(txtid) { if (isIE()) { clipboardData.setData(“Text”, document.getElementById(txtid).value); alert(“您已成功复制了CDKEY!”); } else { prompt(“您的浏览器不支持自动复制,请您手动复制对话框中的内容:”,document.getElementById(txtid).value); } } function isIE(number) { if (typeof (number) != number) { return !!document.all; } }

写页面的时候我最讨厌的两个部分就是各种Form和各种不同的分页。 今天突然想起来以前一个朋友推荐我用FormSite一直没有用在项目上,今天用了一下感觉很好。 兼容方面,现在看ie7以上问题不大~ie6没测。 觉得书写Form是件恶心事的可以看看这个。

原文地址:http://www.codeproject.com/Articles/26376/Speed-Up-Your-Website-By-Example 说在前面的:这个文章是08年的,比较老了,带着批判和找不同的心态去研究一下,会有收益的。   部分翻译:(翻译来自CSDN) 为什么减少请求数量 请求执行顺序: e.g.: index.htm and then global.css, spring.css, logo.jpg, menu1.jpg, menu2.jpg, menu3.jpg, 1×1.gif, corner1.gif, common.js, validation.js etc…) 在加载页面时,浏览器从URL中(src)中提取头链接href={url},css文件链接和发送每个请求的资源。 大体上,浏览器在每台客户机提出页面请求时只并发下载2-4个资源请求,(取决于http和浏览器版本),一般来说,Firefox要比IE略好一些. 结论:请求与连接越少,则响应越快. 怎样减少请求数量? 减少文件数目(css,js,image) 合并文件(尽可能的)所有的CSS文件尽量合并归一,所有的JS文件尽量合并归一, 使用浏览器缓存 当第一次请求时,减少资源,之后将依靠cache机制,不必再请求资源。 使用”expires”头。 优化html 为什么优化它? 大体来说html只耗20%的时间而其它(CSS,Javascript,images)要消耗80%的时间 html包裹所有的对象(标签控件)和styles,这些都提供与浏览器进行解析,解包和render(生成). 由于浏览器之争(竞争)和x/html/css的兼容问题.浏览器被设计为两种模式:普通(快模式,信任模式),quirk模式(必须要验证HTML/CSS,找到和”原谅错误”) 怎么优化它? 1.减少下载时间 将冗长的一页尽量载减为多页 2.快速生成render 使用非常简单的设计 standard vs quirk mode两种模式的选择. 建立信任的standard模式(前提,设计者达到专业水平遵循标准)以使得浏览器使用最优化的解析 切换模式为标准模式 移除inline CSS改为外部CSS引用(减少内部脚本书写,如document.write()) 如果遵循以上原则:浏览器会在生成内容与应用CSS和脚本改变布局之间踌躇,这种情况下会暂停内容的生成,所以要引用外部CSS,JS。 如果不遵循这条原则:外部文件意味着多了一个外部资源请求,如果主页CSS,JS很少,则用内联,减少请求数,加快响应速度。 减裁内容 少用table,转用div.为什么呢?浏览器不能生成实体控件对象(标签对应)直到捕捉到标签尾ie.</table> 若布局用bigger outer,(超多标签)   优化image 为什么要优化? image消耗大量下载时间及带宽,在这方面节省时间会得到卓著的功效。 怎样优化? 1.减少图片的使用频率 2.使用css rollovers代替图片链接。 3.设置恰当的宽度与高度(尽量小) 4.仔细地选择图片的颜色与格式; GIF: works best for solid colors and sharp-edged transitions from one color to other, Maximum colors: 256. JPEG: works best for continuous gradations of many colors or grey tones.   5.避免动画与flash 6.背景尽量用颜色而不用图片 7.不要把图片放在服务器的多个目录上,(避免在两个请求中,得不到最优从第一次缓存图片) 8.在下载大图片时用进度条掩饰,这是个小把戏,但不会引起用户的反感. 9.尽量使用小于10kb的一张图片,尽量不要把大图裁成小图,因为这样会增加request的次数。 使用CSS Sprites或image maps代替 可以把零碎的一些小图拼成一张大图,然后使用css sprites或image maps。  

hideFocus即隐藏聚焦,具有使对象聚焦失效的功能。 IE下可以直接在标签里加在hidefocus=”true”,对应的JS为el.hideFocus = true; 非IE下直接使用CSS属性: { outline:none;/*可用于a,input*/ }

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">< link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"> 建议包含上面两行HTML代码,可以支持ico格式的图标 然而,只有第一行是必须的,因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词(“shortcut”将被忽略,而仅适用“icon”);而Internet Explorer将会把它作为一个单独的名称(“shortcut icon”)。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像(例如动画GIF)时,才有必要添加第二行。 在HTML中,link元件必须在head元件里(在<head>和</head>之间)。 对于XHTML,link必须使用“ />”结束(或“></link>”),而不可以使用“>”结束。 href可以,但不必,指向/favicon.ico的位置。它可以指向任何URL。 图像通常可以使用任何被浏览器支持的图像格式。 .ico文件格式通常可以被所有可以显示favicon的浏览器读取。 设置服务器,以发送正确的MIME标识:ICO 文件 image/vnd.microsoft.icon(或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型,因为多数主流浏览器现在支持它)GIF 文件 image/gifPNG 文件 image/png 使用适当的分辨率和色深。ICO:包括多种分辨率(最常使用的是16×16和32×32,Mac OS X有时使用64×64和128×128)以及位深(比特每像素)(多数使用4、8、24 bpp,即16、256和1600万色)。GIF: 使用16×16,256色。PNG: 使用16×16,256色或24位。 注意:当favicon.ico被置于文档根目录时,将会被一些不处理link元件的浏览器找到,即使没有您的站点上没有指向它的链接。 标准化 Favicon 功能最早由微软创设,而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。微软支持的link标签不遵从World Wide Web Consortium(W3C,万维网联盟)的HTML建议[1],因为: rel属性必须包含一个用空格作分隔符的link类型的列表,所以一个包含两词的link类型不能被遵守标准的浏览器理解。“.ico”文件类型(一种用于Microsoft Windows上图标的光栅格式)没有一个注册的MIME类型,而且似乎在当时也不能被多数浏览器理解。然而2003年,这一格式在IANA获得注册,其 MIME类型是image/vnd.microsoft.icon,进而消除了此问题的第一部分。在网站上使用保留地址(reserved location)与Architecture of the World Wide Web(互联网的结构)矛盾,同时被认为是link squatting(链接劫持)或URI squatting(URI劫持)。 Mozilla 浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel=”icon”并允许网络设计人员添加任何支持的图像格式的 favicon。例如<link […]

通过加载微软urn:schemas-microsoft-com:vml命名空间中的VML技术来实现失真的处理,看下面代码。 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!–[if IE 6]> <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”> <![endif]–> <htmlxmlns=”http://www.w3.org/1999/xhtml”> <metahttp-equiv=”Content-Type”content=”text/html; charset=utf-8″/> <head> <title>VML</title> <!–[if IE 6]> <style type=”text/css”> .vml{ behavior: url(#default#VML);} .iefix {display:none!important;} </style> <![endif]–> <styletype=”text/css”> img.iefix {-ms-interpolation-mode: bicubic;} </style> </head> <body> <!–[if IE 6]> <v:image src=”1.jpg” class=”vml” style=”width:500px;height:400px;display:block” /> <![endif]–> <imgsrc=”1.jpg”class=”iefix”style=”width:500px;height:400px;display:block”/> </body> </html>