随笔分类 -  HTML&CSS

摘要：一、浏览器的发展与CSS 网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页， HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1，这个协议在 RFC2616 中被完整定义。HTTP/1.1 有其一套 Internet Explorer 并不完全支援的标准，然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以 URL（统一资源定位符）指示，此乃网页的地址；以 http: 开首的便是通过 HTTP协议登陆。很多浏览器同时支援其他类型的 URL 及协议，例如 ftp: 是 FTP（档案传送协议）、gopher: 是 Gopher. 阅读全文

摘要：转载自：http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 ie 盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content .. 阅读全文

摘要：转载自：http://blog.sina.com.cn/s/blog_6b6abdc10100wpny.html 下面介绍一个设计方法，这是一个用于兼顾“为流程”与“为结构”的信息架构（IA）的设计方法。是2010年底，我和seven共同分析总结出来的。在广州的“2010年首届中国交互设计体验日”中的工作坊上，我俩曾现场介绍过这个方法：通常我们会在设计开始阶段分析出主要的用户任务，然后逐一任务画流程图。然后呢…直接开始画信息架构图（IA图）了，IA图怎么画呢？设计者凭空想象着画，靠经验，靠见识。IA树状图标明了主要页面的组织形式，然后再逐一页面的细致设计。之前画的流程图呢？似乎没用到。流程图是 阅读全文

摘要：转载自：http://blog.csdn.net/Vanessa219/archive/2010/06/03/5644651.aspx(一)-CSS 优化方案1 CSS 优化方案 1.1 使用 CSS 优化工具 a) online CSS Optimizer ； b) CSS Formatter and Optimizer 。 解决方案：选取以上一个工具进行进行优化。 1.2 清理 CSS 在我们写样式的时候，页面的 CSS 在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式 更名了而原来的忘了删除，总之页面中可能存在着一 些无用的样式。这些无用的浪费了一些服务器... 阅读全文

摘要：1.firefox 正是由于 firefox 的开放性 才 有了 以下 层出不穷的 免费工具。1.1 firebug firebug 可以 查看页面指定部分html，动态改变 ，调试javascript ，改变css，查看布局，。。。。一把瑞士军刀。 1.2 web developer 可以对网页的标准性，可访问性，等方面 做诸多测试 ，可以方便禁用css，javascript，查看cookie ，等等。 1.3 html validator 可以根据 html dtd 详细检测出 你的html不符合标准之处 ，并给出 详细的解决之道 ，strict 模式必备1.4 httpfox 经常... 阅读全文

摘要：一、设置body标记的 CSS 基础样式body{ background-color:#EEEEEE; color:#000000; margin: 0; padding: 0; text-align: left; font-size: 100%; font-family: sans-serif; }将背景颜色设置为白色 (background-color)，以确保字体颜色是黑色的 (color)。它还可确保所有内容边缘都与浏览器窗口边框相匹配（margin 和 padding），而且标记将文本内容向左水平对齐 (text-align)。最后，该样式将字号设置为浏览器默认字号 (font-si 阅读全文

摘要：摘自 http://blog.sina.com.cn/s/blog_6c8612790100wxsy.html1、IE6 幽灵文本(Ghost Text bug)遇到了这个bug。它相当的古怪和滑稽。一块不知哪来的重复的文本，被IE6显示在靠近原文本的下面。对此有许多解决方法，但是没有一个对我的例子有效(因为网站的复杂性我无法使用其中的一些方法)。所以我使用了hack。在原文本之后增加空格看起来能解决这个问题。但是，问题背后的真正原因是由于html注释标签。IE6不能正确的渲染它。解决方法：使用标签包围注释移除注释在前浮动上增加样式{display:inline;}在适当的浮动的div上使用负 阅读全文

摘要：摘自 http://hi.baidu.com/wicker_wind/item/31a1f1da08302cfaca0c394b这些都是我之前工作中平时收集总结的问题，如果读者你有更正或增加的请回帖补充1. 使用img ul ul img排列时底部在IE6下有间隙解决方法：.downloadCon ul,.downloadCon .downLinImg{width:100%; float:left;} .downloadCon ul,.downloadCon .downLinImg{ clear:both; display:block;} downLinImg为图片样式去掉图片与容器之间的空格 阅读全文

摘要：转载自 http://blog.csdn.net/freshlover/article/details/76052071：li边距“无故”增加任何事情都是有原因的，li边距也不例外。先描述一下具体状况：有些时候li边距会突然增加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其 低级元素ul的padding引起，padding的上下值对li有影响，左右无影响。所以只好笨手笨脚地把padding去掉，换成margin。 这是能解决问题，但往往不是我们想要的结果，或许还会引起其他不必要的怪现象。现在终于发现解决这个问题的方法，其实很简单，既然是有ul引起的， 阅读全文

摘要：引自百度百科一、CSS Sprites简介 CSSSprites在国内很多人叫css精灵， 是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅 一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。 加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也... 阅读全文

摘要：该列表被分为以下五个部分：选择器与继承伪类与伪元素属性支持其它各种技术重要bug和不兼容问题1. 选择器与继承子选择器示例: body > p {color:#fff;}描述: 子选择器选择一个特定父级元素的所有直接子级元素，在上面的例子中，body是父元素，p是子元素。支持情况IE6NoIE7YesIE8YesBugsIE7中，如果在父级标签和子级标签之间有一个HTML注释，子选择器将不会工作。链类示例: .class1.class2.class3 { background: #fff;}描述: 链类用于送一个HTML元素有多个class声明的情况，就像这样：<div class 阅读全文