CSS | 酷 壳 - CoolShell https://coolshell.cn 享受编程和技术所带来的快乐 - Coding Your Ambition Thu, 19 Jan 2017 13:23:08 +0000 zh-CN hourly 1 https://wordpress.org/?v=6.2 Chrome开发者工具的小技巧 https://coolshell.cn/articles/17634.html https://coolshell.cn/articles/17634.html#comments Thu, 19 Jan 2017 12:25:55 +0000 http://coolshell.cn/?p=17634 Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能...

Read More Read More

The post Chrome开发者工具的小技巧 first appeared on 酷 壳 - CoolShell.]]> Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。

话不多话，我们开始。

代码格式化

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 { }  标签，chrome会帮你给格式化掉。

强制DOM状态

有些HTML的DOM是有状态的，比如<a> 标签，其会有 active，hover， focus，visited这些状态，有时候，我们的CSS会来定关不同状态的样式，在分析网页查看网页上DOM的CSS样式时，我们可以点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。

 

 

动画

现在的网页上都会有一些动画效果。在Chrome的开发者工具中，通过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡。于是你就可以慢动作播放动画了（可以点选 25% 或 10%），然后，Chrome还可以帮你把动画录下来，你可以拉动动再画的过程，甚至可以做一些简单的修改。

 

直接编辑网页

在你的 console 里 输入下面的命令：

document.designMode = "on"

于是你就可以直接修改网页上的内容了。

P.S. 下面这个抓屏中还演示了一个如何清空console的示例。你可以输入 clear() 或是 按 Ctrl+L（Windows下），CMD + K (Mac下)

 

网络限速

你可以设置你的网络的访问速度来模拟一个网络很慢的情况。

 

复制HTTP请求

这个是我很喜欢 的一个功能，你可以在 network选项卡里，点击 XHR 过滤相关的Ajax请求，然后在相关的请求上点鼠标右键，在菜单中选择： Copy => Copy as cURL，然后就可以到你的命令行下去 执行 curl 的命令了。这个可以很容易做一些自动化的测试。

 

友情提示：这个操作有可能会把你的个人隐私信息复制出去，比如你个人登录后的cookie。

抓个带手机的图

这个可能有点无聊了，不过我觉得挺有意思的。

在device显示中，先选择一个手机，然后在右上角选 Show Device Frame，然后你就看到手机的样子了，然后再到那个菜中中选 Capture snapshot，就可以抓下一个有手机样子的截图了。

我抓的图如下（当然，不是所有的手机都有frame的）

 

设置断点

除了给Javascript的源代码上设置断点调试，你还可以：

给DOM设置断点

选中一个DOM，然后在右键菜单中选 Break on … 你可以看到如下三个选项：

给XHR和Event Lisener设置断点

在 Sources 面页中，你可以看到右边的那堆break points中，除了上面我们说的给DOM设置断点，你还可以给XHR和Event Listener设置断点，载图如下：

关于Console中的技巧

DOM操作
  • chrome会帮你buffer 5个你查看过的DOM对象，你可以直接在Console中用 $0, $1, $2, $3, $4来访问。
  • 你还可以使用像jQuery那样的语法来获得DOM对象，如：$("#mydiv")
  • 你还可使用 $$(".class") 来选择所有满足条件的DOM对象。
  • 你可以使用 getEventListeners($("selector")) 来查看某个DOM对象上的事件（如下图所示）。

  • 你还可以使用 monitorEvents($("selector")) 来监控相关的事件。比如：

monitorEvents(document.body, "click");

Console中的一些函数

1）monitor函数

使用 monitor函数来监控一函数，如下面的示例

2）copy函数

copy函数可以把一个变量的值copy到剪贴板上。

3）inspect函数

inspect函数可以让你控制台跳到你需要查看的对象上。如：

更多的函数请参数官方文档 – Using the Console / Command Line Reference

Console的输出

我们知道，除了console.log之外，还有console.debug，console.info，console.warn，console.error这些不同级别的输出。另外一个鲜为人知的功能是，console.log中，你还可以对输出的文本加上css的样式，如下所示：

console.log("%c左耳朵", "font-size:90px;color:#888")

于是，你可以定义一些相关的log函数，如：

console.todo = function( msg){
  console.log( '%c%s %s %s', 'font-size:20px; color:yellow; background-color: blue;', '--', msg, '--');
}
console.important = function( msg){
  console.log( '%c%s %s %s', 'font-size:20px; color:brown; font-weight: bold; text-decoration: underline;', '--', msg, '--');
}

关于console.log中的格式化，你可以参看如下表格：

指示符 输出
%s 格式化输出一个字符串变量。
%i or %d 格式化输出一个整型变量的值。
%f 格式化输出一个浮点数变量的值。
%o 格式化输出一个DOM对象。
%O 格式化输出一个Javascript对象。
%c 为后面的字符串加上CSS样式

 

除了console.log打印js的数组，你还可以使用console.table来打印，如下所示：

var pets = [
  { animal: 'Horse', name: 'Pony', age: 23 },
  { animal: 'Dog', name: 'Snoopy', age: 13 },
  { animal: 'Cat', name: 'Tom', age: 18 },
  { animal: 'Mouse', name: 'Jerry', age: 12}
];
console.table(pets)

 

关于console对象

  • console对象除了上面的打日志的功能，其还有很多功能，比如：
  • console.trace() 可以打出js的函数调用栈
  • console.time() 和 console.timeEnd() 可以帮你计算一段代码间消耗的时间。
  • console.profile() 和 console.profileEnd() 可以让你查看CPU的消耗。
  • console.count() 可以让你看到相同的日志当前被打印的次数。
  • console.assert(expression, object) 可以让你assert一个表达式

这些东西都可以看看Google的Console API的文档。

其实，还有很多东西，你可以参看Google的官方文档 – Chrome DevTools

关于快捷键

点击在 DevTools的右上角的那三个坚排的小点，你会看到一个菜单，点选 Shortcuts，你就可以看到所有的快捷键了

如果你知道更多，也欢迎补充！

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post Chrome开发者工具的小技巧 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/17634.html/feed 63 浏览器的渲染原理简介 https://coolshell.cn/articles/9666.html https://coolshell.cn/articles/9666.html#comments Wed, 22 May 2013 00:17:47 +0000 http://coolshell.cn/?p=9666 看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两...

Read More Read More

The post 浏览器的渲染原理简介 first appeared on 酷 壳 - CoolShell.]]> 看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因，

1）这篇文章太长了，阅读成本太大，不能一口气读完。

2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。

所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。

浏览器工作大流程

废话少说，先来看个图：

从上面这个图中，我们可以看到那么几个事：

1）浏览器会解析三个东西：

  • 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
  • CSS，解析CSS会产生CSS规则树。
  • Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：

  • Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
  • CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
  • 然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3）最后通过调用操作系统Native GUI的API绘制。

DOM解析

HTML的DOM Tree解析如下：

<html>
<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>

上面这段HTML会解析成这样：

下面是另一个有SVG标签的情况。

CSS解析

CSS的解析大概是下面这个样子（下面主要说的是Gecko也就是Firefox的玩法），假设我们有下面的HTML文档：

<doc>
<title>A few quotes</title>
<para>
  Franklin said that <quote>"A penny saved is a penny earned."</quote>
</para>
<para>
  FDR said <quote>"We have nothing to fear but <span>fear itself.</span>"</quote>
</para>
</doc>

于是DOM Tree是这个样子：

然后我们的CSS文档是这样的：

  /* rule 1 */ doc { display: block; text-indent: 1em; }
/* rule 2 */ title { display: block; font-size: 3em; }
/* rule 3 */ para { display: block; }
/* rule 4 */ [class="emph"] { font-style: italic; }

于是我们的CSS Rule Tree会是这个样子：

注意，图中的第4条规则出现了两次，一次是独立的，一次是在规则3的子结点。所以，我们可以知道，建立CSS Rule Tree是需要比照着DOM Tree来的。CSS匹配DOM Tree主要是从右到左解析CSS的Selector，好多人以为这个事会比较快，其实并不一定。关键还看我们的CSS的Selector怎么写了。

注意：CSS匹配HTML元素是一个相当复杂和有性能问题的事情。所以，你就会在N多地方看到很多人都告诉你，DOM树要小，CSS尽量用id和class，千万不要过渡层叠下去，……

