随笔分类 - HTML/CSS
摘要：一、悠悠哉哉说点什么本来我有个很好的计划，就是本文用漫画来写，把话痨的火影漫画的文字重新抹掉，然后填本文相关的技术文字。哈，是不是很好啊！但是，想到了一个残酷的现实——流量，我一个月只有30G流量，几乎月月爆棚，要是这里全部用火影的图片要实现，页面没个1M搞不下来哈~，文章要是3000访问，就差不多3G，天哪，我表示压力很大。于是，我决定还是中规中矩用文字加一两小截图表示下吧~二、绝对定位元素的居中实现如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。兼容性不错的主流用法是：.element { width: 600px; height: 400px; posi...
阅读全文
摘要：本文分三部分讲解:效果图与页面的差异：主要讲解页面与效果图不同的细微之处Css3新特性：分两部分，新特性和实例部分设计与构建：构建的趋势与现状1.效果图与页面的差异：1)内核小常识分享主流内核：Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto内核：Opera7及以上Webkit内核：Safari,Chrome等1 Trident内核和W3C标准脱节，Trident内核的大量Bug等安全问题没有得到解决。2 Gecko：这是Firefox 和 Fl
阅读全文
摘要：我们常以“整齐”，“易读”，“亲切”，“易于维护”，“复用性强”等来形容一些优秀的开发者所写的代码。现在，对代码的好评还有一个更为时尚的词“优雅”，是不是听起来觉得很亲切呢？页面是互联网产品的表现层面，不仅讲求外观，而且会应对更新迅速的互联网产品需求。要成为一名优秀的开发者，经验积累是必不可少的，而一部分经验归纳起来正是在工作过程中的细节。下文介绍的即是在页面开发流程中的多方面的细节内容，希望对这些细节内容的探讨，可以帮助各位页面开发者做得更出色，以更优雅的姿态来书写页面。从Photoshop开始从UI设计稿到静态页面一般都称作“切图”。这个词很容易令人联想到Photoshop中的“切片工具”
阅读全文
摘要：可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;)，不过，当时，其他浏览器是无解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能。CSS3 greyscale 滤镜实现如下测试代码：.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filt...
阅读全文
摘要：浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1
阅读全文
摘要：曾几何时，display:inline-block 已经深入「大街小巷」，随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了，上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗？本文将带你深入剖析该属性值的前世今生，让你更好的理解和运用 inline-block。（本文约定 display:inline-block 简写为 inline-block）开篇我们来看几个问题：IE6、7 真的不支持 display:inline-block 吗？disp
阅读全文
摘要：CSSSprites技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢？下面让我们详细的聊聊。在大家还在拨号上网的“远古时期”，由于网速的限制，页面开发者都喜欢把网页里面的图片字节数控制的非常小，往往在一个图片文件夹里散落着n多的小碎图。随着网络技术的发展，网速的提升，大家越来越重视页面的加载速度，页面效率问题，过去的那些小图便成为了前端开发者的眼中钉，因为每加载一张图片都会产生一次浏览器请求数，发起的请求数越多那么页面加载的速度也越慢。还有当页面加载时，图片一个个的零星显示，鼠标经过时候背景闪白等也
阅读全文
摘要：以前也写过类似的实现方案《用css的border属性实现三角》、《Tip中小三角的实现》。两种方法都是类似的方法：利用 border 来实现2个三角形将三角形叠在一起，实现一个类似的效果。今天在小鱼的博客上看到了据说的终极方案。貌似很强大的样子，推荐一下，实现原理是这样的：创建一个有 border 的四方形，用 CSS3 transfrom 作 45 度旋转利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案例子HTML：1<divclass="tips">2<divclass="tips-text"
阅读全文
摘要：国画中有句话，“画虎先画骨”。对应到网页上，视觉效果只是一张皮，前端代码是支撑这张皮的骨，了解骨架是怎么长的，有助于设计出更合理高效的页面。一、常见视觉效果是如何实现的关于文字效果文字自身属性相关的效果css中都是有相对应的样式的，如字号、行高、加粗、倾斜、下划线等，但是一些特殊的效果，主要表现为ps中图层样式中的效果，css是无能为力的。但是css也在不断发展，在css3中已经新增了文字阴影的效果，可惜IE6、7、8均不支持。所以，一些比较特殊的文字效果，依然只能通过图片来实现。说说文字间距在css中其实是可以控制文字间距的，但是现实中很少会使用，一方面是很多设计师不知道css中有相应的属性
阅读全文
摘要：自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如<article>)的途径是使用HTML5 shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。您还可以参考以下HTML5相关教程及资源:《HTML5 Drag&Drop 拖拽、FileReader实例教程》《HTML5 WebSockets 基础使用教程》《HTML5和CSS3工具资源汇总》《关于HTML 5 canvas 的基础教程》《一起感受HTML5和CSS3的能量》使用和下载 html5.js必须在页面head元素内调用(因为
阅读全文
摘要：几乎每天我们都能发现新的关于传授和推广HTML5的资源和文章,我们也在HTML5 boilerplate和HTML5 Reset(尽管他们已经超出了HTML5的范畴)给出了HTML5的模板。我们也有无数可以去选择的涵盖HTML5及相关技术的书籍。我们有书架、画廊和分析师去帮助我们处理HTML5的弊端。但是主要的不要忘记官方的文档。从我的自己的观点出发（剔出那些关于HTML5能做和不能做的争论）网页设计和开发者社区对新技术和语义化是持乐观态度的。虽然在理论上HTML5拥有能够改善网页的潜质，事实上这么多重要的改变是很难去理解和把握的。对我个人而言我一直去慢慢的体会HTML5的各种新特性的，因此我
阅读全文
摘要：上周五下班前我们敬爱的三三大人又在组里讨论了关于“11个class与一个id”谁的优先级高的问题～_～！猜一下01 <!DOCTYPE HTML>02 <html>03 <head>04 <meta charset="utf-8">05 <style type="text/css">06 body{font-family: "Microsoft YaHei";}07 .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red
阅读全文
摘要：如题，给大家介绍和讲解几个常用的CSS3属性，并用到实处。先看Demo（请使用Chrome或者Firefox浏览，IE的靠边）：此Demo地址为：演示，携程UED读者墙觉得爽的可以继续阅读下面的知识点，感觉不爽的可绕行。使用基础的Html和CSS写出雏形需要一提的是头像（img）的排版。给外面a标签padding-left:;，img自身float:left;margin-left:;，这种写法避免了不少因浮动产生的问题，且代码简明，推荐适当的使用此方法。下面是Demo代码：<ul class="readers-list"> <li><a ta
阅读全文
摘要：最近在看文本相关的属性，觉得text-indent挺有意思的，就小小的总结了一下（这里不讨论用text-indent来隐藏文字）。我将会从下面几个方面来进行说明：1.text-indent应用于块级元素2.text-indent应用于行内元素3.text-indent应用于替换元素4.text-indent应用于inline-block元素5.继承6.总结一、text-indent应用于块级元素text-indent常用于段落首行2字符的缩进。我们先来看一下demo1（所有demo文章最后会提供下载地址）。各浏览器都可以正常的显示。如图：我们也可以通过负的text-indent来制作一些效果，
阅读全文
摘要：我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同，下面我们通过对主要 外形CSS属性的支持，打造全兼容select。 我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况：height.100.padding.0、height.no.padding.100、no.height.no.padding，结果如 链接图片各浏览器DEMO外观我们可以得出以下研究属性。ie6ie7ie8ie9ffchsfop默认高度22px22px19px20px19..
阅读全文
摘要：最近组内进行HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段，可能看看大师的讲解会更容易理解。由于才疏学浅,很多不明白的地方可能只是做了字面上的翻译，不对的地方还请大家多多指教。下面附上原文地址：Avoiding common HTML5 mis
阅读全文
摘要：前言：HTML5和CSS3的时代到来了，新版2011版淘宝网首页已全部使用HTML5，拥抱变化才是王道。为之漫笔翻译的很好，看了一遍后，感觉理解了很多，强烈推荐其他做开发的童鞋尤其前端也来看看。不仅让我摸清了html4，xhtml1.0, xhtml2.0, html5之间的关系，也理解了为什么会出现HTML5，同时，加紧推进在项目中应用HTML5。著名的阿西莫夫机器人三大法则：机器人不得伤害人类，或袖手旁观人类受伤害。机器人必须服从人类命令，除非命令违反第一法则。机器人必须自卫，只要不违背第一和第二法则。xhtml1.0与html4.0相同点：两个规范的内容是一样的;词汇表是一样的;所有的元
阅读全文
摘要：前言：大家不难发现，只要是招聘UED相关的岗位，如前端开发工程师、交互设计师、用户研究员甚至视觉设计师，一般都对web标准、可用性和可访问性的理解有要求。那么到底什么是web标准、可用性、可访问性呢？一、web标准简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。
阅读全文
摘要：在工业化设计融入人们生活的现今，用户体验一词就常常出现在人们的视线里，随着互联网web2.0时代的到来，大大小小的网站设计中也都开始关注用户体验的方面，对什么是用户体验（百度这四个字，比我写什么解释都好）就不做详细赘述了，相信大家比我了解的更加丰富。用户体验从产品设计阶段便开始介入进来，如原型设计中交互模式设计、功能实现方式设计都融入了设计人员对用户的关怀，听过这样的一句话：“具有良好用户体验的产品，不仅仅取决于一个有着丰富交互设计经验的产品设计师，还与产品生产过程中的每一个环节是否都具备良好的用户体验意识有一定的关系”。今天我想从一个页面重构工程师的角度出发，从两个方面去谈谈在我的工作中，我
阅读全文
摘要：关于工具：实现各个浏览器中具备良好的透明特性的效果，IE中使用私有滤镜filter，高端浏览器使用CSS3中的rgba属性。输入十六进制的颜色值以及透明度，自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算。说明：1.样式名选项，例如：.rgba，填样式名选项后会自动导出IE9的兼容方案，不填样式名直接输出样式属性，请自己写IE9的hack单独把 IE9 的 filter 变成透明度为 0 即可。高级浏览器大部分支持 :root 伪类，但不支持 filter 属性，而 IE 只有 IE9 支持，所以我们可以这样写。代码如下：:root .rgba{filter:pr
阅读全文
浙公网安备 33010602011771号