HTML&CSS - 随笔分类(第2页) - Joanna Qian

开发人员需知的Web缓存知识(转)

摘要：什么是Web缓存，为什么要使用它？缓存的类型：浏览器缓存；代理服务器缓存；网关缓存；Web缓存无害吗？为什么要鼓励缓存？Web缓存如何工作如何控制缓存和不缓存：HTML Meta标签 vs. HTTP头信息；Pragma HTTP头信息（以及为什么不起作用）；使用Expires HTTP头信息控制不过期；Cache-Control（缓存控制）HTTP头信息；验证器和验证；创建支持缓存网站的小技巧；编写支持缓存的脚本；常见问题解答；实现需注意的：Web服务器端；实现需注意的：服务端脚本；参考文档和拓展阅读；关于本文档；什么是Web缓存，为什么要使用它？Web缓存游走于服务器和客户端之间。这个服务阅读全文

posted @ 2013-06-21 05:06 Joanna Qian 阅读(329) 评论(0) 推荐(0)

图像替换技术

摘要：1、Fahrner图像替换为了表示对发明者Todd Fahrner的尊重，这个技巧随后也被叫做“Fahrner图像替换（Fahrner Image Replacement,FIR）”。该技巧的实现非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span中的文本，最后将背景图像应用到该元素之上即可。例如，对于下面的这一段HTMl标记：<h1 id="pageHeader"><span>webjx.com</span></h1>我们可以使用下面的这段CSS容易地实现图像替换：#pageHeader {ba 阅读全文

posted @ 2013-06-20 04:00 Joanna Qian 阅读(962) 评论(0) 推荐(0)

基于物理尺寸的响应式设计(转)

摘要：两种Queries之间的细微区别比较如下两个media-query声明：@media (min-resolution:341dpi) and (min-width:767px) > { }与@media (max-resolution:131dpi) and (min-width:767px) > { }乍一看，是不是没啥子区别？当然不是了。第一段声明是针对HTC Windows Phone 8X，而第二段针对iPad2。通过使用resolution query，可以将大小不同的设备区分开来。目前看来，@media (min-width: 767px){ }对HTC和iPad而言没阅读全文

posted @ 2013-06-18 00:56 Joanna Qian 阅读(571) 评论(0) 推荐(0)

响应式（自适应）Web欣赏

摘要：自适应网站展示：http://mediaqueri.es/Stuff & NonsenseThis responsive web design was created by@malarkeyand suggested for inclusion in this collection by@chicagoing. It has had 3135 unique views since 2013-03-01.Simon CollisonAndersson-Wise ArchitectsStephen CaverSparkboxFood SenseThe Boston GlobeThink V 阅读全文

posted @ 2013-05-02 10:12 Joanna Qian 阅读(325) 评论(0) 推荐(0)

学习XPath

摘要：XPath 是一门在 XML 文档中查找信息的语言，一种用于在 XML 文档中导航的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。XPath 是 W3C XSLT 标准的主要元素，并且 XQuery 和 XPointer 同时被构建于 XPath 表达之上。因此，对 XPath 的理解是很多高级 XML 应用的基础。XPath 使用路径表达式在 XML 文档中进行导航XPath 包含一个标准函数库，XPath 含有超过 100 个内建的函数。这些函数用于字符串值、数值、日期和时间比较、节点和 QName 处理、序列处理、逻辑值等等。XPath 是 XSLT 中的主要元素XPa 阅读全文

posted @ 2013-04-24 00:13 Joanna Qian 阅读(248) 评论(0) 推荐(0)

常见浏览器兼容性问题与解决方案(转)

摘要：http://developer.51cto.com/art/201008/218335.htm所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *{margin:0;padding 阅读全文

posted @ 2013-04-07 10:04 Joanna Qian 阅读(250) 评论(0) 推荐(0)

WEB前端底层知识--浏览器是如何工作的（转）

摘要：概述对于一直从事B/S架构（B/S也是一种C/S架构，只不过C/S自己写显示而B/S有相对统一的显示引擎实现而已）WEB领域的开发人员来说，浏览器 Browser再熟悉不过了。不管你是JAVA流还是微软流抑或PHP流，WEB开发新流派。不论你的服务器端采用哪种业务架构，ORACLE数据库还是 MSSQL，站在用户的角度思考，这个才是他们直接能接触到的，前端的用户体验给了用户直观的印象，投其所好，我们也总少不了要跟它打交道，很多问题的根源皆来源于此，了解一下其内部执行原理，也许对我们的开发工作会事半功倍，从一位纯粹的开发人员到一位技术领域的专家，也许就在于这些细节中。本文讨论仅限HTM... 阅读全文