通过这两个树，我们可以得到一个叫Style Context Tree，也就是下面这样（把CSS Rule结点Attach到DOM Tree上）：

所以，Firefox基本上来说是通过CSS 解析 生成 CSS Rule Tree，然后，通过比对DOM生成Style Context Tree，然后Firefox通过把Style Context Tree和其Render Tree（Frame Tree）关联上，就完成了。注意：Render Tree会把一些不可见的结点去除掉。而Firefox中所谓的Frame就是一个DOM结点，不要被其名字所迷惑了。

注：Webkit不像Firefox要用两个树来干这个，Webkit也有Style对象，它直接把这个Style对象存在了相应的DOM结点上了。

渲染

渲染的流程基本上如下（黄色的四个步骤）：

  1. 计算CSS样式
  2. 构建Render Tree
  3. Layout – 定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……
  4. 正式开画

注意：上图流程中有很多连接线，这表示了Javascript动态修改了DOM属性或是CSS属会导致重新Layout，有些改变不会，就是那些指到天上的箭头，比如，修改后的CSS rule没有被匹配到，等。

这里重要要说两个概念，一个是Reflow，另一个是Repaint。这两个不是一回事。

  • Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
  • Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。

下面是一个打开Wikipedia时的Layout/reflow的视频（注：HTML在初始化的时候也会做一次reflow，叫 intial reflow），你可以感受一下：

Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。在一些高性能的电脑上也许还没什么，但是如果reflow发生在手机上，那么这个过程是非常痛苦和耗电的。

所以，下面这些动作有很大可能会是成本比较高的。

  • 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
  • 当你移动DOM的位置，或是搞个动画的时候。
  • 当你修改CSS样式的时候。
  • 当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
  • 当你修改网页的默认字体时。

注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。

多说两句关于滚屏的事，通常来说，如果在滚屏的时候，我们的页面上的所有的像素都会跟着滚动，那么性能上没什么问题，因为我们的显卡对于这种把全屏像素往上往下移的算法是很快。但是如果你有一个fixed的背景图，或是有些Element不跟着滚动，有些Elment是动画，那么这个滚动的动作对于浏览器来说会是相当相当痛苦的一个过程。你可以看到很多这样的网页在滚动的时候性能有多差。因为滚屏也有可能会造成reflow。

基本上来说，reflow有如下的几个原因：

  • Initial。网页初始化的时候。
  • Incremental。一些Javascript在操作DOM Tree时。
  • Resize。其些元件的尺寸变了。
  • StyleChange。如果CSS的属性发生变化了。
  • Dirty。几个Incremental的reflow发生在同一个frame的子树上。

好了，我们来看一个示例吧：

[javascript]var bstyle = document.body.style; // cache

bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; //  再一次的 reflow 和 repaint

bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint

bstyle.fontSize = "2em"; // reflow, repaint

// new DOM element – reflow, repaint
document.body.appendChild(document.createTextNode(‘dude!’));[/javascript]

当然，我们的浏览器是聪明的，它不会像上面那样，你每改一次样式，它就reflow或repaint一次。一般来说，浏览器会把这样的操作积攒一批，然后做一次reflow，这又叫异步reflow或增量异步reflow。但是有些情况浏览器是不会这么做的，比如：resize窗口，改变了页面默认的字体，等。对于这些操作，浏览器会马上进行reflow。

但是有些时候，我们的脚本会阻止浏览器这么干，比如：如果我们请求下面的一些DOM值：

  1. offsetTop, offsetLeft, offsetWidth, offsetHeight
  2. scrollTop/Left/Width/Height
  3. clientTop/Left/Width/Height
  4. IE中的 getComputedStyle(), 或 currentStyle

因为，如果我们的程序需要这些值，那么浏览器需要返回最新的值，而这样一样会flush出去一些样式的改变，从而造成频繁的reflow/repaint。

减少reflow/repaint

下面是一些Best Practices：

1）不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className。

[javascript]// bad
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// Good
el.className += " theclassname";

// Good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";[/javascript]

2）把DOM离线后修改。如：

  • 使用documentFragment 对象在内存里操作DOM
  • 先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。
  • clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

3）不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

4）尽可能的修改层级比较低的DOM。当然，改变层级比较底的DOM有可能会造成大面积的reflow，但是也可能影响范围很小。

5）为动画的HTML元件使用fixed或absoult的position，那么修改他们的CSS是不会reflow的。

6）千万不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。

In this manner, the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. Any cell that has content that overflows uses the ‘overflow’ property to determine whether to clip the overflow content.

Fixed layout, CSS 2.1 Specification

This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

Automatic layout, CSS 2.1 Specification

几个工具和几篇文章

有时候，你会也许会发现在IE下，你不知道你修改了什么东西，结果CPU一下子就上去了到100%，然后过了好几秒钟repaint/reflow才完成，这种事情以IE的年代时经常发生。所以，我们需要一些工具帮我们看看我们的代码里有没有什么不合适的东西。

  • Chrome下，Google的SpeedTracer是个非常强悍的工作让你看看你的浏览渲染的成本有多大。其实Safari和Chrome都可以使用开发者工具里的一个Timeline的东东。
  • IE下你可以用一个叫dynaTrace的IE扩展。

最后，别忘了下面这几篇提高浏览器性能的文章：

参考

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 浏览器的渲染原理简介 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/9666.html/feed 155 神奇的CSS形状 https://coolshell.cn/articles/6913.html https://coolshell.cn/articles/6913.html#comments Sat, 24 Mar 2012 12:35:41 +0000 http://coolshell.cn/?p=6913 【感谢 Neo 投递本文 – 微博帐号：@_锟_ 】 在StackOverflow上有这么一个问题，有位同学在http://css-tricks.com/exa...

Read More Read More

The post 神奇的CSS形状 first appeared on 酷 壳 - CoolShell.]]> 【感谢 Neo 投递本文 – 微博帐号：@_锟_ 】

在StackOverflow上有这么一个问题，有位同学在http://css-tricks.com/examples/ShapesOfCSS/  找到一些使用CSS做的形状，其中一位同学对下面的这个形状充满了疑问。

形状是：

代码是：

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

这位同学就提问啦，为啥这么这么几句就能画出一个三角形呢？
于是呢，有高人出现，这个高人图文并茂的解释了这个三角的成因


首先呢，我们需要了解HTML标记的Box Model（盒模型），这个例子中呢我们将content，padding都看作content。忽略掉margin。那么一个盒模型就是下图

中间是内容，然后是4条边。每一条边都有宽度。
根据上面CSS的定义，没有border-top（顶边）的情形下 ,我们的图形如下：

width设置为0后 ，内容没有了就成为下图：

height也设置为0，只有底边了。

然后两条边都是设置为透明，最后我们就得到了

这个属于奇技淫巧，但是也说明CSS的强大，没有做不到只有想不到。另外http://css-tricks.com/examples/ShapesOfCSS/ 还能找到很多其他的形状，感兴趣的同学可以自己去看。还有酷壳以前的这篇文章《CSS实现的各种形状》

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 神奇的CSS形状 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/6913.html/feed 21 CSS 布局:40个教程、技巧、例子和最佳实践 https://coolshell.cn/articles/6840.html https://coolshell.cn/articles/6840.html#comments Mon, 19 Mar 2012 00:25:46 +0000 http://coolshell.cn/?p=6840 【感谢 Neo 投递本文 – 微博帐号：_锟_ 】 前言： 布局是WEB开发一个重要的课题，进入XHTML/CSS后，使用TABLE布局的方式逐渐淡出，CSS布...

Read More Read More

The post CSS 布局:40个教程、技巧、例子和最佳实践 first appeared on 酷 壳 - CoolShell.]]> 【感谢 Neo 投递本文 – 微博帐号：_锟_ 】

前言： 布局是WEB开发一个重要的课题，进入XHTML/CSS后，使用TABLE布局的方式逐渐淡出，CSS布局以众多优点成为主流，本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到，据我所知，第二版在中国没有翻译出版。你可以从这里下载英文版（不过需要注册个用户名）

