【第二步 布局Logo栏】

首先我们需要把页面上的logo给切割出来，其大小为173*46,名字为：logo.gif

一般网站都会做到点击logo，就会回到主页，应该怎么做呢，大家首先会想到，给图片加上链接就可以了，代码一般会这么写

不过KwooJan要介绍另外一种方法，将图片做成链接a的背景，同样可以达到上面说的效果，并且HTML代码就会更精简，少了，看看下面Logo栏的页面代码，红色的为将logo.gif作为背景的链接

HTML代码：

CSS代码

#Logo{

height:80px;/*公共代码中没有定义高度，在这里定义*/

}

#logoLink{

display:block;/*将链接a转化成块状元素，这样才能显示出背景*/

width:173px;

height:46px;

background:url(../Images/logo.gif) no-repeat;

float:left;/*为了让ie6和ff显示效果一样，如果不加上这句话，后面的margin-top:20px;两个浏览器解析不一样，大家可以去掉这句话，看看两者显示效果差别*/

margin-top:20px;/*设置a的顶部外边距为20像素，这样才能和浏览器顶部有段距离，才能和图片中做的一样*/

}

好到这里，头部含有logo的区域已经写完。

【第三步 布局导航栏Nav】

页面上的导航栏和第四节讲的几乎是一样的，并且更简单些，这里我就不再给大家一步一步做，不会做的就去看第四节，这里我就直接把代码发出来供大家学习

HTML代码： 

  • HOME 

  • PHOTOS

  • ABOUT

  • LINKS

  • CONTACT

CSS代码

#Nav{height:42px;}

#Nav ul{

height:42px;

list-style:none;

background:#56990c;

}

#Nav ul li{height:42px; float:left;}

#Nav ul li a{

display:block;/*转化成块状元素，因链接是内链元素，若想给它定义下面的属性，必须将它转化成块状元素，*/

height:42px;

color:#FFF;

padding:0 10px;

line-height:42px;

font-size:14px;

font-weight:bold;

font-family:Arial;

text-decoration:none;/*去除链接样式，默认是有下划线的，加上这句就没有任何样式，下划线也没有了*/

float:left;/*这句一定要加，不然在IE6中会出现，这种效果*/

}

#Nav ul li a:hover{background:#68acd3;}

【第四步Banner布局】

这个就更简单了，有两种方法

第一种：将图片作为背景

第二种：直接将图片插入之间，代码：

user_index.php?action=addblog_new

大家可以根据需求和实际情况选择用哪一种，在这里我们用第一种

HTML代码没有什么变化，只需要在CSS里面定义一下就OK了

CSS代码：

#Banner{

height:290px;

background:url(../Images/banner.jpg) no-repeat;

}

怎么样做到这里比较简单吧，好，接着来

【第五步 内容Content板块布局】

从 图片上我们看到，内容板块分为左右两个区域，左边ContentL宽度是600px，右边ContentR宽度是300px，但是由于我们要将内边距设置 成15px(这样才会好看)，所以ContentL的宽度在CSS中就要设置成600-15*2=570px,而右侧的ContentR则需要设置成 300-15*2=270px；

HTML代码：

此处为左边ContentL

此处为左边ContentR

CSS代码:

#Content #ContentL,#Content #ContentR{float:left;padding:15px;}/*为什么都要左侧浮动，如果不明白就去看第二节*/

#Content #ContentL{width:570px; background:#f0f0f0;}

#Content #ContentR{width:270px; background:#d3e7f2;}

内容部分我们就先做到这里，最后我们再布局里面的具体元素，下面接着来布局版权模块(Footer)

【第六步Footer布局】

CSS代码：

#Footer{

text-align:center;

background:#68acd3;

padding: 10px 0;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

color:#fff;

line-height:20px;

}

目前效果如下：

就这样我们页面的整体结构基本出来了，剩下的工作就是内容板块内部元素的具体布局了，我将在下节课接着讲!

浮动(float)页面布局

我们接着上节课，继续学习，我把页面整体效果发出来，方便大家学习

【第七步 内容左侧板块(ContentL)布局】

我们分析一下他的结构，主要包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。