posted @ 2013-04-07 04:27 Joanna Qian 阅读(338) 评论(0) 推荐(0)

Image Map的制作

摘要：映射图像（Image Map），它是指一幅根据链接对象不同而被人为划分为若干指向不同链接的区域或“热点”（Hotspots）的相应图像区域，当点击设置好的“热点”时，会弹出链接的相应页面。需要在一张图片中，设置一个区域为热点就用到了<map>和<area>，其中<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以应阅读全文

posted @ 2013-04-06 05:07 Joanna Qian 阅读(1212) 评论(0) 推荐(0)

HTML CSS列表元素ul,ol,dl的研究与应用（转）

摘要：http://www.zhangxinxu.com/wordpress/?p=489一、可以看做废话的前言HTML列表元素（如ol,ul,dl）等在现下的网站开发制作中有着非常广泛的应用，然而，它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性，在不同浏览器下的各类兼容性问题，以及介绍一些常见的应用等。对初学者或是有一定CSS方面经验的同行们应该会有帮助的。二、HTML中可用的列表元素1、无序列表：ul无序列表是最常使用的列表，下图显示了无序列表在不同浏览器下的显示：demo页面正如上面显示的，无序列表在不同浏览器下的默认设置是由些许差异的。当然，在如今实际的网站项目上是很阅读全文

posted @ 2013-03-27 03:11 Joanna Qian 阅读(680) 评论(0) 推荐(0)

浏览器缓存机制（转）

摘要：文章转自: http://harry.javaeye.com/blog/605749Cache-ControlCache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令。cache-control 定义是：Cache-Control = “Cache-Control” “:” cache-directive。表 1 展示了适用的值。表1. 常用 cache-directive 值Cache- 阅读全文

posted @ 2013-03-26 22:36 Joanna Qian 阅读(249) 评论(0) 推荐(0)

SASS初学者入门（转）

摘要：http://rd.189works.com/article-108018-1.htmlSass 是什么？Sass 是Syntactically Awesome Stylesheete Sass的缩写，是由Hampton Catlin开发的。Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。Sass引入了一些新的概念如，变量，混合，嵌套和选择器继承。Sass看起来似乎和css很像，但它没有分号和大括号。以下阅读全文

posted @ 2013-03-20 05:08 Joanna Qian 阅读(269) 评论(0) 推荐(0)

img与容器下边界的空隙（缝隙） img与div（block类型元素）下边界有距离（或者叫缝隙、空隙）的解决方法

摘要：img与div（block类型元素）下边界有距离（或者叫缝隙、空隙）。解决方案：法宝一：给图片img标签display:block法宝二：定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。img{vertical-align:bottom;}至于HTML属性align="center"（对于图片浏览器会处理成align="middle"）的解决办法，就相当于vertical-align:middle; 所以道理也是一样的，只要vertical-align不取ba 阅读全文

posted @ 2013-03-16 03:10 Joanna Qian 阅读(3732) 评论(0) 推荐(0)

网页中Google Map的使用

摘要：要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：1、最简单的方法 ——使用谷歌地图主页的"链接" 如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外的内容，比如标记、折线等等，那么，使用这个方法来嵌入谷歌地图是最简单的。登录谷歌地图主页，定位你需要显示的范围后，点击地图左上角的“链接”，会出现一个信息框，给出两个输入框，把第二个输入框中的内容拷贝到你的页面上就可以了。其实，这段嵌入代码就是一个iframe的声明，所以，虽然地图主页提供一个自定义地图并预览的功能，但是只能自定义地图的大小，如果需要的话，我们完全可以阅读全文

posted @ 2013-03-12 08:30 Joanna Qian 阅读(3519) 评论(0) 推荐(0)

WAI-ARIA无障碍网页应用属性完全展示(转)

摘要：http://www.zhangxinxu.com/wordpress/?p=2277一、你至少应该知道ARIA是什么东西！WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！二、为什么需要ARIA？回答标题问题前我先问其他几个问题？如何让盲人用户知道当前浏览区域就是网站主导航？如果让盲人用户知道点击某个按钮后出来的是弹框？如何让盲人用阅读全文