正文
基于CSS的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解CSS布局的基础和本质。这也是本文成文的原因 ——找到那些完美的布局，完全灵活的，等高栏和工作完美的布局。
因此下面这个列表就是我们整理了网络上关于基于CSS布局的一些技巧，教程和最佳实践的列表。
当然你也可能对下面这些和CSS相关的主题有兴趣：

The 7 CSS Hacks that we should use
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes

CSS 布局教程

1-使用CSS完成三栏固定布局结构– 这篇文章解释了如何实现一个基于的HTML/CSS来设计一个简单的带有基本要素（顶部的logo条，导航条，文本区，定义分类的中部栏，右边侧栏插入google的120X600的广告区）的固定三栏页面布局。

2-使用CSS设计页面布局– 如何使用CSS文件来为你的站点设计页面布局。

3-如何创建一个水平布局的站点– 创建不同于常规的水平布局的站点技术（译者注：水平布局，客户体验也就仁者见仁了）


例子查看这里 |下载

4-超级简单的两栏布局– 创建不同于常规的水平布局的站点技术（译者注：这里是原作者笔误吧和上面的内容一样）.

例子查看这里 下载

5-简单两栏CSS布局– 这是一个创建简单两栏布局的教程。这种布局包含了一个标题区，一个水平导航条，主内容区，边侧栏，和页脚区。并且这个布局是水平居中的。

例子查看这里

6-圣杯布局(The holy grail layout) – 3栏布局会有一些问题 ，这篇文章讨论了一种三栏布局——两栏固定宽度边侧栏加上一栏变宽中栏布局，保证了页面的良好结构和清晰。

例子查看这里

7-CSS居中101– 如何使用CSS完成居中一个固定宽度的布局

使用CSS，通过下面两条规则完成对id为container的DIV所包含的内容居中

<body>
 <div id="container"> ...entire layout goes here...
</div>
</body>

body {
    text-align: center;
}
#container {
    margin: 0 auto;
    width: xxxpx;
    text-align: left;
}

8-从头创建CSS布局– 这个指南通过创建一个全功能的 CSS布局来一步步教你入门CSS布局。

9-非主流！多栏布局– 多栏布局，等高栏（每一列的高度都相等），固定或变宽中央区，简洁标记，CSS 。(译者注：原文作者的图配的和上图一样)

例子查看这里

10- 创建天下无双的CSS布局– 高灵活性布局,等高栏，跨栏垂直摆放元素。本文告诉你通过何等手段完成这些目标，并使用它们创建天下无双的CSS布局（译者注:原文是One True Layout ，不知道怎么翻译，就天下无双吧。）

查看这里

11-从PSD到HTML，手把手完成WEB设计-从Photoshop到完整HTML，全过程手把手教会你。

例子查看这里 | 下载

12- 5个XHTML/CSS技巧 – 5个CSS技巧帮助你完成从基于表格的布局到基于CSS的布局。

13-设计一个基于CSS的模板 – 这是一个教你创建基于CSS的模板页的基础教程。这个教程由下面几个部分构成：第一部分覆盖了在Photoshop CS*中的创建导航条按钮，第二部分：创建背景接下来的清单是标题和页面布局，最后的部分在XHTML和CSS中实现。

下载

14-使用CSS布局跳出常规布局– 如果你理解了基于表格布局的工作方式，你能通过合并或拆分表格创建你随心所欲的布局。就这个目标（同时支持灵活性和可维护性），CSS能够提供比基于表格更多地东西。Jina Bolton的教程解释如何达到这个目标。

15-高级CSS教程:手把手– 这个教程的终极目标创建一个CSS布局，这个CSS布局精确地重组了原有使用table的WebReference.com的布局。

16-了解CSS布局的6个关键要素-本文讲述了6件基于CSS布局需要了解的事情：盒模型(Box Model)，浮动栏(Floated Columns) （译者注：float是WEB布局最重要的一个属性了）。使用Em来设置尺寸（Sizing Using Ems），图片替换（Image Replacement）,浮动导航和Sprintes。

17-你会犯这些常见的博客布局错误吗？-讨论4个博客布局中常见而且易修复的错误。

18-页面布局-CSS页面布局中的浮动元素和定位元素实践指导。

你可以查看这些例子：Absolute Position within a relative box two floated boxes和 using a border to provide the background for a column

19-Site in an Hour– 使用复杂CCS布局完成简单的工作。

关于布局的最佳资源

下面的大多数这些资源不需要许可就能直接使用，然而，其中的一些需要先发邮件确认一下是否可以使用这些资源。因此，在使用之前最好先检查资源的版权信息。

20-简单CSS页面布局– 这里有一套2栏和3栏的CSS布局。

你可以通过这里查看这些样例 Liquid three column layout, Left aligned, set width and Liquid insanity.

21-完美的三栏变宽布局（百分比定宽度）The Perfect 3 Column Liquid Layout (Percentage widths)– 没有CSS hack（译者注：不知道怎么翻译，点击这里查看解释）. 良好地收索引擎优化.无图. 无Javascript. 跨浏览器 和IPHONE设备兼容

你可以通过这里查看样例 Liquid three column layout, Left aligned, set width 和 Liquid insanity. (译者注：这里的链接和上面重复了，哎，原文的错误吧)

22-CSS模板和样例

你可以通过这里查看这些样例 3 columns fixed centered, fixed Box totallycentered and 3 columns, alldynamic

23-IM 布局– IM 布局是一种简单地的CSS布局系统，IM布局提供了全A级的浏览器的支持。

你可以通过这里查看这些样例: The Holy Grail 3 Column Layout, The Classic Blog Layout 和 The Multi Column Layout.

24-CSSplay – CSS布局列表

你可以通过这里查看这些样例:Cross browser FIXED, Three columns and CSS Frame – The Holy Grill.

25-Layoutgala – 基于同样的的标记l得到最大数量的不同的布局方式。没有CCS hack，没有CSS workaround ，良好的浏览器兼容性。40种不同布局。

你可以通过这里查看这些样例:Three fixed Columns, Three percentage columns and Liquid, three columns, hybrid widths (吐槽：没有等高，不好看).

26-Glish– 许多有用的跨浏览器布局技术

你可以通过这里查看这些样例: 3 columns, the holy grail, 2 columns, ALA style and 3 columns, all fluid

27-Thenoodleincident– CSS 从简单的单盒到3盒并增加一个顶部条，所有都是变宽。

28-The Layout Reservoir– 很多有用的CSS布局技术

你可以通过这里查看这些样例: 2 columns – left menu, 3 columns – flanking menus和 Auto-width Margins .

29-The only CSS layout you need– 在这篇文章中将会为你展现10个基于同一的HTML的不同的的布局。

你可以通过这里查看这些样例: Three column CSS layout – left and right menu, Two column CSS layout – top and left menu 和 Three column CSS fluid layout: 100% width

30-另一个多栏布局-是一个创建当代流行的变宽的浮动布局的XHTML/CSS框架。这是一个多功能实用的布局。

点击这里下载.

31-Liquid Designs– 使用XHTML和CSS的变宽设计库。

最佳实践

如果你需要寻找一些布局灵感，你可以从下面的网站链接中找到。这些站点演示了CSS布局如何应用于不同类型的网站。查看这些网站是如何分成2栏或3栏，或混合宽栏和窄栏布局。

32-Helldesign

33-Silverbackapp

34-OS communications informatiques

35-Rockatee

36-Darrenhoyt

37-Makebetterwebsites

38-Elitetheme

39-Studio7designs

40-Brightcreative

(全文完)

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post CSS 布局:40个教程、技巧、例子和最佳实践 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/6840.html/feed 31 Web开发中需要了解的东西 https://coolshell.cn/articles/6043.html https://coolshell.cn/articles/6043.html#comments Wed, 07 Dec 2011 00:29:49 +0000 http://coolshell.cn/?p=6043 在StackExchange上有人问了这样一个问题：What should every programmer know about web developmen...

Read More Read More

The post Web开发中需要了解的东西 first appeared on 酷 壳 - CoolShell.]]> 在StackExchange上有人问了这样一个问题：What should every programmer know about web development?（关于Web开发，什么是所有程序员需要知道的？）里面给出的答案非常不错，所以，我翻译转载过来。 顺便说一下，StackExchange真是非常好，大家可以对同一个答案做贡献和修订，看看这个问题的修订过程你就知道了——专业的问答网站应该怎么去做。这就是我在这篇文章中也说过真正的用户体验是什么样的。

