原文见: http://lifesinger.org/blog/2008/11/pe-layout-2/
上篇中讨论了各种已有的布局实现。仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：
- 浮动 float
- 负边距 negative margin
- 相对定位 relative position
这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。
尝试之路
考虑以下DOM结构：
<div id="page"> <div id="hd&....
IE的css hack, 记录一下, 防止混淆~
* html (only IE6)
_attribute (only IE6)*attribute (IE6, IE7)
+attribute (IE6, IE7)*+html (only IE7)
以上写法都不支持IE8
attribute\9 (IE6, IE7, IE8)
Example:
.mainnav {
font-size: 15px; // all
font-size: 16px \9; // ie6, ie7, ie8
*font-size: 17px; // ie6, ie7
_font-size: 18px; // ie6
}
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr ....
This is preliminary documentation and is subject to change.
With each new release of Windows Internet Explorer, support for the Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS Level 1-compliant version of Internet Explorer. Windows Internet Explorer 8 is planned to be a fully CSS Level 2.1-compliant browser, and will support some features of CSS 3.
If the browsers your Web site is targeting include earlier versions of Internet Explorer, however, you want to know the level of CSS compliance for those as ....
rel 属性 -- link标签中的rel属性,定义了文档与链接的关系.
- 此属性通常出现在a,link标签中
- 属性值
- Alternate -- 定义交替出现的链接
Alternate 属性值 -- alternate是LinkTypes的一个值,网页设计者可以通过此值,设计交替出现的链接
- 此属性值通常在,rel,rev属性中出现
示例
定义两种不同的样式,用户可以通过浏览器选择样式(ie不支持此属性)
...
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN"><style type="text/css">
html, body {
margin: 0;
}
/* boc 关键代码 */
* html, * html body {
margin: 0;
overflow: hidden;
height: 100%;
}
....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<style type="text/css">
.wrapper {
overflow: hidden;
}.sidebar, .content {
float: left;
width: 200px;
background: #ddd;
margin-right: 4px;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
</style><div class="wrapper">
<div class="sidebar&....