posted @ 2013-03-08 04:27 Joanna Qian 阅读(700) 评论(1) 推荐(0)

几款swf flv flash网页播放器

摘要：项目中需要在网页中嵌入flv视频，这才发现想找一个跨浏览器，并能在各个手机浏览器中也能正常显示的flv网页播放器真是困难啊！先列一些播放器在下面作参考了，但没有时间一个个去检查！ ~~~~(>_<)~~~~1.VideoboxVideobox其实不是播放器，只是用来嵌入播放器的脚本而已，是一个只有6k大小的脚本,用于在页面中显示视频。Videobox使用swfobject来嵌入Flash。视频可以来自Youtube、Metacafe、Google Video、iFilm和自己设置的Flash。2.PandaPanda是一个开源的视频平台，能够处理视频的uploading、encod 阅读全文

posted @ 2013-03-06 03:42 Joanna Qian 阅读(10397) 评论(0) 推荐(1)

CSS元素隐藏原理和效果小结

摘要：转载和改编自：http://www.zhangxinxu.com/wordpress/一、CSS元素隐藏在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。一个一个看。{ display: none; /* 不占据空间，无法点击 */ }/********************************************************************************/{ visibility: hidden; /* 占据空间，无法点击 */ }/********************** 阅读全文

posted @ 2013-02-27 05:15 Joanna Qian 阅读(701) 评论(0) 推荐(0)

使用字符代替圆角尖角研究（转）

摘要：http://www.zhangxinxu.com/study/200911/charset-instead-round-sharp-corner.html请看下面这张我从Google gmail页面上截的图(这是我在同一位置第二次截图了)：图中用红色的圈圈圈中的向下的小三角就是使用的字符，非主流字符。其实呢，Google谷歌这个字符只属于小应用，字符真正的潜力并没有体现出来，而本文将开拓性的探讨如何使用字符代替图片实现貌似只有图片才能实现的尖角效果，或是多半使用图片实现的圆角效果。对字符飞研究我并不深入，所以一些结论或方法并不是最优的，后期可能会有更加完善的方法，所以本文题目添加beta字样阅读全文

posted @ 2013-02-27 00:43 Joanna Qian 阅读(670) 评论(0) 推荐(0)

社交媒体（social media）网站设计尺寸参考（转）

摘要：社交媒体网站，这里主要指的是国外的几大网站，比如说：Facebook、Twitter、Google+、LinkedIN、Pinterest、Instagram和Youtube七个。今天不说别的，主要将其设计图尺寸发于大家参考，希望这这几张图对设计人员有所帮助。社交媒体设计尺寸参考1、Facebook参考尺寸：Facebook Cover图： 851 x 315Facebook Profile图： 180 x 1802、Twitter参考尺寸：Twitter Header图： 520 x 260Twitter Profile图： 81 x 813、Google+参考尺寸：Google+ cove 阅读全文

posted @ 2013-02-26 04:40 Joanna Qian 阅读(754) 评论(0) 推荐(0)

国外的哥们总结的网页布局的历史（非常有趣）

摘要：1990－1993:黎明前的黑暗。黑暗骑士用有限的工具（headings、lists、paragraphs）为了部落的兴盛而努力。1994－1997:Table帝国。这一时期有了“Sidebar”这个重要发明。帝国的部落逐渐安定下来，并且开始建造各种复杂的页面布局。1998－1999:巴洛克时期。Table帝国时期建造的标志开始逐渐的破败，浏览器的战争威胁到了文明世界的每个人。同时，大草原上开始不断的出现使用“div”工具的野蛮人。2000－2002:黑暗时代。经济衰落了，Table帝国分崩离析，很多人被吸收到了野蛮人部落中，并且开始学习使用他们的工具。黑暗魔法开始流行，在这个时期，只有最伟大阅读全文

posted @ 2013-02-21 06:09 Joanna Qian 阅读(456) 评论(0) 推荐(0)

什么是hasLayout

摘要：（以下内容摘自CSS Mastery一书的中译本《精通CSS 高级Web标准解决方案》第154页，人民邮电出版社，2007）IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。在默认情况下，拥有Layout的元素包括：<html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select&g 阅读全文

posted @ 2013-02-15 04:39 Joanna Qian 阅读(261) 评论(0) 推荐(0)

随笔分类 - HTML&CSS