好了，下面是正文（我对原文做了一些批注，也许不对或有误导，请大家指正）

下面的这些东西可能对于大多数人并不陌生，但是可能会有些东西你以前并没有看过，或是没有完全搞懂，甚至都没有听说过。（陈皓注：我相信当你看完这个列表后，你会觉得对于我国的Web开发有点弱了，还是那句话，表面上的东西永远是肤浅的）

接口和用户体验

  • 小心浏览器的实现标准上的不一致，确信让你的网站能够适当地跨浏览器。至少，你的网站需要测试一下下面的浏览器：

最后，你可以使用一下这个工具 来看看你的网页在不同的浏览器下是怎么被显示出来的（陈皓注：这个工具就是以前本站介绍过的在不同浏览器和平台上检查你的网站的兼容性）

  • 多考虑一下人们是怎么来访问你的网站而不是那些主流的浏览器：手机，读屏软件和搜索引擎，例如：一些Accessibility的东西： WAI 和  Section508, 移动设备开发：MobiForge.
  • 部署Staging：怎么部署网站的更新而不会影响用户的访问。 Ed Lucas的答案 可以让你了解一些（陈皓注：Ed说了一些如版本控制，自动化build，备份，回滚等机制）。
  • 千万不要直接给用户显示不友好的错误信息。
  • 千万不要把用户的邮件地址以明文显示出来，这样会被爬虫爬走并被让用户的邮箱被垃圾邮件搞死。
  • 为用户的链接加上 rel="nofollow" 的属性以 避免垃圾网站的干扰。（陈皓注：nofollow是HTML的一个属性，用于通知搜索引擎“这个链接所指向的网页非我所能控制，对其内容不予置评”，或者简单地说，该链接不是对目标网站或网页的“投票”，这样搜索引擎不会再访问这个链接。这个是用来减少一些特定垃圾页面对原网站的影响，从而可以改善搜索结果的质量，并且防止垃圾链接的蔓延。）
  • 为网站建立一些的限制 – 这个属于安全性的范畴。（陈皓注：比如你在Google注册邮箱时，你一口气注册超过两个以上的邮箱，gmail要求给你发短信或是给你打电话认证，比如Discuz论坛的会限制你发贴或是搜索的间隔时间等等，更多的网站会用CAPTCHA来确认是人为的操作。 这些限制都是为了防止垃圾和恶意攻击）
  • 学习如何做 Progressive Enhancement. （陈皓注：Progressive Enhancement是一个Web Design的理念，如：1）基础的内容和功能应该可以被所有的浏览器存取，2）页面布局的应该使用外部的CSS链接，3）Javascript也应该是外部链接还应该是 unobtrusive 的，4）应该让用户可以设置他们的偏好）
  • 严重关注Accessibility。因为这是法律上的需求（陈皓注：Section 508是美国的508法案，其是美国劳工复健法的改进，它是一部联邦法律，这个法律要求所有技术要考虑到残障人士的应用，如果某个大众信息传播网站，如果某些用户群体（如残疾人）浏览该网站获取信息时，如果他们无法正常获得所期望的信息（如无法正常浏览），那可以依据相关法规，可以对该网站依法起诉）。 WAI-ARIA 为这方面的事提供很不错的资源.

安全

  • 在网上有很多关于安全的文章，但是 OWASP 开发指导 涵盖了几乎所有关于Web站点安全的东西。（陈皓注：OWASP(开放Web应用安全项目- Open Web Application Security Project)是一个开放的非营利性组织，目前全球有130个分会近万名会员，其主要目标是研议协助解决Web软体安全之标准、工具与技术文件，长期 致力于协助政府或企业了解并改善网页应用程式与网页服务的安全性。OWASP被视为Web应用安全领域的权威参考。2009年下列发布的美国国家和国际立法、标准、准则、委员会和行业实务守则参考引用了OWASP。美国联邦贸易委员会(FTC)强烈建议所有企业需遵循OWASP十大WEB弱点防护守则）
  • 永远不要相信用户的输入（包括Cookies，因为那也是用户的输入）
  • 对用户的口令进行Hash，并使用salt，以防止Rainbow 攻击（陈皓注：Hash算法可用MD5或SHA1等，对口令使用salt的意思是，user 在设定密码时，system 产生另外一个random string(salt)。在datbase 存的​​是与salt + passwd 产的md5sum 及salt。 当要验证密码时就把user 输入的string 加上使用者的salt，产生md5s​​um 来比对。 理论上用salt 可以大幅度让密码更难破解，相同的密码除非刚好salt 相同，最后​​存在database 上的内容是不一样的。google一下md5+salt你可以看到很多文章。关于Rainbow 攻击，其意思是很像密码字典表，但不同的是，Rainbow Table存的是已经被Hash过的密码了，而且其查找密码的速度更快，这样可以让攻击非常快）。使用慢一点的Hash算法来保存口令，如 bcrypt (被时间检证过了) 或是 scrypt (更强，但是也更新一些) (1, 2)。你可以阅读一下 How To Safely Store A Password（陈皓注：酷壳以前曾介绍过bcrypt这个算法，这里，我更建议我们应该让用户输入比较强的口令，比如Apple ID注册的过程需要用户输入超过8位，需要有大小写和数字的口令，或是做出类似于这样的用户体验的东西）。
  • 使用 SSL/HTTPS 来加密传输登录页面或是任可有敏感信息的页面，比如信用卡号等。
  • 知道如何对付session 劫持。（陈皓注：请参看wikipedia的这Session Hijacking，）
  • 保持你的系统里的所有软件更新到最新的patch。
  • 确保你的数据库连接是安全的。
  • 确保你能了解最新的攻击技术，以及你系统的脆弱处。

性能

  • 优化页面 —— 不要使用20KB图片来平铺网页背景。（陈皓注：还有很多网页页面优化性的文章，你可以STFG – Search The Fucking Google一下。如果你要调试的话，你可以使用firebug或是chrome内置的开发人员的工具来查看网页装载的性能）
  • 学习如何 gzip/deflate 网页 (deflate 更好).
  • 把多个CSS文件和Javascript文件合并成一个，这样可以减少浏览器的网络连数，并且使用gzip压缩被反复用到的文件。
  • 为那些小的图片使用 CSS Image Sprites，就像工具条一样。 (参看 “最小化 HTTP 请求” ) （陈皓注：把所有的小图片合并成一个图片，然后用CSS把显示其中的一块，这样，这些小图片只用传输一次，酷壳的Wordpress样式的那个RSS订阅列表中的小图标就是这样做的）
  • 繁忙的网络应该考虑把网页的内容分开存放在不同的域名下。（陈皓注：比如有专门的图片服务器——图片相当耗带宽，或是专门的Ajax服务器）
  • 静态网页 (如，图片，CSS，JavaScript，以及一些不需要访问cookies的网页) 应该放在一个不使用cookies的独立的域名下，因为所有在同一个域名或子域名下的cookie会被这个域名下的请求一同发送。另一个好的选择是使用 Content Delivery Network (CDN).
  • 使用单个页面的HTTP请求数最小化。
  • 为Javascript使用 Google Closure Compiler 或是 其它压缩工具（陈皓注：压缩Javascript代码可以让你的页面减少网络传输从而可以得到很快的喧染。注意，并不是所有的工具都可以正确压缩Javascript的，Google的这个工具甚至还可以帮你优化你的代码）
  • 确认你的网站有一个 favicon.ico 文件放在网站的根下，如 /favicon.ico. 浏览器会自动请求这个文件，就算这个图标文件没有在你的网页中明显说明，浏览器也会请求。如果你没有这个文件，就会出大量的404错误，这会消耗你的服务器带宽。（陈皓注：服务器返回404页面会比这个ico文件可能还大）