好!！既然搞清楚结构了，后面我们布局就容易了

    我 们是一群热爱页面前端技术并热衷于推广W3C标准的热心好友，如果您想学或者正在学DIV+CSS布局页面，加入我们！您会很快驯服并驾驭这匹烈马！虽然 我们的论坛正在起步，但是这里的每个人都很热爱页面前端技术并热衷于推广W3C标准在中国的运用，只要你有问题就可以问，一定会有人帮你解答！我们可能不 是高手，但是我们都是很乐于帮助，乐于钻研。我们都很热心！

CSS代码：

#Content #ContentL h1{

height:40px;

line-height:40px;/*设置行距，目的是保证h1中的文字垂直居中*/

font-size:16px;

color:#054d73;

border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/

margin-bottom:10px;/*设置外边距，让h1和下面的内容区域p保持10像素的距离*/

}

#Content #ContentL p{

font-size:12px;

line-height:20px;

text-indent:2em;/*这句话的目的就是为了让文章第一行缩进两个汉字，记住这句话就OK了*/

}

这里我们第一篇文章已经布局完毕，下面布局一下第二篇文章，估计大家早就注意到了，两篇文章唯一区别就是第二篇文章的内容的左侧有一张图片，哈哈，这就好办了，把第一篇文章的代码复制过来，替换标题和文章内容，然后再文章内容里面插入一张图片就OK了，代码如下：

   很多朋友在刚接触DIV+CSS的时候，很迷茫，不知道从何学起，看网上的教程吧，理论性的东西太多，越看越糊涂，再说时间上也不允许，也没有那个耐 心，其实KwooJan也不喜欢看这种视频教程，很枯燥，很乏味，即使耐着性子看完收获也不大，实用性不大，群上的一些朋友告诉我，他们学习 DIV+CSS没有思路，不知道怎么去学，如何去学，希望KwooJan能带着他们一步一步走，从今天开始我将写个教程，打算以例子为主，帮主大家更轻松 的驾驭DIV+CSS。好了，在这里我必须要给大家纠正一个错误，我们平时说的DIV+CSS其实是一种错误的说法，是中国人自己发明的，并不准确，不能 够将所谓的页面布局思想说的很确切，其实应该说XHTML+CSS才对。

不但图片没有靠左边，而且文字的上方还有一大片空白，应该怎么做呢？很容易，只要我们给图片左侧浮动(float:left;)就可以了,CSS代码如下：

#Content #ContentL p img{

float:left;

}

效果如下，很接近了吧，只不过图片的左侧和文字靠的太接近了

这个很好解决，设置图片的右外边距(margin-right)嘛!,CSS代码如下：

#Content #ContentL p img{

float:left;

margin-right:10px;

}

这下效果一样了吧!！!！!！

OK！到这里ContentL板块布局搞定！

【第八步 内容右侧板块(ContentR)布局】

CSS代码：

#Content #ContentR h1{

height:40px;

line-height:40px;/*设置行距，目的是保证h1中的文字垂直居中*/

font-size:16px;

color:#900;

border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/

margin-bottom:10px;/*设置外边距，让h1和下面的内容区域p保持10像素的距离*/

}

而内容的第一句“CSS学习互动社区QQ群：”的代码如下

HTML代码：

CSS学习互动社区QQ群：

CSS代码：

#Content #ContentR strong{

display:block;/*只有把strong标签，转化成块状元素，margin-bottom:5px;才会起作用，才能使与下面的元素维持一定距离*/

font-size:12px;

color:#333;

margin-bottom:5px;

}

好!！第一行搞定！

下面的两行红色的QQ群信息怎么做？其实这个有很多办法

方法一：ul、li或者dl、dt、dd来布局

方法二：表格(Table)来布局

方法三：用单纯的标签来布局比如

、、

等标签

其实在这里，我最推荐第二种方法，可能大家看到这里挺想不透的，或者觉着用Table很丢人，好似没有什么技术含量似的，其实这时候如果你不用Table，反而认为你的技术含量低，自己给自己找麻烦，为什么这么说呢

首先你必须知道DIV和Table的诞生目的不一样，DIV的诞生就是用来布局页面，而Table的诞生就是为了放数据，大家看KwooJan所有写的代码，只有布局页面大板块的时候才用，还记得上节课一开始布局页面板块的时候代码么

整个页面就这5个DIV，其他地方一般不用，因为DIV的使命就是布局页面！

