来客轩 » XHTML/CSS/XML/XSL http://wlog.com.cn 专注于研究网页标准和用户体验! Tue, 31 Aug 2010 13:10:43 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 web性能优化 http://wlog.com.cn/xhtml/web-performance.html http://wlog.com.cn/xhtml/web-performance.html#comments Tue, 31 Aug 2010 13:10:43 +0000 永远的冰点 http://wlog.com.cn/?p=1848 http://wlog.com.cn/xhtml/web-performance.html/feed 0 Unicode – CSS中文字体转编码 http://wlog.com.cn/xhtml/unicode-css-fontfamil.html http://wlog.com.cn/xhtml/unicode-css-fontfamil.html#comments Fri, 27 Aug 2010 15:21:46 +0000 永远的冰点 http://wlog.com.cn/?p=1812 http://wlog.com.cn/xhtml/unicode-css-fontfamil.html/feed 0 各浏览器的并行连接数（同域名） http://wlog.com.cn/xhtml/connections-every-domain.html http://wlog.com.cn/xhtml/connections-every-domain.html#comments Tue, 18 May 2010 15:05:19 +0000 永远的冰点 http://wlog.com.cn/?p=1730 http://wlog.com.cn/xhtml/connections-every-domain.html/feed 0 让IE6,IE7,IE8支持css3属性 http://wlog.com.cn/xhtml/ie-css3.html http://wlog.com.cn/xhtml/ie-css3.html#comments Sat, 01 May 2010 05:42:29 +0000 永远的冰点 http://wlog.com.cn/?p=1722 http://wlog.com.cn/xhtml/ie-css3.html/feed 2 前端开发书籍资料推荐 http://wlog.com.cn/xhtml/front-development-books.html http://wlog.com.cn/xhtml/front-development-books.html#comments Tue, 19 May 2009 12:07:56 +0000 永远的冰点 http://wlog.com.cn/?p=1240 http://wlog.com.cn/xhtml/front-development-books.html/feed 1 CSS Hack浏览器兼容一览表 http://wlog.com.cn/xhtml/css-hack-sheet.html http://wlog.com.cn/xhtml/css-hack-sheet.html#comments Thu, 26 Mar 2009 12:15:17 +0000 永远的冰点 http://wlog.com.cn/?p=1139 http://wlog.com.cn/xhtml/css-hack-sheet.html/feed 1 阿里旺旺产品项目UED流程图 http://wlog.com.cn/xhtml/alisoft-ued-process.html http://wlog.com.cn/xhtml/alisoft-ued-process.html#comments Wed, 25 Mar 2009 11:40:03 +0000 永远的冰点 http://wlog.com.cn/?p=1109 http://wlog.com.cn/xhtml/alisoft-ued-process.html/feed 4 回车键触发表单提交的问题 http://wlog.com.cn/xhtml/form-submit.html http://wlog.com.cn/xhtml/form-submit.html#comments Tue, 24 Mar 2009 11:54:40 +0000 永远的冰点 http://wlog.com.cn/?p=1103 http://wlog.com.cn/xhtml/form-submit.html/feed 0 前端工程师应该关注什么–思维导图 http://wlog.com.cn/xhtml/front-end-engineer-mind-mapping.html http://wlog.com.cn/xhtml/front-end-engineer-mind-mapping.html#comments Sun, 22 Mar 2009 11:45:50 +0000 永远的冰点 http://wlog.com.cn/?p=1099 http://wlog.com.cn/xhtml/front-end-engineer-mind-mapping.html/feed 1 纯手工打造CSS像素画 http://wlog.com.cn/xhtml/css-pixel-picture.html http://wlog.com.cn/xhtml/css-pixel-picture.html#comments Sat, 14 Mar 2009 07:50:05 +0000 永远的冰点 http://wlog.com.cn/?p=1049 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS像素画(冰极峰:http://www.cnblogs.com/binyong)</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;} body{background:#555;} #wrapper{width:500px;margin:0 auto;border-left:4px #888 solid;border-right:4px #888 solid;background:#fff;padding-bottom:50px;} #corner{position:relative;} #corner em,#corner b,#corner strong,#corner i,#corner span{display:block;border-top:67px green solid;border-right:67px transparent dotted;width:0;height:0;overflow:hidden;} #corner b{border-width:65px;border-top-color:red;position:absolute;top:0;left:0;} #corner em{border-width:63px;border-top-color:orange;position:absolute;top:0;left:0;} #corner i{border-width:37px;border-top-color:orange;position:absolute;top:0;left:0;} #corner strong{border-width:35px;border-top-color:red;position:absolute;top:0;left:0;} #corner span{border-width:33px;border-top-color:#fff;position:absolute;top:0;left:0;} #corner a{position:absolute;display:block;width:10px;height:10px;font-size:12px;color:#fff;font-weight:bold; text-decoration:none;} #corner a#b1{left:34px;top:3px;} #corner a#b2{left:18px;top:18px;} #corner a#b3{left:3px;top:33px;} h1 {width:150px;height:100px;line-height:100px;color:#2f231a;font-size:16px;margin:0px auto;position:relative;} h1 b {color:#b2c63a;font-size:16px;font-style:normal;left:-1px;position:absolute;top:-1px;} h1 strong{position:absolute;top:25px;left:30px;height:22px;} h2{border-bottom:1px orange solid;line-height:30px;padding-left:10px;background:#FFC966;color:#7C66FF;text-align:center;} .blog{background:#2f231a;} .blog a:link,.blog a:visited{color:#fff;} .context{height:380px;} /*-----------------------------------像素画样式---------------------------------------------*/ .context{width:240px;margin:0px auto;} .text{margin:0 auto;width:400px;height:100px;line-height:100px;} .box{width:50px;height:50px;float:left;border-left:4px red solid;border-top:4px blue solid;border-bottom:4px [...]]]> http://wlog.com.cn/xhtml/css-pixel-picture.html/feed 1 CSS图片垂直居中方法整理集合 http://wlog.com.cn/xhtml/css-align-center.html http://wlog.com.cn/xhtml/css-align-center.html#comments Tue, 10 Mar 2009 12:31:19 +0000 永远的冰点 http://wlog.com.cn/?p=1044 <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; height:500px; border:1px solid #ccc; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div> </pre class="html"> <strong>标准浏览器下另类方法:</strong> <pre class="html"> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style type="text/css"> <!-- body { margin:0;padding:0 } div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; margin:auto } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } p:after { content:".";font-size:1px; visibility:hidden } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div> 标准浏览器严格型申明下： < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; } div p { position:static; +position:absolute; top:50%; vertical-align:middle } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } --> </style> <div><p><img [...]]]> http://wlog.com.cn/xhtml/css-align-center.html/feed 0 仿Google搜索的input效果 http://wlog.com.cn/xhtml/google-input.html http://wlog.com.cn/xhtml/google-input.html#comments Thu, 05 Mar 2009 12:03:59 +0000 永远的冰点 http://wlog.com.cn/?p=950 .input{ background:url(http://wlog.com.cn/code/javascript/google-input/google_custom_search_watermark.gif) no-repeat} input {margin:0; padding:0;} </style> <script type="text/javascript"> window.onload = function (){ var oInput = document.getElementById("textfield"); var bf=0 oInput.onmouseout = function(){ if (this.value==''&& bf==0)this.className='input'; } oInput.onblur= function(){bf=0;if (this.value=='')this.className='input';} oInput.onfocus= function(){bf=1;this.className='';} } </script> <input type="text" name="textfield" id="textfield" class="input" /> ]]> http://wlog.com.cn/xhtml/google-input.html/feed 4 完美的CSS绝对底部 http://wlog.com.cn/xhtml/css-bottom.html http://wlog.com.cn/xhtml/css-bottom.html#comments Wed, 04 Mar 2009 11:40:17 +0000 永远的冰点 http://wlog.com.cn/?p=929 <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div> 说明: 使用这个布局的前提，就是footer要在总的div容器之外，footer使用一个层，其它所有内容使用一个总的层。如果确实需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位。 CSS代码: 下面是主要的CSS代码，让你的底部可以位于窗口的最下面: html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */ #footer {position: relative; margin-top: -150px; /* footer高度的负值 */ height: 150px; clear:both;} 说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。 就是这么简单，不过还没完。如果你的主体是使用悬浮布局，还得解决一些浏览器的兼容问题，这里使用的重点是为了Goolge Chrome。 对#main部份进行著名的Clearfix Hack: .clearfix:after {content: "."; display: block; height: 0; clear: [...]]]> http://wlog.com.cn/xhtml/css-bottom.html/feed 7 密码强度规则（仿 google） http://wlog.com.cn/xhtml/google-password-strength-regular.html http://wlog.com.cn/xhtml/google-password-strength-regular.html#comments Tue, 03 Mar 2009 13:46:45 +0000 永远的冰点 http://wlog.com.cn/?p=1003 http://wlog.com.cn/xhtml/google-password-strength-regular.html/feed 0 IIS6中设置页面Gzip压缩 http://wlog.com.cn/xhtml/iis6-gzip.html http://wlog.com.cn/xhtml/iis6-gzip.html#comments Sun, 18 Jan 2009 01:07:52 +0000 永远的冰点 http://wlog.com.cn/?p=690 http://wlog.com.cn/xhtml/iis6-gzip.html/feed 0 IE5 到 IE8 的 CSS 兼容列表 http://wlog.com.cn/xhtml/ie5-ie8-css.html http://wlog.com.cn/xhtml/ie5-ie8-css.html#comments Wed, 14 Jan 2009 13:39:40 +0000 永远的冰点 http://wlog.com.cn/?p=664 http://wlog.com.cn/xhtml/ie5-ie8-css.html/feed 0 高性能表现的网站 http://wlog.com.cn/xhtml/high-performance-web.html http://wlog.com.cn/xhtml/high-performance-web.html#comments Mon, 22 Dec 2008 07:30:42 +0000 永远的冰点 http://wlog.com.cn/?p=437 http://wlog.com.cn/xhtml/high-performance-web.html/feed 0 个人推荐CSS书写顺序 http://wlog.com.cn/xhtml/css-write-regular.html http://wlog.com.cn/xhtml/css-write-regular.html#comments Mon, 22 Dec 2008 07:03:07 +0000 永远的冰点 http://wlog.com.cn/?p=422 http://wlog.com.cn/xhtml/css-write-regular.html/feed 0 网站命名规范 http://wlog.com.cn/xhtml/nam-specification.html http://wlog.com.cn/xhtml/nam-specification.html#comments Sat, 22 Nov 2008 11:44:30 +0000 永远的冰点 http://wlog.com.cn/?p=400 http://wlog.com.cn/xhtml/nam-specification.html/feed 0 web标准页面知识必备 http://wlog.com.cn/xhtml/knowledge-of-web-standard.html http://wlog.com.cn/xhtml/knowledge-of-web-standard.html#comments Wed, 22 Oct 2008 13:02:04 +0000 永远的冰点 http://wlog.com.cn/?p=408 http://wlog.com.cn/xhtml/knowledge-of-web-standard.html/feed 0 内容呈现建议十条 http://wlog.com.cn/xhtml/content-for-the-recommended.html http://wlog.com.cn/xhtml/content-for-the-recommended.html#comments Mon, 22 Sep 2008 11:39:10 +0000 永远的冰点 http://wlog.com.cn/?p=414 http://wlog.com.cn/xhtml/content-for-the-recommended.html/feed 0 CSS Hack汇总 http://wlog.com.cn/xhtml/css-hack.html http://wlog.com.cn/xhtml/css-hack.html#comments Sun, 21 Sep 2008 13:59:31 +0000 永远的冰点 http://wlog.com.cn/?p=454 body select {……} 这句与上一句的作用相同。 仅IE6不识别 select { display /*IE6不识别*/:none;} 这里主要是通过CSS注释分开一个属性与值，流释在冒号前。 仅IE6与IE5不识别 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。 仅IE5不识别 select/*IE5不识别*/ { display:none;} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别 盒模型解决方法 selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 清除浮动 select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题 。 只有Opera识别 @media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。 IE的if条件Hack <!--[if IE]> Only IE < ![endif]--> 所有的IE可识别 <!--[if IE 5.0]> Only IE [...]]]> http://wlog.com.cn/xhtml/css-hack.html/feed 0 用YSlow分析我们页面 http://wlog.com.cn/xhtml/yslow-page.html http://wlog.com.cn/xhtml/yslow-page.html#comments Thu, 28 Aug 2008 14:11:30 +0000 永远的冰点 http://wlog.com.cn/?p=911 http://wlog.com.cn/xhtml/yslow-page.html/feed 0 无内容div占据空间的触发条件和解决方法 http://wlog.com.cn/xhtml/div-layout.html http://wlog.com.cn/xhtml/div-layout.html#comments Tue, 19 Aug 2008 11:51:51 +0000 永远的冰点 http://wlog.com.cn/?p=672 http://wlog.com.cn/xhtml/div-layout.html/feed 0 关于火狐下面h1,h2,h3,h4,h5字体变小的问题解决办法 http://wlog.com.cn/xhtml/firefox-font.html http://wlog.com.cn/xhtml/firefox-font.html#comments Thu, 26 Jun 2008 11:22:15 +0000 永远的冰点 http://wlog.com.cn/?p=524 http://wlog.com.cn/xhtml/firefox-font.html/feed 0 加速图片显示 http://wlog.com.cn/xhtml/fast-img-diplay.html http://wlog.com.cn/xhtml/fast-img-diplay.html#comments Mon, 23 Jun 2008 15:49:12 +0000 永远的冰点 http://wlog.com.cn/?p=449 http://wlog.com.cn/xhtml/fast-img-diplay.html/feed 0 如何减少网页的内存与CPU占用 http://wlog.com.cn/xhtml/reduction-cpu-and-memory.html http://wlog.com.cn/xhtml/reduction-cpu-and-memory.html#comments Thu, 19 Jun 2008 13:13:19 +0000 永远的冰点 http://wlog.com.cn/?p=649 “预览模式”>“消除锯齿”）。 模糊滤镜:使用模糊滤镜时，如果用于 blurX 和 blurY 的值是 2 的整数次幂（例如 2、4、8、16 和 32），则可以加快计算速度，并且可以使性能提高 20% 到 30%（flash的帮助是介样说滴）。 作者：aoao ]]> http://wlog.com.cn/xhtml/reduction-cpu-and-memory.html/feed 0 科学设计你的网站网页 http://wlog.com.cn/xhtml/scientific-design-page.html http://wlog.com.cn/xhtml/scientific-design-page.html#comments Thu, 22 May 2008 11:33:38 +0000 永远的冰点 http://wlog.com.cn/?p=442 http://wlog.com.cn/xhtml/scientific-design-page.html/feed 0 WEB前端设计师需要的技能 http://wlog.com.cn/xhtml/front-end-designers-skills.html http://wlog.com.cn/xhtml/front-end-designers-skills.html#comments Wed, 21 May 2008 13:44:04 +0000 永远的冰点 http://wlog.com.cn/?p=496 http://wlog.com.cn/xhtml/front-end-designers-skills.html/feed 0 IE6下图片下方有空隙的解决方法 http://wlog.com.cn/xhtml/ie6-img-blank.html http://wlog.com.cn/xhtml/ie6-img-blank.html#comments Wed, 21 May 2008 11:19:33 +0000 永远的冰点 http://wlog.com.cn/?p=431 <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" /> </div> 改为 <div><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" /></div> 方法二：设置 img 为 display:block 方法三：设置 vertical-align 属性为 top | bottom |middle |text-bottom ]]> http://wlog.com.cn/xhtml/ie6-img-blank.html/feed 0