SEO (搜索引擎优化)

  • 使用 “搜索引擎喜欢的” URL，如：使用 example.com/pages/45-article-title 而不是 example.com/index.php?page=45 (陈皓注：这里的URL是说Wordpress的，后者是默认的)
  • 如果你的动态页面要使用 # ，那么请把其改成 #! ，而在服务端，你需要处理$_REQUEST["_escaped_fragment_"] 这是Google搜索引擎需要的。换句话说，./#!page=1 会被Google搜索引擎转成 ./?_escaped_fragments_=page=1。 （陈皓注：通常来说URL中的#后的东西都不会被传到服务器上，所以，为了要让Google可以抓取AJAX的东西，你需要使用#!，而Google会把“#!”转成“_escaped_fragment_”来向服务器发请求，Twitter的大量的链接者是#!的，比如：https://twitter.com/#!/your_activity）。另外，用户也许会使用Firefox 或 Chromium， history.pushState({"foo":"bar"}, "About", "./?page=1"); 是一个很不错的命令。所以，就算是我们的地址栏上的地址改变了，页面也不会重新装载。这可以让你使用 ? 而不是 #! 也能无刷地保住当前的动态的页面，这可以让AJAX的请求被浏览器记住。
  • 别使用 “click here” 这样的链接。这样一来，无法SEO，而且对于一些需要使用读屏人来说很不友好（陈皓注：关于读屏软件，可参看本站的“如果看不见你还能编程吗”）
  • 了解 robots.txt 和搜索引擎爬虫是如何工作的。
  • 重定向请求 (使用 301 重定向网站) ，如果你要把 www.example.com 定向到 example.com(或是其它的变更) 这样可以防止Google的rank因为域名的变化发生改变。（陈皓注：301重定向一般用作域名变更）
  • 知道并不是所有的爬虫都是好的，有些爬虫的行为并不好。（陈皓注：比如向你的网站发大量的请求导致服务器性能低下）
  • 如果你有一些非文本的内容需要在 Google’s sitemap  中，比如视频什么的。Tim Farley的答案，可以让你看到很多有价值的东西。

技术

  • 理解什么是 HTTP 比如 GET, POST, sessions, cookies等，了解什么是 “stateless” 无状态。
  • 让你的 XHTML/HTML 和 CSS 符合 W3C 规范，并确认他们都是 合格的。我们的目标是避免浏览器的 “quirks mode”，并且可以让其更容易地能和非标准的浏览器工作，比如读屏器或移动设备。
  • 理解浏览器是怎么处理 JavaScript 的。（陈皓：你会看到有些Javascript代码在页面上前面，有些则是在后面，所以你需要对其了解清楚为什么是这样）
  • 了解浏览器是怎么装载 JavaScript，CSS和其它资源的，了解其对视觉上的影响。（陈皓注：10年前我做网页的时候因为HTML还很弱，所以只能使用table来布局，使用table布局的问题就是整个table读完后页面才会显示，用户的视觉体验并不好）。在某些情况下，你可能需要把你的脚本放在页面的后面。
  • 理解 JavaScript 的 sandbox 是怎么怎么工作的，尤其是你想使用iframes。
  • 请注意 JavaScript 可能会被禁止，这样会让你的AJAX失效。就算是大多数用户都开启了Javascript功能，但是也可能在一些情况下脚本是不被运行的，比如移动终端上，搜索引擎抓网页的时候也并不会执行你的脚本。
  • 尽可能多地学习你的部署平台。（比如：操作系统，Web Server：Apache/Nginx，防火墙，数据库，等等）
  • 把视觉效果和JS框架合在一起讨论，考虑使用一个Service，如：Google Libraries API 来装载框架，这样可以让浏览器可能早就把这个JS框架已经cache了而不需要再从你的网站上下载了。

Bug fixing

  • 明白你会花20%的时间写代码，而80%的时候在维护，所以你要小心编码。（陈皓注：参看本站的“多些时间可以少些代码”一文）
  • 设计一个好的错误报告机制。
  • 设计一个入口可以让人们联系到你并给你建议和批评。
  • 为你开发的东西形成文档，这样可以让后来的人容易维护你的软件和系统。
  • 频繁备份（也可确保你的这些备份功能正常） Ed Lucas 的回答 有一些忠告。你还需要有一个恢复策略，而不只是一个备份策略。
  • 使用一个版本控制系统来保存你的代码，如： Subversion 或 Git.
  • 别忘了做Acceptance Testing，使用 Selenium 能帮到你。
  • 确保你有足够的日志，你可以使用 log4j, log4n 或 log4r。如果出了问题，这是可以让你快速找到问题的方式。
  • 当你写日志的时候，确保你记录了你捕获了处理和未处理异常。报告和分析日志可以让你知道你网站的问题。

这里有多的东西被省略了，并不是因为那些可能不是有帮助的答案，而是因为那些东西都太细节了，超出了这个问题的范围，因为这本来就是一个Web开发需要了解东西的Overview。我想你可以去看一下其它人的答案，我有时间，我也会补充别人的答案进来。请随意编辑这个答案，因为可能有些东西忘了，也有可能有些东西不对。

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post Web开发中需要了解的东西 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/6043.html/feed 150 CSS图形 https://coolshell.cn/articles/5164.html https://coolshell.cn/articles/5164.html#comments Mon, 15 Aug 2011 00:21:50 +0000 http://coolshell.cn/?p=5164 下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码。这个收集的原文在这里。 经测试，IE9, Chrome, FF, Safari都可...

Read More Read More

The post CSS图形 first appeared on 酷 壳 - CoolShell.]]>

下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码。这个收集的原文在这里。

经测试，IE9, Chrome, FF, Safari都可以正常显示。

正方形

长方形

圆形

椭圆形

三角形（向上）

三角形（向下）

三角形（向左）

三角形（向右）

三角形（左上）

三角形（右上）

三角形（左下）

三角形（右下）

平行四边行

梯形

六角星形

五角星形 via Kit MacAllister

五边形

六边形
八边形

心形 via Nicolas Gallagher

无穷大 via Nicolas Gallagher

菱形

鸡蛋

吃豆人

说话泡泡

12星形 via Alan Johnson

8星形 via Alan Johnson

(全文完)

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post CSS图形 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/5164.html/feed 48 一些有意思的贴子和工具 https://coolshell.cn/articles/3903.html https://coolshell.cn/articles/3903.html#comments Fri, 04 Mar 2011 00:25:39 +0000 http://coolshell.cn/?p=3903 又到了介绍各种杂项的时候了，正如以前的这三篇（这篇，这篇，和这篇）文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。 先说找工作吧，电影《...

Read More Read More

The post 一些有意思的贴子和工具 first appeared on 酷 壳 - CoolShell.]]> 又到了介绍各种杂项的时候了，正如以前的这三篇（这篇，这篇，和这篇）文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。

先说找工作吧，电影《该页无法显示》里的那个facebook主页上的招聘网页上是列了一堆问题，你可以去看看，你可以使用c/c++，Erlang，Haskell，Java，Perl，Python，PHP，Ruby来解题，不过只接受Unix/Linux下的版本， 不接受Windows的版本。无独有偶，DropBox的招聘网页上也是些算法题，大家可以过去看看，不过需要翻墙。（现在，对于美国互联网企业来说，如果你没有被C2C，说明你根本不存在，如果你没有被墙，说明你还不算成功）

接下来给大家介绍一些文档和教程吧，都是英文的。

  • Java和C#的完整比较。这是一个相当完整的比较Java和C#语言的网页。很有意思，有助于你了解Java和C#的各种特性和不同。
  • SQL 性能调优。这个文档覆盖了IBM DB2, MySQL, Oracle,PostgreSQL 和 Microsoft SQL Server。不过这个电子书还没有写完，你可以使用其RSS, twitter 或 Facebook 来跟踪其进度。
  • Clever Algorithms。这个电子书也是免费的。其主要面向一些AI和面向自然的算法，一共45个。其包括概率随机算法，迭代进化算法，物理算法，可能性算法，蚂蚁蜜蜂式算法，免疫算法，神经算法等。里面大量的高等数学公式对我来说我已经看不懂了。不过，我相信这个电子书非常适合搞理论研究的人，或是需要抄袭一篇论文以顺利毕业的人使用。
  • HTML5 Audio & Video 处理。这是一组在线的幻灯片，请使用键盘光标键翻页。这是一组带着各种演示的幻灯片，对于你要学习HTML5的声音和视频相关的知识很有帮助。
  • C 语言的宏。你想知道C语的宏有哪些有些意思的用法吗？这篇文档不会让你失望的。其由浅入深地向你介绍了宏的各种用法。
  • 物理模拟F#教程。相信你一定玩过那种游戏，画一个任意形状的石头，其会从天上落下以砸下面的一个东西，这个教程用.NET的F#向大家说明了这种东西怎么去做。（演示程序）

  • GNOME开发介绍。这是一个非官方的介绍GNOME应用开发的教程，简单清楚，很适合初学者。
  • 10分钟学会Python。是的，也许你和我一样，很恨这样几天就学好一门语言的书，比如：21天学好C++。这个更夸张，10分钟。TNND。不过，当我看了一下后，我觉得其很适合初学者对Python有一个感性的认识。
  • CSS阴影教程。这是一篇教你种CSS做出种式样式的阴影效果的教程，这里是演示。