大 家经常会进入一个误区，会认为在Web2.0时代，只要页面中用了Table就是没有技术含量，就是丢人，要是页面中没有一个table，所有元素全部用 DIV做，那就是牛人！大家注意了，要是某人对你说，我的整个网站没有应用一个Table，这时候你就可以认为这个人做页面没有什么技术含量，并且CSS 代码相当庞杂，根本不能算是一个高手，顶多是一个DIV的狂热分子，做的页面也能说是标准，很多用Table就可以简简单单实现的效果，非要用DIV去实 现，不仅使CSS文件相当的臃肿，而且使页面加载速度变慢。

所以在这里KwooJan提醒大家，一定一定要走出这个误区！

好了说了这么多，这块的代码如下：

CSS代码：

#Content #ContentR table{

font-size:12px;

color:#900;

}

CSS代码：

#Content #ContentR span{

font-size:12px;

}

至此我们每个版块均以布局完毕，但是却有两点瑕疵：

1）IE6和FF中有一点却显示的却不一样，底部版权在FF中却跑到了的右侧ContentR的下面，如图：

产生原因：是因为id为Content的div，没有自动适应里面ContentL的高度

解决方法：最简便的方法是设置Content的CSS属性overflow:hidden;

怎么样问题解决了吧!

2）因为ContentR的高度没有ContentL的高度高，所以在ContentR的下面留有一块空白，如图：

解决方法：只需要把Content的背景颜色设置成和ContentR背景颜色一样就OK了

这个问题也解决了吧!

至此，整个页面算是布局完成了，感觉怎么样？有不懂的就回复帖子告诉我

顺便说一下：最终代码其实还可以进行精简，这个算是给大家一个思考题

定位布局页面

注：在做这节教程的时候，我又上网查了相关资料，看了大量的文章，做了大量的测试，最后总结出下面这些文字，洋洋洒洒一整篇，不过需要大家一句话一句话的看，一定要仔细喽！还有对于课程中的说的，最好一边看，一边练，不练绝对看不懂！

定位(position)布局页面说容易非常容易，只需要记住这节课最后一句话就可以了，说困难，那是相当的难理解，需要一定的耐心，不过还好，KwooJan给大家总结的已经很通俗易懂了。

如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。”

好，上课！

任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative（相对）以及absolute（绝对）。

【position:absolute】

意思是：他的意思是绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，有以下属性：

1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面

的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。

2)如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

3)如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。

以上三点可以总结出，若想把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件，

第一：设定TRBL

第二：父级设定Position属性

上面的这个总结非常重要，可以保证你在用absolue布局页面的时候，不会错位，并且随着浏览器的大小或者显示器分辨率的大小，而不发生改变。

只要有一点不满足，元素就会以浏览器左上角为原点，这就是初学者容易犯错的一点，已经定位好的板块，当浏览器的大小改变，父级元素会随之改变，但是设定Position属性为absolute的板块和父级元素的位置发生改变，错位了，这就是因为此时元素以浏览器的左上角为原点的原因。

初学者很容易犯错的是，不清楚Position属性为absolute的板块，若想定位到父级板块中，并且当浏览器的大小改变或显示器的分辨率改变，布局不发生改变，是需要满足两个条件的，只要有一点不满足，元素就会以浏览器左上角为原点，从而导致页面布局错位。

【position:relative】

意思是相对定位，他是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，有以下属性：

1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolut不同)。

2)如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolut不同)

3)如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定(前半段和absolut一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolut不同)。

以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。

综合上面对relative的叙述，我们就可以将position属性为relative的DIV视成可以用TRBL进行定位的的普通DIV，或者说只要将我们平时布局页面的div的CSS属性中加上position:relative后，就不只是用float布局页面了，还可以用TRBL进行布局页面了，或者说加上position:relative的DIV也可以像普通的DIV进行布局页面了，只不过还可以用TRBL进行布局页面。但是position属性为absolute不可以用来布局页面，因为如果用来布局的话，所有的DIV都相对于浏览器的左上角定位了，所以只能用于将某个元素定位于属性为absolute的元素的内部某个位置，这样我们就可以总结比较重要的结论

属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置

既然属性为absolute的元素用来定位某元素在父级中位置，就少不了TRBL，这时候根据一开始讲的absolute的第三条，如果父级元素没有position属性那么absolute元素就会脱离父级元素，但是如果是布局页面，父级元素position的属性又不能为absolute，不然就会以浏览器左上角为原点了，所以父级元素的position属性只能为relative！

=============================================

总结：如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。

=============================================