下面，再让我给你介绍一些和Web开发相关的开源的库。

  • Photon。这是一个号称高性能的轻量级的PHP应用服务器框架。号称比Zend，Symfony和mod_php快3-10倍。
  • ChemDoodle。这是一个用来画一些化学分子式的基于HTML5的类库和API，支持2D/3D，很强大。兼容于所有产商的支持HTML5的浏览器。
  • Pattern。这是东东很强大，用于做Web挖掘，其有一组工具用来从Google, Twitter, Wikipedia，Web爬虫，HTML上获得数据，并进行文本分析和数据图形化显示。你可以上这里看看相关演示。
  • Titanium Mobile。你想让你的代码同时支持iPhone和Android吗？这是一个跨平台的开发工具。这里有一个教程。
  • CSS3的按钮。这里可以去下载一个CSS3的库，里面有N多的按钮风格，感觉都很酷。

接下来，介绍一些小工具。

  • Web兼容性表。你想看看各种浏览器对HTML5，CSS3，SVG的支持吗？这个网站可以让你看到所有的主流浏览器的兼容表。
  • qgrep。嫌grep不够快吗？试试qgrep吧，支持OSX,  Linux 和 Windows。
  • XKeymacs。你有Emacs情结吗？如果有的话，试试这个工具吧，在windows里到处c-x c-c, c-x c-s, c-p, c-n什么什么的。挺有意思的。好吧，不是有意思，是BT。
  • Sublime Text 2。虽然目前只是Alpha版本，但是这个看上去真的很不错。尤其是用来查看代码。支持Windows, Linux和OSX。
  • VS-Android。这个项目让你可以在Visual Studio 2010的IDE下开发Android NDK C/C++的程序。

其它东西。

  • 脚本语言排名。这个网页不但对所有的脚本语言进行了排名，还对一些操作进行了比较。

就这么多吧，也许没什么意思，那也请你见谅了。

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 一些有意思的贴子和工具 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3903.html/feed 24 Web开发人员速查卡 https://coolshell.cn/articles/3684.html https://coolshell.cn/articles/3684.html#comments Wed, 16 Feb 2011 10:59:06 +0000 http://coolshell.cn/?p=3684 无论你是多牛的程序员，你都无法记住所有的东西。而很多时候，查找某些知识又比较费事。所以，网上有很多Cheat Sheets，翻译成小抄也好 ，速查卡也好，总之就...

Read More Read More

The post Web开发人员速查卡 first appeared on 酷 壳 - CoolShell.]]> 无论你是多牛的程序员，你都无法记住所有的东西。而很多时候，查找某些知识又比较费事。所以，网上有很多Cheat Sheets，翻译成小抄也好 ，速查卡也好，总之就是帮你节省 时间的。之前给大家介绍过Web设计的速查卡、25个jQuery的编程小抄，还有程序员小抄大全，今天转一篇开发人员的速查卡，源文在这里。下面的文章我就不翻译了。

HTML Cheat Sheet

CSS Cheat Sheets

Adobe Flash Cheat Sheets

ASP Cheat Sheets


PHP Cheat Sheets

MySQL Cheat Sheets

JavaScript Cheat Sheets

jQuery Cheat Sheets

Unicode Cheat Sheets

XML Cheat Sheets

mod_rewrite and .htaccess Cheat Sheets

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post Web开发人员速查卡 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3684.html/feed 22 30+ Web下拉菜单 https://coolshell.cn/articles/3207.html https://coolshell.cn/articles/3207.html#comments Wed, 20 Oct 2010 06:06:43 +0000 http://coolshell.cn/?p=3207 以前给大家介绍过13个不错的Javascript和CSS的菜单、20个优秀的Javascript导航技术、30种时尚的CSS网站导航条，今天在网上看到一篇文章其...

Read More Read More

The post 30+ Web下拉菜单 first appeared on 酷 壳 - CoolShell.]]> 以前给大家介绍过13个不错的Javascript和CSS的菜单、20个优秀的Javascript导航技术、30种时尚的CSS网站导航条，今天在网上看到一篇文章其收集了30多个下拉菜单（分为两类，jQuery和CSS+Javascript的），转过来。

原文：http://smashinghub.com/3-useful-drop-down-menu-scripts-to-enhance-header-navigation.htm

jQuery

Smooth Navigation Menu

Drop Down Menu Scripts 5 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation


Simple Drop Down Menu Plugin

Drop Down Menu Scripts 6 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Dropdown, iPod Drilldown, and Flyout styles


drilldown 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

jQuery and CSS Example

Drop Down Menu Scripts 7 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Create the Fanciest Drop Down Menu You Ever Saw

Drop Down Menu Scripts 8 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

A Different Top Navigation

Drop Down Menu Scripts 9 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Simple jQuery Dropdowns

Drop Down Menu Scripts 15 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Sexy Drop Down Menu with jQuery and CSS

Drop Down Menu Scripts 1 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

How to Create a Drop Down Nav Menu with HTML5, CSS3, and jQuery

Drop Down Menu Scripts 31 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Reinventing a Drop Down with CSS and jQuery

Drop Down Menu Scripts 14 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Superfish

Drop Down Menu Scripts 13 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Animated Drop Down Menu with jQuery

Drop Down Menu Scripts 12 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

jQuery Menu: Dropdown, Drilldown, and iPod Flyout Styles

Drop Down Menu Scripts 16 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

McDropdown jQuery Plugin

Drop Down Menu Scripts 17 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Mega Drop Down Menus with CSS & jQuery

Drop Down Menu Scripts 3 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Sliding jQuery Menu

Drop Down Menu Scripts 4 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

jdMenu Hierarchical Menu Plugin

Drop Down Menu Scripts 18 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Dim Gray Drop Down Menu

Drop Down Menu Scripts 19 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Create a MultiLevel Dropdown Menu with CSS and Improve it with jQuery

Drop Down Menu Scripts 20 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

jQuery Drop Down Menu for RSS Subscription

Drop Down Menu Scripts 11 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Easy to Style jQuery Drop Down Menu

Drop Down Menu Scripts 10 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

CSS and Java Scripts

Lwis Dropdown Menu Framework

lwis menu 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

MenuMatic

menumatic 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Sexy Sliding Menu

sliding menu 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Circular Menu

circular menu 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Vimeo-like Top Navigation

vimeo menu 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

FG jQuery Menu

fg menu 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Ext JS Tree Panel

dragdrop 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Apple Style Menu

appele1 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

Hover Box

hoverbox 30+ Useful Drop Down Menu Scripts To Enhance Header NavigationStyled Menus

style 30+ Useful Drop Down Menu Scripts To Enhance Header Navigation

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 30+ Web下拉菜单 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3207.html/feed 14 40个很不错的CSS技术 https://coolshell.cn/articles/3063.html https://coolshell.cn/articles/3063.html#comments Fri, 08 Oct 2010 00:04:46 +0000 http://coolshell.cn/?p=3063 以前发布过《30种时尚的CSS网站导航条》，下面是40个CSS的技术，可以让你的网页有更好的用户体验。希望你喜欢 1. A CSS styled table v...

Read More Read More

The post 40个很不错的CSS技术 first appeared on 酷 壳 - CoolShell.]]> 以前发布过《30种时尚的CSS网站导航条》，下面是40个CSS的技术，可以让你的网页有更好的用户体验。希望你喜欢

1. A CSS styled table version 2

2. A CSS-based Form Template

3. A Stripe of List Style Inspiration

4. Accessible expanding and collapsing menu

5. Advanced CSS Menu Trick

6. Animated Rollover Arrow