下节课我将拿第5节的例子，给大家讲讲，如何用position布局

用position来布局页面

我们先把上节课最后总结一句话拿出来

“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。”

如果你还是不能太明白这句话，我们就做个实例，把我们第5节页面的头部blog区域用定位(position)来布局一下

HTML代码和原来的没有区别：


CSS代码就有变化了，咱先看看原来的CSS代码

#Logo{

height:80px;

}

#logoLink{

display:block;

width:173px;

height:46px;

background:url(../Images/logo.gif)no-repeat;

float:left;

margin-top:20px;

}

原来是用“浮动+外边距”布局的，将#logoLink定位在距离顶部20像素，左侧0像素的地方；

如果用position的方法，CSS就应该这么写，首先给#logo加上“position:relative;”，给#logoLink加上“position:absolute;”,然后让#logoLink距离上面20像素，左侧0像素，具体代码如下：

#Logo{

height:80px;

position:relative;/*相对定位*/

}

#logoLink{

display:block;

width:173px;

height:46px;

background:url(../Images/logo.gif)no-repeat;

position:absolute;

top:20px;

left:0;

}

怎么样效果和原来的一样吧，就是这么简单.

什么？CSS代码多了？的确，由原来的两句话，变成现在的四句，但是有没有发现，就靠Position我们就可以将Logo随意的定位于任何一个地方！这就是它的灵活的地方！如果在页面顶部在有一行“加入收藏| 设为首页 | RSS订阅”如下图，你是不是也可以很方便的将它们定位于右上角呢!

但是定位(position)有一个缺点，不会自适应内部元素的高度，所以平时我们在布局页面的时候，如果某个或者某些模块高度永远不变，就可以用定位，但是KwooJan建议大家布局页面的时候，还是要以Float为主，Position为辅！这样你才能做出高质量的页面。

=========================================================================

最后，请大家记住我这句话:“布局页面，Float为主，Position为辅！”

=========================================================================

好，我们有关页面布局的教程，算是已经完结。

如果能悟透每节课内容，你现在就可以拍着胸脯说“我是DIV+CSS高手！”哈哈，不过你要知道，DIV+CSS的叫法是不标准的，应该叫... ...

什么你想不起来了？！

咣当！!!

再说一句，在我们布局页面的时候，难免遇到一些IE BUG，这时候就需要CSS Hack(解决CSSbug的方法叫做CSS Hack)，这块也挺简单的，推荐一篇文章《不同浏览器CSS Hack写法》，如果还有不懂多看看论坛的“『CSS浏览器兼容』”板块，或者baidu，google，这些知识我就不再单独来一节课讲了。

    CSS Hack

写完第七课，因为时间问题没有继续写第八课有关浏览器兼容方面的文章，以为大家可以自己掌握这方面的知识，不过发现有很多同学找了很多资料，很多文章去研究，费时费力的，效果也不好，今天是星期六，我呢就再给大家补写这篇教程，带领大家用最短的时间掌握CSS Hack！

说到浏览器兼容性问题，就必须说CSS Hack！提到Hack大家肯定会想到电脑***(hacker)、和病毒程序联系到一块，不过在CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法。说的更直白一些就是，你平时做个页面，布局正确，CSS正确，可就是在不同的浏览器中显示的效果不一样，要么错位，要么多几个像素，怎么都找不到原因，这时候我们就会用一些技巧方法来让不同的浏览器显示一样的效果，这种方法我们就称之为CSS Hack，记住喽，CSS Hack是解决页面浏览器不兼容的技巧方法，是一种方法哟，不要理解偏差。

不过这里需要说明一点，CSS Hack都属于个人对CSS代码的非官方修改，所以编写的CSS代码不会通过官方W3C的认证，这个要知道！以后经常会遇到这种情况，CSS写的正确，通过W3C验证，但是不同浏览器显示效果不一样，用了CSSHack，显示的效果一样了，却又通不过W3C验证了，很是郁闷，不过不要钻牛角尖就是了，W3C验证只不过是帮你检查一下CSS代码写的有没有语法错误而已，通过验证只不过是说明你到目前写的CSS代码没有语法错误而已，不要太计较是否通过验证，也不要多想，如果通不过W3C验证，其他人会不会笑话我，这些想法都是没有必要的，这说明我们的技能更强，因为我们用到了CSS Hack，再说了你的页面是给网民看的，网民看的是界面好看不好看，内容好不好，有没有找到他要找的东西，他不理会你的页面有没有通过W3C验证，所以KwooJan在这里提醒大家，不要落入这个误区哟!

好，我们开讲！

这节课我主要讲两个最常用的CSS Hack，如果这两个能明白，再学其他的Hack就容易了

（1）!important   （2）*

!important

【例子】

#content{

 height:960px !important;

 height:900px;

}

它所附加的生命拥有最高优先级，但是由于IE6不能识别它,而对于IE7，FF均能识别，所以我们就可以用来来解决一些页面，在IE6上显示的效果与IE7、FF上的效果不一样的情况。

在上面的例子中

IE7和FF遇到附加有!important的CSS属性，就会只解析第一句“height:960px !important;”将高度定为960px，而后面的“height:900px;”将不解析，忽略它；

因为IE6不认识附加有!important的语句，所以会跳过第一句，忽略此句，直接解析第二句“height:900px;”将高度定为900px；

注意：附加有“!important”的语句一定要在没有附加“!important”的语句的上面，顺序一定不能错！

*

#content{

 height:960px;

 *height:900px;

}

由于IE6、IE7可以识别附加有*的CSS属性语句，FF则不能识别，所以我们就可以用来来解决一些页面，在IE上显示的效果与FF上的效果不一样的情况。

在上面的例子中

因为FF不识别*，所以它只读第一句“height:960px;”而忽略第二句，又因IE6、IE7识别*，所以它们先读第一句，将高度定为960px，而后又读第二句“*height:900px;”，将高度从960px修改为900px，所以我们在IE中看到的最终效果就是高度为900px;

注意：附加有“*”的语句一定要在没有附加“*”的语句的下面，顺序一定不能错！你想想就知道！

好了，这节课很容易，相信你肯定很容易就理解了，后面的就是自己实践喽!加油各位！

为了帮助大家更好的提高，到这个帖子里***提建议，拿金币！*** ，你希望在后面的教程里加上哪方面的内容，你对现在教程有什么建议，说出来，我会给大家写一本电子书，人手一本，更好的帮助大家提高！快来吧，别等了!!!就等你的建议了!

单图片按钮实

一般我们做按钮基本上都需要两张图片，一张正常状态的图片，一张按下去效果图片

做这种按钮思路就是，设置链接a的背景为第一张图片，a:hover的背景为第二章图片

代码如下：

HTML代码：

CSS代码：

#theLink{

 display:block;/*因为标签a是内链元素，所以利用这句话将内链元素转化成块状元素，后面的width和height才起作用*/

 width:120px;

 height:41px;

 margin:0 auto;

 background:url(../p_w_picpaths/normal.gif)no-repeat;

}

#theLink:hover{background:url(../p_w_picpaths/press.gif)no-repeat;}

这节课，主要给大家介绍第二种思路，其实也很简单，首先我们将上面的两个图片合并成一张图片，如下

其次，将上面的图片设置成按钮的背景

最后，将a:hover的背景向上移动41个像素就OK了

CSS代码：

#theLink{

 display:block;

 width:120px;

 height:41px;

 margin:0 auto;

 background:url(../p_w_picpaths/buttonBG.gif)no-repeat;

}

#theLink:hover{background:url(../p_w_picpaths/buttonBG.gif) no-repeat 0 -41px;}

首行缩进两个文字

我记得过去刚开始学习制作页面的时候，要想让一段文字首行缩进两个文字，如下图

总是在前面加上8个“ ”，因为过去大家对CSS的概念也不太熟悉，也不太重视，这种方法实现虽然比较直接，但是文字多的时候会有很多“ ”充斥在代码中，如果再有些换行
，那代码显着比较乱，现在大家开始主动了解CSS，学习CSS，你会发现这个问题很容易解决，只需要在相应的位置加入代码

text-indent:2em;

就很容易实现喽!

text-indent:2em;解释：text的意思是文本、indent在计算机英语中意思是缩进、至于后面的2em意思就是2个相对单位；

em解释：相对于当前对象内文本的字体尺寸。(引自CSS2.0手册)各位同学，要仔细品一下这个概念！理解喽没有，em这个单位的意思就是相对文字大小，1em就是1个文字大小，2em就是两个文字大小，到这里看明白了吧，理解“text-indent:2em;”的意思了吧，就是“文本缩进两个文字大小”，这不就是我们要的效果么？