7. Animations

8. Background Size

9. Better Ordered Lists (Using Simple PHP and CSS)

10. Box Shadow

11. Creating a table with dynamically highlighted columns

12. Creating bulletproof graphic link buttons with CSS | 456 Berea Street

13. Creative and Cool Uses of the CSS Border Property

14. Creative Use of PNG Transparency in Web Design

15. Cross Browser CSS SlideShow

16. Cross Browser Multi-Page Photograph Gallery

17. CSS Bar Graphs: Examples

18. CSS Based Navigation

19. CSS Curves

20. CSS Dock Menu

21. CSS Double Lists

22. CSS-Based Tables: Technique

23. CSS Gradient Text Effect

24. CSS List Boxes

25. CSS Map Pop

26. CSS Pricing Matrix

27. CSS Production Notes

28. CSS Pull Quotes

29. CSS Rounded Corners Roundup (Nifty Corners)

30. CSS SiteMap

31. CSS Speech Bubbles

32. CSS Stacked Bar Graphs

33. CSS Step Menu

34. CSS Tabs

35. CSS Teaser Box

36. CSS Zooming

37. CSS: Menu Descriptions

38. CSS-Based Forms: Techniques

39. Date Display Technique with Sprites

40. Displaying Percentages with CSS

文章来源：http://technologytosoftware.com/best-css-techniques-you-shouldt-miss-for-effective-coding.html

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 40个很不错的CSS技术 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3063.html/feed 10 一些非常有意思的杂项资源 https://coolshell.cn/articles/3013.html https://coolshell.cn/articles/3013.html#comments Tue, 28 Sep 2010 00:38:34 +0000 http://coolshell.cn/?p=3013 下面是一些最近在互联网上看到的一些各式各样的资源和文章，当然，都是英文社区的，本来想每一个写一篇文章，但是觉得一篇文章一句话真没劲，所以，把这些东西合并写成一篇...

Read More Read More

The post 一些非常有意思的杂项资源 first appeared on 酷 壳 - CoolShell.]]> 下面是一些最近在互联网上看到的一些各式各样的资源和文章，当然，都是英文社区的，本来想每一个写一篇文章，但是觉得一篇文章一句话真没劲，所以，把这些东西合并写成一篇文章，这样有利于减轻本站的负载，也有利于节省网络带宽，同样，也就节省了能力和电力，因此也就很环保，很低碳。呵呵。

→

→

  • 说到这些很酷很炫的东西，大家一定会想到使用Flash，不过，目前的Flash正在受到HTML5的强力挑战，目前，对于HTML5的展示网站很多，让我们看到了HTML5完全可以做出Flash的样子，比如前些天本站说到的这个演示，还有给大家展示的纯HTML5的小游戏，不过，那些都是一些演示和展示罢了。今天在网上看到一个更强大的HTML5游戏，相当有可玩性，大家不妨一去试玩：http://www.phoboslab.org/biolab/

→

  • HTML5 可以应用的还不只是游戏，这不，有文章指出，用VexFlow还可以很轻松地在网页上发布乐谱。而这个网页还可以让你制作Hi-PoP音乐。

Rendered music

→

→

  • 说起在线服务，就不得不说说在线代码编译的服务，我觉得这种服务相当好，不需要你在本机安装编译器或IDE，想试试某个语言的语法，真接上网就OK，很方便。以前本站向大家介绍过《在线代码编译服务Codepad.org》其支持：C，C++，D，Haskell，Lua，OCaml，PHP，Perl，Plain Text，Python，Ruby，Scheme，Tcl。当然，在这里，向你介绍一个可以运行Go语言的：http://golang.org/doc/play/

→

→

  • 说起Web的界面，最让各位WEB开发者痛苦的就是网页兼容性问题，IE是一个恶梦，因为其自己和自己都不兼容，在MSDN上，有这样的一个网页说明了从IE5一直到IE9的CSS的兼容性问题，很多很多的表格，头都看大了。当然，以前本站的《检查网页浏览器的兼容性》的文章向你介绍过如何查看网站在不同浏览器中和操作系统下的效果（其也是一个在线服务）。

→

  • 当然，Web上的开发，问题最大的还是安全问题，我们的Ruby on Rails给出了一个Web安全的开发教程，相当不错哦。谈到了几乎所有最有威胁和最常用的网上攻击，这个文档应该是所有Web开发者都需要注意的。

→

→

  • 最后，给大家介绍一个关于文件格式方面东西，我们知道，很多文件的开头表明着这个文件的类型，所以，有这样的一个网站了维护了这么一个信息列表，其把几乎所有常见的文件头的那段和文件类型相关的Magic Number列了出来，而且还保持更新，非常不错哦，这个网站是：http://www.garykessler.net/library/file_sigs.html，希望能对你有用哦。

→

  • 最最后，给大家介绍一个开源项目，叫Structure Synth，这个东西可以用来画出一些很酷的图，相当不错，使用起来非常简单，我试用了一下，的确很强大。用一些简单的脚本就可以作出很不错的3D图，下面是他的一个示例，只需要写那么不到10行的代码，很简单。

想看看，大家用这个东西做什么酷图了吗？上 http://www.flickr.com/groups/structuresynth/ 看看吧。

structure 作者 Supreet Kumar architecture x-ray 2 作者 Supreet Kumar perspective 作者 Supreet Kumar snake shade 作者 Supreet Kumar thatched beauty 作者 Supreet Kumar
aircraft 作者 Supreet Kumar aircraft 作者 Supreet Kumar 作者 FracturedPixel splash1 作者 Supreet Kumar joy 作者 Supreet Kumar

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 一些非常有意思的杂项资源 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3013.html/feed 45 写HTML和CSS的新方法 https://coolshell.cn/articles/2406.html https://coolshell.cn/articles/2406.html#comments Tue, 11 May 2010 00:18:19 +0000 http://coolshell.cn/?p=2406 Zen Coding 一个用来简化编写 HTML，XML， XSL （或是其它一些诸如此类格式的编辑器）。其主要是用一种缩写方式的语法来书写大量重复和无味的HT...

Read More Read More

The post 写HTML和CSS的新方法 first appeared on 酷 壳 - CoolShell.]]>

Zen Coding 一个用来简化编写 HTML，XML， XSL （或是其它一些诸如此类格式的编辑器）。其主要是用一种缩写方式的语法来书写大量重复和无味的HTML，很像CSS语法。下面是一个例子：
div#page>div.logo+ul#navigation>li*5>a
展开后会成为下面这个样子：
<div id="page">
        <div></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>
可以看出来，#代表ID，>代表下一层。
如果你写下：
select>option#item-$*3
那么将会得到：

<select>
	<option id="item-1"></option>
	<option id="item-2"></option>
	<option id="item-3"></option>
</select>
看上去很不错吧。目前，其支持如下的编辑器：

  • AptanaHowToEn
  • TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate). Bundles > Zen Coding menu item
  • Coda (Mac) — external download, via TEA for Coda. Plug-ins > TEA for Coda > Zen Coding menu item
  • Espresso (Mac) — external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. Actions > HTML menu item
  • Komodo Edit/IDE (crossplatform) — external download. Tools > Zen Coding menu item
  • Notepad++ (Windows). Zen Coding menu item
  • PSPad (Windows). Scripts > Zen Coding menu item
  • <textarea> (browser-based). See online demo.
  • editArea (browser-based). See online demo.

还有下面这些第三方的插件：

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 写HTML和CSS的新方法 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/2406.html/feed 20 纯CSS做的3D效果 https://coolshell.cn/articles/1962.html https://coolshell.cn/articles/1962.html#comments Wed, 16 Dec 2009 06:04:32 +0000 http://coolshell.cn/?p=1962 下面是一个用CSS做的一个3D的效果。你可以使用鼠标在图片中移动来显示这个效果。其实，这个效果只是能过移动图片来产生的。其可以工作在Internet Explo...

Read More Read More

The post 纯CSS做的3D效果 first appeared on 酷 壳 - CoolShell.]]> 下面是一个用CSS做的一个3D的效果。你可以使用鼠标在图片中移动来显示这个效果。其实，这个效果只是能过移动图片来产生的。其可以工作在Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 和 Konqueror 3.5下。网页在这里：http://www.romancortes.com/ficheros/meninas.html


（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 纯CSS做的3D效果 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/1962.html/feed 11 Web中的省略号 https://coolshell.cn/articles/1949.html https://coolshell.cn/articles/1949.html#comments Tue, 15 Dec 2009 00:43:59 +0000 http://coolshell.cn/?p=1949 在Web开发中，对于一种情况很常见。那就是，文本太长，而放置文本的容器不够长，而我们又不想让文本换行，所以，我们想使用省略号来解决这个问题。但是，在今天HTML...

Read More Read More

The post Web中的省略号 first appeared on 酷 壳 - CoolShell.]]> 在Web开发中，对于一种情况很常见。那就是，文本太长，而放置文本的容器不够长，而我们又不想让文本换行，所以，我们想使用省略号来解决这个问题。但是，在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事，在IE，Safari，Chrome，Opera中都可以。但在Firefox中却不行，但我们可以使用jQuery来解决Firefox不兼容的问题。下面是相关的代码示例。

使用CSS设置省略号

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

  • overflow 属性是必需的，并且属性要是hidden。
  • white-space: nowrap 也是必需的。如果文本可以自动换行，就算是不可见，也不会有省略号的。因为文本换行了，所以没有超过容器的尺寸，所以也就不会有省略号了。
  •  width 属性仅在需要支持IE6时设置。 设置成100%仅是为了解决IE6的不兼容问题。（关于IE中的那些不兼容问题，你可以参看本站的《9个最常见IE的Bug及其fix》）
  • text-overflow: ellipsis 就是设置省略号了。目前还不是HTML的标准规范。其是由IE引入的，可以在IE6+，Safari 3.2+和Chrome上工作。
  • -o-text-overflow: ellipsis 是 Opera 支持的。可以在 Opera 9.0+使用。

使用jQuery设置省略号

正如前面所说过的，Firefox并不支持CSS中的那些省略号设置，因为那并不是标准的HTML规范。所以，我们需要使用jQuery的Javascript来干这个事。你可以下载由Devon Govett写的jQuery 省略号插件，于是，你可以简单的把”ellipsis”赋给某些元件或是CSS定义，如下所示：

[javascript]$(document).ready(function() {
    $(‘.ellipsis’).ellipsis();
}[/javascript]

或是

[javascript]$("span").ellipsis();[/javascript]

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post Web中的省略号 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/1949.html/feed 8 9个最常见IE的Bug及其fix https://coolshell.cn/articles/1817.html https://coolshell.cn/articles/1817.html#comments Tue, 17 Nov 2009 07:33:02 +0000 http://coolshell.cn/?p=1817 Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗，让你的开发生产率严重下...

Read More Read More

The post 9个最常见IE的Bug及其fix first appeared on 酷 壳 - CoolShell.]]> 9个最常见IE的Bug及其fix

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗，让你的开发生产率严重下降。下面是一个教程，告诉你9个IE上最常见的BUG以及如何解决它们。

1. 居中布局

创建一个CSS定义把一个元素放到中间的位置，可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ，然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

下面是我们所期望的输出：

Tutorial Image

但IE却给我们这样的输出：

Tutorial Image

这应该是IE 6对margin的 auto 并没有正确的设置。但幸运的是，这是很容易被修正的。

解决方法

最简单的方法是在父元件中使用 text-align: center 属性，而在元件中使用 text-align: left 。

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
	text-align: center;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px 0;
    	text-align: left;

}

2. 楼梯式的效果

几乎所有的Web开发者都会使用list来创建导航条。下面是你可能会用到的代码：

    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>

 

ul {
    list-style: none;
}

ul li a {
   	display: block;
   	width: 130px;
	height: 30px;
   	text-align: center;
   	color: #fff;
   	float: left;
	background: #95CFEF;
	border: solid 1px #36F;
	margin: 30px 5px;
}

一个符合标准的浏览器会是下面这样：

Tutorial Image

但IE却是这样的：

Tutorial Image

下面是两个解决方法

解决方法一

设置li元件的float属性。

ul li {
	float: left;
}

解决方法二

设置 display: inline 属性。

ul li {
	display: inline
}

3. float元件的两倍空白

请看下面的代码：

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
}

期望的结果是：

Tutorial Image

IE的结果是：

Tutorial Image

解决方案

和上面那个BUG的解决方案一样，设置 display: inline 属性可以解决问题。

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
   	display: inline;
}

4. 无法设置微型高度

我们发现在IE中使用 height: XXpx 这样的属性无法设置比较小的高度。下面是个例子（注意高度是2px）：

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
}

期望结果： 2px的元件加1px的边框.

Tutorial Image

IE的结果：

Tutorial Image

解决方案一

这个BUG的产生原因很简单，IE不允许元件的高度小于字体的高度，所以，下面的fix是设置上字体大小。

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	font-size: 0;
}

解决方案二

但是最佳的解决方法是使用 overflow: hidden 。

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	overflow: hidden
}

5. 跨出边界

这个BUG是很难看的。当父元件中使用了 overflow 的 auto 属性，并且在其里放入相关元件。你会看来里面的元件会跨出来。下面是一个示例：

<div id="element"><div id="anotherelement"></div></div>

 

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
}

#anotherelement{
	background: #555;
	width: 150px;
	height: 175px;
	position: relative;
	margin: 30px;
}

期望的结果：

Tutorial Image

IE的结果：

Tutorial Image

解决方法

设置 position: relative;属性

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
    	position: relative;
}

6. Fixing the Broken Box Model

Internet Explorer曲解了“盒子模子”可能是最不可原谅的事情了。IE 6 这个半标准的浏览器回避了这个事情，但这个问题还是会因为IE运行在“怪异模式”下出现。

两个Div元件。一个是有fix的，一个是没有的。而他们不同的高和宽加上padding的总合却是不一样的。下图的上方是被修正的，下方则没有。

Tutorial Image

解决方法

我相信这个事情即不需要解释也不需要演示，这应该是大多数人都明白的。下面是一个很相当怪异的解决方案

#element{
	width: 400px;
    	height: 150px;
	padding: 50px;
}

上面的定义也就是说：

#element {
    width: 400px;
    height: 150px;
   \height: 250px;
   \width: 500px
}

是的，你要原来的长和宽上加上了padding。但这个fix只会作用于IE了的“怪异模式”，所以你不需要担心在IE6的正常模式下会有问题。

7. 设置min-height和min-width

IE忽略了min-height。

解决方法一

这个fix由 Dustin Diaz提供。其利用了 !important 下面是代码片段：

#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

解决方法二

#element {
    min-height: 150px;
    height: 150px;
}

html>body #element {
	height: auto;
}

8. Float 布局错误行为 Misbehaving

使用无table的布局最重要的就是使用CSS的float元件。在很多情况下，IE6处理起来好像在摸索阶段，有些时候，你会发现很多奇怪的行为。比如在其中有一些文本的时候。

来看一下下面这个示例：

<div id="container">
	<div id="element">http://net.tutsplus.com/</div>
	<div id="anotherelement"></div>
</div>

 

#element, #anotherelement{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 100px;
	height: 150px;
	margin: 30px;
	padding: 10px;
	float: left;
}

#container{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: auto;
}

期望结果：

Tutorial Image

IE的结果：

Tutorial Image

你可以看到其中的不同了

解决方法

要解决这个问题没有什么好的方法。只有一个方法，那就是使用 overflow: hidden 。

#element{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: hidden;
}

9. 在list项目门的空行

先看下面的例子

<ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
</ul>

 

ul {
	margin:0;
	padding:0;
	list-style:none;
}

li a {
	background: #95CFEF;
	display: block;
}

期望结果：

Tutorial Image

IE的结果：

Tutorial Image

Fortunately, there are a plethora of fixes you could try.

解决方法一

定义height来解决

li a {
	background: #95CFEF;
	display: block;
    	height: 200px;
}

解决方法二

li a {
	background: #95CFEF;
	float: left;
    	clear: left;
}

解决方法三

为 li 加上display: inline。

li {
	display: inline;
}

结论

调界面是一件很难的事，调一个CSS的HTML界面是一件更难的事，在IE下调一个CSS的HTML界面是难上加难的事。

文章：来源

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 9个最常见IE的Bug及其fix first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/1817.html/feed 22