2天驾驭DIV+CSS （实战篇）（转）

 这是去年看到的一片文章，感觉在我的学习中，有不少的影响。于是把它分享给想很快了解css的兄弟们。本文是实战篇。

基础篇
[知识一] “DIV+CSS” 的叫法是不准确的
[知识二] “DIV+CSS” 将你引入两大误区
[知识三] 什么是W3C标准？
[基础一] CSS如何控制页面
[基础二] CSS选择器
[基础三] CSS选择器命名及常用命名
[基础四] 盒子模型
[基础五] 块状元素和内联元素

实战篇
[第一课] 实战小热身
[第二课] 浮动
[第三课] 清除浮动
[第四课] 导航条(上) | 导航条(下)
[大练习] 前四节课大练习
[第五课] 浮动布局之结构设计 | 浮动布局之表现设计
[第六课] 定位
[第七课] 定位应用
[第八课] CSS Hack

技巧篇
[单张图片按钮实例] 
[首行文字两文字缩进]

 

 

【第一课】实战小热身

上课了~请同学先把下面的例子根据要求做出来

    【例子】
        要求：
        1）宽度、高度均是200像素；
        2）颜色为红色#900；

        自己做做，看看能不能作出来？先不要看我的代码，如果真的做不出来，就下载下来，跟着下面说的一步一步修改。
        下面是我的代码：  【第一课】实战小热身.rar (1.24 KB, 下载次数: 4671) 

        IE6和FF显示的实际效果

        怎么样，比较容易吧~，但是你们有没有发现，红色区域离浏览器的顶部和左边的边距IE6和FF的不一样，有没有发现？这样的话，我们作出来的页面浏览器就不兼容了，效果不一样了？为什么会这样？

        这是因为每个浏览器都有一个内置的CSS文件，当你没有对某个标签的属性设置的时候，浏览器就会应用内置的CSS文件，怎么才能做到浏览器兼容？不着急，你只需要在CSS文件中，将我们目前应用到得标签body和div置零就OK了，代码这么写：

        body,div{padding:0; margin:0;}

 

        如果您对上面CSS的样式写法不熟悉，就返回去看一下“【基础二】CSS选择器”，当把这句话加上之后，是不是两款浏览器显示效果一样了~如下图

        好，我们接着来，现在再加一个条件：
        3）让红色区域与浏览器的顶部和左边距离为20像素；


        怎么样，有没有思路？没有思路没关系，继续向下看：
        我们，只需要设置红色方块的外边距就可以了，添加如下：
        CSS代码：

1. margin-top:20px;
   margin-left:20px;

    

效果如下图：

        这样就使红色区域定位于页面坐标(20,20)处了，与浏览器上边距和左边距都为20像素。
        不过上面的这种写法我们可以精简为

        margin:20px 0 0 20px;

 

        其中的数值顺序是：上右下左。
        而margin:20px 0;则和margin:20px 0 20px 0;是等价的哟~只不过是更加精简而已，这样写CSS加载速度会更快。

        我们接着将问题延伸，怎样才能让红色区域水平定位于浏览器的正中间，无论浏览器窗口的大小，显示器分辨率的大小。
也很简单，刚刚加的两句话"margin-top:20px;margin-left:20px;"修改为：

        margin:0 auto;

 

        怎么样，有意思吧，红色区域是不是位于浏览器的正中间了~

        好~！到这里第一节课结束，是不是很简单，或者太简单了!!!如果感觉不过瘾那就赶紧学下一节！^_^

 

【第二课】浮动

页面布局有两种方式
1）浮动Float 
2）定位Position

今天就通过一个小小的练习，通过引导的方式，让大家理解Float的含义。

【例子】
要求：
1）两个方块，一个红色#900，一个蓝色#009；
2）红色方块宽度和高度均为200像素，蓝色方块 宽度为300像素，高度为200像素；
3）红色方块和蓝色方块上外边距(margin-top)和左外边距(margin-left)均为20像素；

页面效果如下：

源代码： 【第二课】浮动 实例.rar (1.29 KB, 下载次数: 2253) 


        大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行，如图

        此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上“float:left;”，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox中却变成了如下效果：

        这时候就需要注意了，FF中如果前面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。

        怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS代码中也加入“float:left;”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了~

        到这里，大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！在布局页面时有时候是需要消除块状元素霸权主义才能布局好哟，比如KwooJan的博客中间内容部分，分为左边(LEFT)和右边(RIGHT)，就是要用上面这个方法布局的哟，如下图

细心的同学会注意到，在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：

其实这是IE6的一个BUG(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG:

        1）要为块状元素；
        2）要左侧浮动；
        3）要有左外边距(margin-left)；


解决这个BUG很容易，只需要在相应的块状元素的CSS属性中加入“display:inline;”，代码如下：

#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}

 

现在再看看，是不是IE6和FF显示一样了呢~

呵呵，这节课也比较容易吧，如果大家有不明白的可以留言，我会做进一步解释。
下节课，我们讲讲“浮动清除(Clear)”问题！

最终代码： 【第二课】浮动 实例 最终代码.rar (1.31 KB, 下载次数: 2469) 

精简后的CSS代码加载更快，大家一看就明白了^_^

精简后代码： 【第二课】浮动 实例 最终代码 精简版.rar (1.45 KB, 下载次数: 3487) 

【第三课】清除浮动

        还记得第二课我们做的例子的效果么？最后效果是，红色方块和蓝色方块都处于一行，我们使用“float:left;”，打击了块状元素的“霸道”，即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了“float:left;”后，红色方块终于允许蓝色方块和它处于同一行。如图：

        我们换一种方法表达上面的意思，因为红色方块的“左侧浮动”，才导致蓝色方块上移至红色方块的尾后；

        在上个例子中，为了达到浏览器兼容性，我们在红色、蓝色方块CSS代码中分别加了“float:left;”，这样IE和FF中显示效果一样，如果此时我们还想放一个宽度400像素，高度100像素的绿色方块，并让其处于第二行，希望效果如下图：

可是这时候不管怎么放，在IE中的效果始终是：

        导致绿色排到蓝色的后面这种情况就是因为蓝色方块CSS代码中含有"float:left;"，但是为了浏览器兼容性，又不能去掉(什么？这句话看不明白，只能说明第二节课你没有好好学，好好品味！)，怎么办？
好办~！只要在CSS代码中加入下面这段代码：

        .clear{clear:both;}

并在HTML代码中加入下面代码：

        

上面这句话究竟加在哪个位置呢，要加在蓝色方块和绿色方块中间，然后看看效果是不是我们想要的了~^_^

        <div id="redBlock">博客的左侧div>
        <div id="blueBlock">博客的右侧div>
        <div class="clear">div>
        <div id="greenBlock">博客的版权信息div>

 

目的就是为了清除蓝色方块的浮动对下面绿色方块的影响！是影响哟~是清除影响，而不是清除蓝色方块的浮动，或者说清除蓝色方块的浮动对下面区域块产生的作用！（仔细品品我说的这句话！）

        如果还是不明白，你就在红色方块和蓝色方块中间加上“

”，看看效果变成什么样子，然后再品品我刚才说的话！

        这节课就到这里，下节课我们做一个导航条，很实用的哟！一定要把前三节吃透，不然第四节会跟不上理解不透！

        第三课代码：  第三课代码.rar (1.46 KB, 下载次数: 2580) 

【第四课】导航条(上)

【注】本节所有的知识点均来自“知识1、2、3”，“基础篇1、2、3、4、5”和“实战篇的前三课”，思路是本节的、知识点是原来的，如果有看不懂的地方最好返回去再巩固一下，也许看其中的某一节，你觉着简单，你真的会吗？真的能灵活运用吗？如果前面的教程你采取了一目十行的方式浏览教程，而不是学习教程，这节内容搞不好就卡在哪个前面讲过的知识点上，所以建议大家学习的时候，认真的逐句的去理解教程中的每句话！  ---厘米IT学院  KwooJan

        好，开始上课！
      
        前三节课，我们知道了什么是“块状元素和内联元素”，以及xHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以在它的基础上演变而来~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以轻松应对，比如下面的导航条：

      

OK！我们要做的导航条的效果如下：鼠标移动上去背景变黑，并且字体颜色变成白色，


其实做这款导航条很容易的，我引导，你跟着做，这样思路慢慢就形成了~


【第一步】

        我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放置我们的导航的盒子~代码如下：

HTML代码：

1. <div id="nav">div>

    

CSS代码：

1. #nav{
   width:960px;
   height:35px;
   background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/
   margin:0 auto;/*水平居中*/
   margin-top:30px;/*距离顶部30px*/
   }

    

还有一点需要提醒的是，为了页面在浏览器中的兼容性，不要忘记在CSS文件顶部加入标签重置代码~

1. body,div{padding:0; margin:0;}

    

怎么样，作出来了没有，效果是不是一个灰色条（如下图），位于页面的正中间，并且所有浏览器效果一样呢~

        如果没有做出来只能说明你没有认真看前面的教程~《2天驾驭DIV+CSS》教程本身就属于经验性和技巧性高度整合的集合体，采取一环套一环的逐步引导的方式来教大家，所以要求大家对每节课都要认真去读，每句话都要认真品味，这样做出来的页面才能很好的兼容多种浏览器，并且代码高度精简，页面加载速度也大大提升！

第一步的源代码：  【第四课】导航条 - 经典导航1.rar (1.43 KB, 下载次数: 3972) 




【第二步】

        盒子做好了，我们就要往里面放导航条了，导航条的内容为“W3Cfuns、厘米学院、培训课程、我要充电、前端职业生涯、课程答疑”，如果我们把这些内容(目前有6个)，当成酒杯的话，如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，但是我们平时会用一个隔板将每个酒杯隔开，这样就使酒杯很有序的放入盒子，并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“无序列表”，起个英文名字叫：ul,里面的每个单元格我们也给起个英文名字叫“li”，大家想想里面的这个ul是不是和盒子里面的空间一样大，小了，酒杯放不进去，大了杯子就会不稳，所以我们定义ul的时候大小一定要和外面的盒子一样大，到这里，应该有点思路了吧~

HTML代码

1. <div id="nav">
       <ul>
           <li>W3Cfunsli>
           <li>厘米学院li>
           <li>培训课程li>
           <li>我要充电li>
           <li>前端职业生涯li>
           <li>课程答疑li>
       ul>
   div>

    

CSS代码：

1. #nav ul{
           width:960px;
           height:35px;
   }

    

效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)：

        效果不一样，为什么？在IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想~~~

        时间到！想不出来也没关系，我们一起分析一下，首先ul是什么标签？
        是块状元素吧，ul里面的li标签也是块状元素，所以li也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个

,所以他们六个就像台阶似的纵向排列起来了，如果想让他们横向排列，用浮动Float就可以了，可是让谁浮动呢，当然是

标签喽~代码如下：

1. #nav ul li{ float:left;}

    

效果是不是和下面的一样呢

大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的
        1）盒子(#nav)高度不一样，
        2) 在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！

解决上面这两个问题，也很容易，如下：
        1）到目前这步，用到了两个新的标签ul和li，标签ul和li有没有进行重置？只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中，“body,div,ul,li{padding:0; margin:0;}”
        2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在ul标签的CSS属性中加入“list-style:none;”就OK了。

现在再瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~

如果你做到这里的效果和我说的不一样，没关系，我把第二步的源代码发出来，对着上面说的再看看，就很容易学会了。

第二步的源代码：  【第四课】导航条 - 经典导航2.rar (1.59 KB, 下载次数: 1358) 




【第三步】

        第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。
好~！我们现在就将他们分开！设置

标签的宽度为100像素：

CSS代码：

1. #nav ul li{
   width:100px;
   float:left;
   }

    

为了便于观察我们暂且将

标签的背景设置成红色(设置背景色，是页面布局中一个很重要的方法，便于查看块状元素区域范围)

CSS代码：

1. #nav ul li{
   width:100px;
   float:left;
   background:#f00;
   }

    

效果如下：

        瞧瞧，发现问题了吧，我们的

标签的高度并没有和我们的盒子的高度一样，这就是为什么在布局页面的时候，经常会设置一下背景色，就是这个道理，不然的话，你发现不了隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低!

        现在暂不把

标签的背景色去掉，当我们把它调成我们需要的效果的时候再去掉！
继续，我们把li的高度设置成盒子的高度35像素，代码自己写，怎么样，高度一样了吧，但是文字却位于顶端，如何将它设置成居中呢，对喽~设置行距（如果你不会，建议你看看这篇文章《两种方法实现垂直居中》），在

的CSS代码中再加入下面这句代码：

1. line-height:35px;

    

效果是不是和下图一样呢

好，文字的垂直居中解决了，轮到水平居中了，这个就容易了，直接在

的CSS代码中再加入下面这句代码：

1. text-align:center;

    

怎么样，效果有点意思了吧~到这里我再发一次代码，以保证大家每步都能理解学会！
第三步源代码：  【第四课】导航条 - 经典导航3.rar (1.62 KB, 下载次数: 922) 




【第四步】

        好~！做到这里，有没有发现一个问题，“前端职业生涯”与左右两边“我要充电”“课程答疑”的距离与“厘米学院”与左右两边“W3Cfuns”“课程培训”的距离是不一样的，如下图：

        这样的效果并不是我们想要的，导航条上的每一个项之间的距离应该是相等的，这才是我们要的，为了寻找原因，我们给li设置一个宽度为1px的右外边距：

      margin-right:1px;

这样我们就可以看清楚每个li的范围，如下图

        这时候应该发现问题的原因了吧，因为我们的

标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩自适应的，那这时候我们就需要去掉其宽度，这时候

的宽度就会缩小至文字的宽度，如下图：

        如果我们这时再添加一些文字(把我们的酒杯换成一个大个的)，这个

也会跟着变大，大家去掉宽度后试试，是不是这个样子，这样我们的导航条就比较灵活了，不会对“酒杯”的大小有所顾忌了！

虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就ok了，这里设置边距为10px，在

标签的CSS代码内加上下面代码，

       padding:0 10px;

效果是不是这样

无论你的“杯子”是增大还是缩小，

不但宽度会随之增大缩小，但是杯子和杯子之间的距离永远不变！怎么样有点意思吧~！

然后我们再将li的背景色和右外边距去掉，得到的效果如下：

第四步的源代码 :  【第四课】导航条 - 经典导航4.rar (1.62 KB, 下载次数: 1575) 

【第四课】导航条(下)

上节课我们将导航条做成了下面的效果

因为导航条的每一项是需要点击的，也就是说导航条的每一项都是链接，这个链接放到哪里呢？当然是要放在盒子里，哪个盒子呢？答案是：标签li这个盒子。


【第五步】
1）给导航的每一项加上链接；
2）链接文字大小修改为12px;
3）并且规定链接样式，鼠标移上去和移出的效果；


制作方法：
1）导航加链接，为了使导航更具有真实性，我们这里就用“厘米学院”的真实网址，大家自己练习的时候，链接地址就随意了~
HTML代码：

1. <div id="nav">
       <ul>
           <li><a href="http://www.w3cfuns.com">W3Cfunsa>li>
           <li><a href="http://www.w3cstudy.com">厘米学院a>li>
           <li><a href="http://www.w3cstudy.com/course.aspx">培训课程a>li>
           <li><a href="http://www.w3cstudy.com/apply.aspx">我要充电a>li>
           <li><a href="http://www.w3cstudy.com/career.aspx">前端职业生涯a>li>
           <li><a href="http://www.w3cstudy.com/faq.aspx">课程答疑a>li>
       ul>
   div>

    

2) 文字大小12像素，这里的文字指的是链接a，所以我们对a进行样式设置，

CSS代码

1. a{font-size:12px;}

    

3）鼠标移动上面和移出效果，文字默认状态时黑色无下划线的链接，鼠标移至上方，链接颜色变为白色并带有下划线，鼠标移出后还原为默认状态。

CSS代码

1. #nav ul li a{color:#333; text-decoration:none;}
   #nav ul li a:hover{color:#fff; text-decoration:underline;}

    

注意：在这个例子中，我们可以将（2）和（3）合并

CSS代码

1. #nav ul li a{font-size:12px; color:#333; text-decoration:none;}
   #nav ul li a:hover{color:#fff; text-decoration:underline;}

    

效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接

第五步源代码：  【第四课】导航条 - 经典导航5.rar (1.73 KB, 下载次数: 939) 

到这里，基本上一个导航条就出来了~不过为了能让大家技能再提高一个层次，我引导大家继续对导航条进行完善。




【第六步】
如果我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤
首先把链接a加上一个背景，以方便看出来链接a的区域

1. #nav ul li a{font-size:12px; color:#333; text-decoration:none; background:#0FF;}

    

怎么样，知道a的区域了吧

从上面可以看出，鼠标移至链接上“箭头”转换为“手”的有效区域就是亮蓝色区域，如果将a的高度设定为35px和盒子一样高度，那么这个有效区域的高度就会变为35px，这样用户体验比较好，现在网页上的导航条基本上都是鼠标移至这个区域“箭头”就会转换为“手”状，于是我给a设置一个高度“height:35px;”，代码如下：

1. #nav ul li a{height:35px; font-size:12px;  color:#333; text-decoration:none; background:#0FF;}

    

可是不管我怎么刷新浏览器，高度都没有任何变化，不起作用，这是为什么呢？！

原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和height只是针对块状元素，说到这里，解决办法就出来了，只要我们把内联元素a转化成块状元素就可以了，我们用“display:block;”将内联元素转化成块状元素。大家加上这段代码，先不要刷新预览页面效果，闭上眼想想界面会变成什么样子？

1. #nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF;}

    

在FireFox和IE6里面显示的实际效果却是？！？！

        两款浏览器显示效果居然大相径庭，这是在页面布局中经常出现的情况，实际效果与期望的效果不同，这就需要大家在平时多去总结。

        回归问题，IE6中为什么所有链接纵向排列了呢？其实这个也很简单，IE认为a既然转化成块状元素，就拥有块状元素的特性---霸道，它是不允许其他元素和它同一行，再加上也没有对a的宽度进行设定，所以才导致IE6中这么显示，不过FF中为什么不这样呢，和我们想象的一样，那是因为FireFox认为a即使为块状元素，也应该受到外面

元素的影响，所以如此显示。

        究竟以谁为标准？
        因为大家都认为FF是标准浏览器，所以大家可以以FF为标准，不过我认为，不用管谁标准不标准，那都是相对的，大家不要在这个问题上浪费精力，应该将精力用在思考如何提高页面的浏览器兼容性，只要做出来的效果是我们想要的就行！

        如何解决？
        其实解决的方法也很简单，只需要在链接a的CSS代码中加入“float:left;”

1. #nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF; float:left;}

    

问题迎刃而解，如果到这里你仍旧不明白为何如此解决，说明你没有真正理解前面的课，特别是第二节的课，怎么做？你应该知道....回去再品品去~

第六步源代码：  【第四课】导航条 - 经典导航6.rar (1.75 KB, 下载次数: 654) 




【第七步】

但是这样你不觉着，每个链接的左边和右边是不是太挤了，紧贴着a区域的左侧和右侧，应该怎么做？还是很简单，只需要再加上一句话“ padding:0 10px;”

1. #nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF; float:left; padding:0 10px;}

    

现在再瞅瞅，是不是下面的效果

这样就不那么挤了吧，看着舒服了吧，但是这离我们想要的效果，只剩下最后一两步了，因为现在看到的连接效果是，鼠标移上去和拿开背景都是蓝色的，我们现在只需要将a链接中的背景去掉，移到a:hover的CSS代码中，并且颜色变成“#000”就ok了~

1. #nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; float:left; padding:0 10px;}
   #nav ul li a:hover{color:#fff; text-decoration:underline; background:#000;}

    

怎么样，和下面的效果一样么？

效果好多了吧，这下是我们想要的效果了吧~

第七步源代码：  【第四课】导航条 - 经典导航7.rar (1.75 KB, 下载次数: 740) 




【第八步】
现在导航条上的每个链接之间不够紧凑，如下图

这个情况形成的原因在于给li设置了“padding:0 10px;”,解决方法就是将li的CSS样式表里的“padding:0 10px;”删除就可以了，这样每个链接就变得十分紧凑，效果如下图：

另外，根据实际情况，鼠标移动到链接上后，不需要下划线，那就去掉a:hover里面的“text-decoration:underline;”就可以了。

OK！导航条搞定！最终效果是：

第八步源代码：  【第四课】导航条 - 经典导航8.rar (1.75 KB, 下载次数: 1949) 




【进阶思考】
        在本节的导航条实例中，一开始我们就给导航条外面设置了一个div盒子，并设定id为“nav”，大家可以思考一下，如果不设置这个div盒子，而是将同为块状元素的ul标签作为导航的盒子是否可以呢？如果可以的话，我们的结构就少了一层，代码就更精简了，页面加载速度也就会快些。




【结束语】
        大家还可以把背景设置成其他颜色，用图片也可以！下面的漂亮的导航条就是咱们最经典的导航条演变而来，有兴趣的可以尝试一下！

现在大家明白，为什么一开始我说这款导航条可以演变出成千上万的不同特色的导航条了吧~万变不离其宗！

第四课的思路就是这样的，如果吃透了这节课，那么以后什么样子的导航都能很轻易作出来，如果你再和js很好的结合起来用~你就可以很自信的向老板提出加薪了！！！^_^

 

【大练习】前四节课大练习之简单页面布局

      为大家设计了一个大练习，用到的知识点，全部是前四节的内容，如果您能够完全理解前四节内容，你可以在一个小时内完成！

        图片已经帮大家切割好了，直接下载就可以，如果想自己切图的话，用到的文字可以去PSD源文件里面复制，PSD源文件也已经发上来了，具体如何制作，怎么制作标准，有哪些技巧，下节课我来引导着大家完成。

已切分的图片下载：  第四课大练习已切分的图片.rar (254.43 KB, 下载次数: 11212) 
PSD源文件下载：  第四课大练习PSD源文件.rar (2.93 MB, 下载次数: 15335) 

 

 

【第五课】浮动布局之结构设计

《前四节大练习》做的怎么样？有没有遇到困难？如果有，没关系，这节教大家掌握“浮动布局页面技能”。

这节主要讲讲页面的结构设计，结构设计的好坏直接影响到页面的加载速度，以及搜索引擎的抓取，所以大家要认真对待。

【第一步】
首先我们需要对页面进行分析，由几大块组成，从效果图上不难看出，由四大块组成“头部版块、广告版块、内容版块、页底版块”，分别给他们起个名字如下：
        头部版块：header
        广告版块：banner
        内容版块：content
        页底版块：footer

这样就可以很轻松的将页面第一层结构写出来
HTML代码：

复制代码

第一步源代码： 浮动布局页面1.rar (255.16 KB, 下载次数: 2345) 




【第二步】
头部版块有两部分组成，左侧的logo和右侧的导航条
1）网站logo一般是张图片，而且是可以点击的，点击后回到首页，所以logo部分的结构为：

1. <div id="logo">
       <a href="http://www.w3cstudy.com">
           <img src="images/logo.png" />
       a>
   div>

    

2）导航nav我们肯定要用标签ul和li，而li里面内容又是链接，在加上真实的链接信息后，导航条部分的结构如下：

1. <ul id="nav">
        <li><a href="http://www.w3cstudy.com">首 页a>li>
        <li><a href="http://www.w3cstudy.com/course.aspx">培训课程a>li>
        <li><a href="http://www.w3cstudy.com/students.aspx">优秀学员a>li>
        <li><a href="http://www.w3cstudy.com/faq.aspx">课程疑问a>li>
        <li><a href="http://www.w3cstudy.com/career.aspx">职业生涯a>li>
        <li><a href="http://www.w3cfuns.com/">学员社区a>li>
        <li><a href="http://blog.w3cstudy.com/">官方博客a>li>
        <li><a href="http://www.w3cstudy.com/address.aspx">学院地址a>li>
   ul>

    

到此，整个头部的结构设计完成，完整的结构如下：

1. <div id="header">
        <div id="logo">
             <a href="http://www.w3cstudy.com"><img src="images/logo.png" />a>
        div>
        <ul id="nav">
             <li><a href="http://www.w3cstudy.com">首 页a>li>
             <li><a href="http://www.w3cstudy.com/course.aspx">培训课程a>li>
             <li><a href="http://www.w3cstudy.com/students.aspx">优秀学员a>li>
             <li><a href="http://www.w3cstudy.com/faq.aspx">课程疑问a>li>
             <li><a href="http://www.w3cstudy.com/career.aspx">职业生涯a>li>
             <li><a href="http://www.w3cfuns.com/">学员社区a>li>
             <li><a href="http://blog.w3cstudy.com/">官方博客a>li>
             <li><a href="http://www.w3cstudy.com/address.aspx">学院地址a>li>
        ul>
   div>

    

第二步源代码：  浮动布局页面2.rar (255.36 KB, 下载次数: 1574) 




【第三步】
Banner部分在设计中是一款“拉洋片”效果，在布局页面的时候，我们只需要将其中的一个图片放在此处就可以，因为广告也是可以点击的，所以就需要在图片外面加上链接，那么结构代码如下：

1. <div id="banner">
       <a href="http://www.w3cstudy.com"><img src="images/banner.jpg" />a>
   div>

    

第三步源代码：  浮动布局页面3.rar (255.37 KB, 下载次数: 871) 




【第四步】
内容content版块呢，是有左右两部分组成，左侧我们虽然可以起名为left，右侧为right，但是我们不要这么命名，左侧部分仔细看看其实主要是文章，那么我们就可以考虑给他起个id名为“article”，右侧为资讯信息类的内容，所以id名为“info”，这样会更加语义化一些，更容易让人清楚这个版块的作用，及内容信息。

当然，我们可以将“left”和“article”组合，用骆驼命名法来命名左侧的版块id为“leftArticle”，右侧的id为“rightInfo”，OK，第二层结构如下：

1. <div id="content">
      <div id="leftArticle">div>
      <div id="rightInfo">div>
   div>

    

下面我们开始分析内容content版块的第三层，从左侧的leftArticle开始
1）左侧的文章版块，分“文章图片，文章标题和文章内容”三部分
文章图片：从功能上来说文章顶部图片应该是可以点击的，点击后进入文章详情，所以图片外面还是要被链接a包含的；

1. <a href="http://blog.w3cstudy.com/?p=5"><img src="images/articleBanner.jpg" />a>

    

文章标题：文章标题就是文章内容的总结，对搜索引擎来说文章标题的权重要比内容要高，怎么才能让搜索引擎知道这里是标题呢，当然是用标题标签h1~h6标签了，这里我们选用h1，还有一点不要忘记标题也是可以点击的，所以也要用a进行包含，

1. <h1><a href="http://blog.w3cstudy.com/?p=5">Web前端开发工程师好找工作吗？a>h1>

    

文章内容:既然是内容，肯定就少不了段落标签p了，有几段文字就用几个“

”,这样文章部分的结构，就逐渐清晰明朗了，

 

<p>据09年全国Web前端开发行业调查统计显示，09年大型企业对于Web前端开发人才需求紧缺。 Web前端开发目前是一种新兴职业，专业的前端开发人员绝大部分存在于大型企业中，如腾讯、百度等，换种说法就是：选择从事Web前端开发就等于你的一只脚已经迈进了腾讯、百度等高薪企业。p>
<p>... ...p>
<p>... ...p>
<p>... ...p>

 

 

复制代码

leftArticle版块OK！：
到此步源代码：  浮动布局页面4-1.rar (256.09 KB, 下载次数: 1315) 

左侧布局完成，那么右侧又如何布局呢，听我细细分解，首先右侧分两个版块“职业生涯”和“好职推荐”，仔细看会发现他们有共同的结构，共同的样式，只要将其中一个做出来，另外一个结构和样式直接复用就可以了。

那就分析上面的“职业生涯”的结构，首先有个标题，其次下面是标题的一个列表，这样很容易让人想到用“ul+li”的组合，但是我们这里有一个更好方法，用“dl+dt+dd”组合，这种组合在这里是一个很不错的选择，要比“ul+li”要好，很多同学对“dl+dt+dd”组合不熟悉，这里正好练一下，熟悉一下，经过上面的分析我们就可以得出“职业生涯”版块的结构。

1. <dl>
      <dt>职业生涯dt>
      <dd><a href="http://blog.w3cstudy.com/?p=60">Web前端开发工程师需要掌握哪些核心技能？a>dd>
      <dd><a href="http://blog.w3cstudy.com/?p=51">我是程序员，有必要进行web前端开发的学习吗?a>dd>
      <dd><a href="http://blog.w3cstudy.com/?p=32">我是网站美工，目前发展遇到瓶颈，该如何解决？a>dd>
      <dd><a href="http://blog.w3cstudy.com/?p=22">我适合从事web前端开发行业吗？a>dd>
      <dd><a href="http://blog.w3cstudy.com/?p=15">Web前端工程师如何给自己定位？a>dd>
       <dd><a href="http://blog.w3cstudy.com/?p=5">Web前端开发工程师好找工作吗？a>dd>
   dl>

    

“职业生涯”下面的“好职推荐”版块就好布局了，换换标题，换换内容就可以了
rightInfo版块OK！也就是说整个Content版块结构设计完成！
到此步源代码：  浮动布局页面4-2.rar (256.59 KB, 下载次数: 1600) 




【第五步】
关于页底版块的布局，效果图上是有两行文字组成，第一行文字全部为链接，

1. <p>
   <a href="#">关于W3CStudya> | <a href="#">广告服务a> | <a href="#">提交问题a> | <a href="#">联系我们a> | <a href="#">版权声明a> | <a href="#">关于隐私a> | <a href="#">合作伙伴a>
   p>

    

第二行左边的是备案号，右侧是版权信息

1. <p>
     <a href="#">京ICP备10055601号a>  All rights(C)2008-2010 Reserved
   <p>

    

到这里页底版块结构也出来了

1. <div id="footer">
   <p>
   <a href="#">关于W3CStudya> | <a 
   href="#">广告服务a> | <a href="#">提交问题a> | <a 
   href="#">联系我们a> | <a href="#">版权声明a> | <a 
   href="#">关于隐私a> | <a href="#">合作伙伴a>
   p>
   <p>
     <a href="#">京ICP备10055601号a>  All rights(C)2008-2010 Reserved
   <p>
   div>

    

但是这么做并不是最好的，既然文字分两行，那就在第一行的最后加上一个
就可以了，每个标签都有自己的用途，没有必要每一行都用p标签包含起来，这样做我们的结构是不是又少一层，代码是不是更精简了呢，所以结构就可以精简为:

1. <div id="footer">
   <a href="#">关于W3CStudya> | <a href="#">广告服务a> | <a href="#">提交问题a> | <a href="#">联系我们a> | <a href="#">版权声明a> | <a href="#">关于隐私a> | <a href="#">合作伙伴a>
   <br/>
   <a href="#">京ICP备10055601号a> All rights(C)2008-2010 Reserved
   div>

    

OK 了~！
至此，我们整个页面结构设计完成！怎么样挺简单吧，这节把页面的骨架搭建完成，下节课我们就讲一下样式设计，给页面穿上衣服，成为一个真正的页面！

本节最终源代码为：  浮动布局页面5.rar (256.71 KB, 下载次数: 3512) 

 

【第五课】浮动布局之表现设计

W3C标准建议大家结构和表现相分离，“结构”就是上节课我们搭建的HTML页面框架，“表现”则是这节课的内容，给页面穿上衣服，也就是下面要学的“CSS样式设计”，样式设计的好坏也会直接影响页面的加载速度以及改版的复杂度。我们紧接着上节课

【第六步】
为了页面能够具有更好的兼容性，所以在设计表现的时候，首先要对标签重置，不明白的可以去看看[基础二] CSS选择器的通用选择器部分，在上节设计的结构里面，我们用到哪些标签就重置哪些标签，上节课用到“body,div,p,ul,li,dl,dt,dd,h1,a”这么几个标签，所以重置代码为：

1. body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;}

    

打开效果图，我们先看一下主背景，是一个从上至下由蓝色渐变为白色，且带有云彩的背景，这个无规律的渐变背景我们应该怎么做？

针对背景的渐变我们好处理，将渐变背景切割为一个宽度为10px的小图，起名为bg，然后水平方向平铺（repeat-x）

而对于云彩这种无规律的背景，直接切割出来作为背景，起名为clouds，如下图：

这两张背景图，在每步最后提供的源代码的images文件夹内可以找到，名子分别为bg.gif和clouds.gif。

        这么处理的好处是为了提升网页的用户体验，如果我们不做任何处理直接将页面内的背景整个切割下来，当用户打开页面，会看到背景一片空白，然后瞬间显示背景，给用户的感觉很突兀，而我们的做法是，先加载前面那个10px宽度的小图片，这样背景加载速度快，用户打开网页的时候，先把这种背景图加载上，不至于展现在浏览者前面的是一片空白，然后等云彩背景下载完毕后，再加载在页面内，用户感觉会很舒服，这就是为什么Web前端开发人员还要懂一些用户体验设计方面的知识。

        具体如何实现背景的显示顺序，方法有很多，针对本例，最适用的办法就是设置为不同的盒子的背景，bg.gif就当做html盒子的背景，而clouds.gif就当做body盒子的背景，因为网页会先加载html盒子，然后再加载body盒子，那么CSS代码如下：

 

html{background:url(../images/bg.gif) repeat-x;}
body{background:url(../images/clouds.gif) repeat-x;}

效果是像下面这样，背景加载上了

 

此时内容有点乱这是肯定的，因为我们还没有对他们定义样式~

第六步源代码：  浮动布局页面6.rar (256.84 KB, 下载次数: 1676) 



【第七步】
        页面的宽度为1000px，所以四大板块header、banner、content、footer的宽度也为1000px，且水平居中于浏览器，所以用CSS集体声明的方法，对四大板块的共同样式进行定义：

 

#header,#banner,#content,#footer{width:1000px;  margin:0 auto;}

其中“margin:0 auto；”的作用就是将页面元素水平居中，这个很重要，布局页面经常用到需要记住！

 

现在再看一下效果，四大板块是不是全部水平居中于浏览器了~

        另外效果图中的头部是与上边沿有45px的距离，为实现这个效果，我们采用设置body上内边距的办法,将padding-top加到body的样式内：

CSS代码

 

body{background:url(../images/clouds.gif) repeat-x; padding-top:45px;}

离我们的最后完成页面制作又前进一步~

 

第七步源代码：  浮动布局页面7.rar (256.9 KB, 下载次数: 891) 



【第八步】
注意：第八步细节上的内容多些，有一点做的不到位，就会导致页面兼容性问题，所以大家耐下心来，仔细品味每一句话。

        大家有没有发现一个问题，网页里所有能够点击的链接图片，全部都有一个宽度为2px的紫色边框，不美观并且还会导致后面做出的页面出现兼容性的问题，这个不是我们想要的，所以我们要将这个边框去掉！CSS代码如下所写：

 

img{border:none;}

上面这段代码是对img标签边框的重置，所以我们要把它和之前标签内外边距重置的代码放一块，如下：

 

 

body,div,p,ul,li,dl,dt,dd,h1,a,img{margin:0; padding:0;}
img{border:none;}

这样页面上的图片清爽多了，后面我们还有对其他标签的重置，用到的时候，我们再添加到第二条的后面。

 

上节我们分析过了，头部header包含两部分，左侧的logo和右侧的导航nav。

先说说左侧logo部分，回忆一下上节课logo部分的结构：
HTML代码：

 

<div id="logo">
  <a href="http://www.w3cstudy.com"><img src="images/logo.png" />a>
div>

分析一下上面的结构，首先最外层由一个块状元素div构成的盒子，第二层由内联元素a构成，第三层由内联元素img构成，如果对这些常用标签分不清哪些是块状元素哪些是内联元素，就去看看xHTML标签页面。

 

        接着上面，img标签是一个很特别的标签，因为它本身是内联元素，但却体现出块状元素宽高起作用的特性，这是很矛盾的地方，这就为页面布局埋下隐患，要么为内联元素，要么为块状元素，在这里我们更需要它的块状元素的属性，所以我们将身为内联元素的img标签转化为块状元素，用“display:block; ”。

        既然第三层的img转化为块状元素，根据W3C规范，内联元素是不能包含块状元素的，所以我们还必须把第二层的链接a，也要转化为块状元素，还是用“display:block; ”。

        我们希望点击logo图片的任何一个地方都可以回到首页，也就是说第二层a的有效点击区域大小就为图片的大小，而外面的盒子的大小也等于图片的大小。

那么相应的样式代码如下：
CSS代码：

 

#logo{width:220px; height:54px; float:left; background:#991616;}
#logo a{display:block; width:220px; height:54px;}
#logo a img{display:block;}

针对代码中的“#logo a img{}”的写法不清楚的，就去看看[基础二] CSS选择器的选择器的嵌套

 

代码中的“float:left；”的作用这里不再说了，不明白的同学去看一下[第二课] 浮动

代码中的“background:#991616;”是一个从logo图片上取下来的红色，目的和前面的设置页面背景一样，为了保证在网速比较慢的情况下，logo图片还未加载完成之时，先显示红色背景，增强用户体验！

此步源代码：  浮动布局页面8-1.rar (256.98 KB, 下载次数: 729) 


        我们就可以进一步思考，既然a已经设置了宽度和高度，外面的那个id为logo的div，其实就没有存在的必要了，倒不如直接去掉外层的div，并将a的id设置为logo，这样我们的结构就少一层，代码就少一些，这正是我们期望的，所以logo部分的HTML结构就可以变为：

 

<a id="logo" href="http://www.w3cstudy.com"><img src="images/logo.png" />a>

CSS代码就可以变为：

 

 

#logo{display:block; width:220px; height:54px; float:left; background:#991616;}

而“#logo a img{display:block;}”就要转化为

 

 

#logo img{display:block;}

因为现在的#logo已经为a的id了，不再是原来最外层的div的id。

 

此步源代码：  浮动布局页面8-2.rar (256.97 KB, 下载次数: 814) 


        导航nav这块的CSS代码就不说了，如果CSS代码写不出来，就去回顾一下[第四课] 导航条(上) | 导航条(下)
这里直接将CSS代码列出来

 

#nav{width:780px; height:54px; float:left; background:#393838; list-style:none;}
#nav li{float:left;}
#nav li a{display:block; width:86px; height:54px;  line-height:54px; text-align:center; font-size:12px; color:#ccc; text-decoration:none; float:left;}
#nav li a:hover{color:#fff;}

有一点需要补充，现在我们实现的效果是鼠标移至导航条栏目的上面，文字由灰色变为白色，鼠标移出，文字又转为灰色，而处于激活状态的栏目的背景是一个灰色且两边带有光影的图片，如下图：

 

激活状态的栏目是不受鼠标的移入和移出影响的，这个应该怎么做呢？我们需要定义一个类选择器，专门加在处于激活状态的栏目上：
CSS代码

 

#nav li .navActive{ background:url(../images/navHoverBg.png) no-repeat; color:#fff;}

如果激活状态的栏目是“首页”，结构代码就这么写

 

HTML代码

 

<li><a href="http://www.w3cstudy.com" class="navActive">首 页a>li>

到这里header的样式定义基本完成

 

此步源代码：  浮动布局页面8-3.rar (257.12 KB, 下载次数: 1442) 

注意：一般情况下，很多人会认为header部分的样式定义就完成了，其实没有注意到这里面隐藏着一个潜在危险，就是

高度自适应的问题，尽管里面的logo和导航条都设置了高度，但是header的高度在IE7、IE8、IE9、FF内，高度是不能自动适应里面元素的高度，为了更清楚的说明问题，大家可以将HTML结构代码中的导航条部分删除，然后再给header设置一个背景色为黑色#000，看看header的高度是否能够自适应logo的高度。

删除导航条代码后的header结构
HTML代码

1. <div id="header">
           <a  id="logo" href="http://www.w3cstudy.com"><img src="images/logo.png" />a>
   div>

    

CSS代码

1. #header{background:#000;}

    

在IE6和FF内的显示效果如下：

        发现问题了没有，在FireFox内，看不到背景为黑色的header，因为他不能够自适应内部元素的高度，所以它的高度变为零，而在ie6里面却可以正常显示，这是一个很严重的问题，如果高度不能自适应的话，那内部子元素logo和nav的浮动产生的影响就会“外泄”，对header外面的版块产生影响，从而产生版块错位！

        解决这个问题其实很简单，不是高度不能自适应嘛，那就给他设置一个高度，高度值为子级元素的高度，那这样header这个盒子就可以刚好装下内部的子logo和nav，而不至于浮动的影响“外泄”，但是这种办法，不够灵活，如果有一天header内部多了一些元素，那就需要再次计算一下子级元素的高度，比较麻烦，下面介绍第二种方法，在不设置header的高度情况下，无论内部元素再多，header的高度也会自动适应，直接在header的样式里写入“overflow:hidden;”就可以了

1. #header{overflow:hidden;}

    

现在再去看看FF下的页面，是不是黑色的header显示出来了，既然高度自适应了，黑色的背景也就没用了，去掉它，然后再在HTML结构代码内恢复导航代码，这样做才是真正的完成了页面header部分的样式定义~

一个Web前端开发人员是否专业，就体现在这些小细节上！

第八步源代码：  浮动布局页面8-4.rar (257.13 KB, 下载次数: 956) 




【第九步】
        针对banner版块的样式定义，相对第八步就简单多了，结构和logo版块一样，对结构进行优化，将最外层的div去掉，然后将里面的a定义为banner，所以banner版块的结构如下：

1. <a id="banner" href="http://www.w3cstudy.com">
                 <img src="images/banner.jpg" />
   a>

    

CSS代码：

1. #banner{display:block; width:1000px; height:292px; margin:10px auto;}
   #banner img{display:block;}

    

其中“margin:10px auto;”等价于“margin:10px auto 10px auto;”,四个数值的顺序是“上右下左”，根据第七步我们知道如果设置左右为auto，那么版块就会居中，但是在这里我们还想让banner距离上面的header和下面的content的距离为10px，那就设置上下为10px就可以了，于是得出了“margin:10px auto;”

        到这里，效果和设计上的是一样的，但是作为Web前端开发人员，一定要思考全面，如果图片的大小不是1000px*292px怎么办？图片大了，就会溢出，图片小了不美观，所以我们这里还要加一句，无论图片的大小如何，只要在页面上显示，宽高永远是1000px*292px

1. #banner img{display:block; width:1000px; height:292px;}

    

这句话的意思就是#banner里面的图片大小为1000px*292px，无论图片原本大小，只要在#banner内，就是这个宽高。
如果第九步里面有看不明白的，说明第八步没有仔细看，返回去再去学习一下。

第九步源代码：  浮动布局页面9.rar (257.17 KB, 下载次数: 1130) 

第九步完成后的效果

【第十步】
        下面将针对content版块进行样式设计，从效果图上我们可以看出，content版块分为两块，左侧的文章（leftArticle）和右侧的资讯（rightInfo）。

        首先分析下思路，content内部的leftArticle和rightInfo两个都要左侧浮动，内部元素浮动就会导致外面的content的高度不能够自适应内部元素的高度，所以我们首先要在content的CSS代码中加入“overflow:hidden;”,顺便将背景色、文字大小和文字行距也给定义了，如下：

1. #content{overflow:hidden; background:#eaeaea; font-size:12px; line-height:24px;}

    

然后我们再针对leftArticle和rightInfo单独定义样式，仔细观察效果图能够很清楚的发现，leftArticle和rightInfo上下左右都有10像素的外边距，如果我们用左侧浮动来实现2栏效果，在存在外边距的情况下就会出现IE6的双倍边距Bug（在[第二课] 浮动讲过），为了避免出现bug，我们就利用“display:inline;”,所以他们两个的CSS就这么定义

1. #leftArticle,#rightInfo{margin:10px; float:left; display:inline;}

    

OK,他们两个的公共样式定义完了，下面就开始对他们单个定义，在这之前，你需要意识到，原本leftArticle和rightInfo的宽度分别为680px和320px，当存在10px的外边距后，如果再给他们用CSS定义宽度的话，那么宽度的数值就变为660px和300px，都要减去20像素（为什么是20px，因为存在10px左外边距和10px右外边距）

1. #leftArticle{width:660px;}
   #rightInfo{width:300px;}

    

现在再看看效果，页面雏形是不是已经出来了~，开心吧~

此步源代码：  浮动布局页面10-1.rar (257.23 KB, 下载次数: 896) 

        我们继续观察左侧的leftArticle，是不是有个图片，图片是不是可以点击的，以后遇到图片链接这种情况，第一反应就是先将这两块给设置成块状元素，我们在这里用骆驼命名法，给图片外面的链接起个id叫articlePicA，意思是文章图片外部的链接

1. <a id="articlePicA" href="http://blog.w3cstudy.com/?p=5"><img src="images/articleBanner.jpg" />a>

    

相应的CSS如下

1. #articlePicA,#articlePicA img{display:block;}

    

图片链接搞定！下面轮到文章的标题，在HTML结构中用的是

标签，现在我们要按照效果图上的设计，标题距离上面的图片和下方的文字的距离为20px，文字的大小为24px，首选字体为“微软雅黑”，其次为“黑体”

1. #leftArticle h1{margin:20px 0; font-size:24px; font-family:"微软雅黑", "黑体";}

    

对于标题与上下的距离这里用的是外边距margin来实现，当然也可以用padding，如果这样就会把盒子给撑大，就需要对文字再次定义，让其垂直居中，反而麻烦了，方法不止一种，作为Web前端开发工程师，一定要用最简单的代码实现效果，这也是体现是否专业的一方面。

        预览页面后，发现字体变了，但是大小却没有变化，原因是由于浏览器存在默认样式表产生的，所以我们就需要对h1进行重置，如下：

1. h1{font-size:100%;}

    

加上这句话是不是我们前面设置的h1标签的文字大小就变为24px了

        既然是重置代码，我们就需要将它和其他的重置代码放一块，好，现在我们的重置代码有三行了，分别是针对标签的内外边距的重置，图片边框的重置，以及h1文字大小的重置。

1. body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;}
   img{border:none;}
   h1{font-size:100%;}

    

将制作出来的标题和效果图中的标题对比，发现效果图内的链接是红色的，鼠标移上去会出现下划线，为实现这个效果就需要对标题

内的链接的样式进行定义

1. #leftArticle h1 a{color:#900; text-decoration:none;}
   #leftArticle h1 a:hover{text-decoration:underline;}

    

标题定义完了，下面说说内容，还是要和效果图进行对比，对比的结果是效果图上的文字颜色并不是纯黑，而是数值为“#333”的黑色，并且每段文字都会缩进两个文字，每段文字距离下段文字之间的距离是30px，文字大小为14px，CSS如下定义：

1. #leftArticle p{color:#333; text-indent:2em; margin-bottom:30px; font-size:14px;}

    

怎么样到这里左侧leftArticle的效果是不是和效果图里的一样了呢

此步源代码：  浮动布局页面10-2.rar (257.37 KB, 下载次数: 918) 


        下面轮到定义rightInfo版块的样式了，从效果图里不难看出，“职业生涯”和“好职推荐”之间有10px的距离，实现这个效果我们就采取设置dl的下外边距的方法

1. #rightInfo dl{margin-bottom:10px;}

    

针对每个版块的标题dt的定义，如下：

1. #rightInfo dl dt{
     background:url(../images/title.jpg) no-repeat;
     height:32px;
     line-height:32px; 
     color:#FFF; 
     font-size:14px; 
     font-weight:bold; 
     text-indent:20px;
   }

    

背景我们就直接采用已经切好的title.jpg且不平铺，dt高度就是title.jpg的高度32px，为了使文字垂直居中，采取设置行高的方法，不会此方法的去看文章《两种方法实现CSS垂直居中》，然后设置文字大小为14px、粗细为加粗、以及文字缩进20px。

下面是针对dd的定义

1. #rightInfo dl dd{
     height:24px; 
     line-height:24px;
     background:url(../images/dot.gif) no-repeat 7px 10px; 
     text-indent:16px;
   }

    

重点解释一下第三句，第三句的目的是将做好的小红点图片dot.gif设置为dd的背景且不平铺，距离dd左侧的距离为7px，上面的距离为10px；

dd里面的链接颜色还不是我们效果图上的效果，定义如下：

1. #rightInfo dl dd a{color:#333; text-decoration:none;}
   #rightInfo dl dd a:hover{color:#900; text-decoration:underline;}

    

OK！右侧版块样式定义完成！页面效果如下：

第十步源代码：  浮动布局页面10-3.rar (257.47 KB, 下载次数: 822) 




【第十一步】
        如果前面几步掌握的不错，那么这一步就是最简单的一步，学起来会轻松很多，还是要看效果图，footer是一个颜色为#393838灰色块，与上部的content距离是10px，自身高度是70px，文字颜色为灰白色(#ccc)且水平居中,文字与footer顶部的距离为18px，行距也是18px，样式定义如下：

1. #footer{
     background:#393838; 
     height:52px;
     line-height:18px; 
     margin-top:10px; 
     padding-top:18px;
     text-align:center;
     color:#ccc;
     font-size:12px; 
   }

    

因为设置了padding-top:18px,这个上内边距，所以定义footer的高度就要由原来的高度，减去内边距，即70px-18px=52px，这样footer在视觉上的高度才是70px。

这时的效果与效果图上的很接近了，唯独就是链接的颜色和样式，加上下面的代码瞅瞅

1. #footer a{color:#ccc; text-decoration:none;}
   #footer a:hover{text-decoration:underline;}

    

怎么样页面和效果图一样了吧~！

        细心的同学也许会发现，页面内的英文的字体全部是“宋体”，不是十分的美观，不如英文常用的字体verdana，那我们就给整个页面内的文字字体设置首选字体为“verdana”，只需要在body的样式里，加入“font-family”就可以了

 

body{background:url(../images/clouds.gif) repeat-x; padding-top:45px; font-family:Verdana, Geneva, sans-serif;}

第十一步源代码：  浮动布局页面11.rar (257.51 KB, 下载次数: 3356) 

 

【结束】
此时此刻，我们将一个成品的网页设计成功的制作成网页！恭喜大家！

如果您学习的目的仅仅是将页面布局出来，那么你毕业了，如果你是Web前端开发工程师或者打算从事Web前端开发，那就不能将自己局限于“能把页面制作出来就行”，网页不只是给人看的，做出来摆在那里就行，我们要实现网页的价值！

实现网页价值，就必须先学会，如何提升页面对搜索引擎的亲和度，如何将代码高度压缩，如何提升页面加载速度，如何为企业节省互联网成本，如何提升网页的整体价值，将页面优化至极致！这些内容将在中高级课程中告诉大家。

好！下课！

 

 

【第六课】定位

        很多学习布局的同学，都卡在定位这块，难就难在相对定位与绝对定位的配合上，不知道他们两个之间具体有什么区别。

        这节课虽然文字性的内容比较多，但是基本上每一句话都很重要，如果想学好，那就耐下心来仔细看，对教程中的每个假设都要自己验证，自己总结规律，如果自己懒的证明，那就记住本节最后的话就行了。

好，上课！

提问：如果页面内某个元素没有设定position属性，那么他是否具有position属性？
回答：具有position属性，并且属性值是static。原因在于网页里任一元素的默认position属性值均是static（静态）。

上面这个问题主要是给大家补充一个知识点，很多Web前端开发工程师都不知道这点，所以在这节开头给大家补补课。

这节课主要讲讲absolute（绝对定位）和 relative（相对定位）。



【position:absolute】
意思是：绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。
为了让大家更容易理解这句话，我们举个例子

例子
制作一宽度为200px，高度为200px，背景色为红色(#900)的方块，距离浏览器左侧220px，距离浏览器顶部为100px，效果：

分析：如果想实现这个效果，我们用外边距也是可以实现的，但是我们这节学的是定位，那么我们就要用定位的知识来实现。

要知道，当一个元素具有了定位属性（特指绝对定位和相对定位）后，想把它精确定位于某一个位置，只需要设置TRBL中的任意相邻的两个就可以，针对上面的例子我们用left和top

HTML代码：

 

<div>定位div>

CSS代码：

 

1. body,div{margin:0; padding:0;}
   div{width:200px; height:200px; background:#900; position:absolute; left:220px; top:100px;}

    

源代码：  定位1.rar (1.16 KB, 下载次数: 601) 


绝对定位具有以下属性：（下面的这些属性大家自己证明，对于下面说的“父级”，就是在原有的盒子外面，在套一层宽度和高度大于原有盒子尺寸的盒子）

• 如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
• 如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
• 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。

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

• 设定TRBL
• 父级设定Position属性

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

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




【position:relative】
意思是：相对定位，他是默认参照父级的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

为了帮助大家理解上面的那句话，还是拿个例子来说明
例子：
制作一宽度为400px，高度为300px，背景色为灰色(#ccc)的方块，水平居中于浏览器，id为div1，在div1内，制作一宽度为100px，高度为100px，背景色为绿色(#090)的方块。效果：

HTML代码

1. <div id="div1">
       <div id="div2">div>
   div>

    

CSS代码

1. body,div{margin:0; padding:0;}
   #div1{width:400px; height:300px; background:#ccc;margin:0 auto;}
   #div2{width:100px; height:100px; background:#090; position:relative; }

    

从上面代码是不是可以看出，相对定位的元素div2是以父级div1的左上角为原始点的，如果需要将div2定位于div1的某处的话，肯定需要TRBL中的任意相邻两个，现在将div2定位于div1内（80px,60px）处，也就是div2距离div1的左边为80px，顶部为60px，效果如下：

为了达到这个效果，只需要给div2一个left和top的值就可以了

1. #div2{width:100px; height:100px; background:#090; position:relative; left:80px; top:60px; }

    

此步源代码：  定位2.rar (1.19 KB, 下载次数: 419) 

如果现在我们再给div1一个内边距padding:50px，那么div2以哪里为原点呢？
html代码没变和上面一样，下面只列出CSS代码

1. body,div{margin:0; padding:0;}
   #div1{width:300px; height:200px; background:#ccc; margin:0 auto; padding:50px;}
   #div2{width:100px; height:100px; background:#090; position:relative; left:80px; top:60px; }

    

效果如下：（斜线部分为内边距区域，在实际效果中是不没有的）

现在知道div2以哪里为原点了吧~



相对定位有以下属性：（同样大家在下面自己证明）

• 如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolute不同)。
• 如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolute不同)
• 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定(前半段和absolute一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolute不同)。

以上三点可以总结出，无论父级存在不存在，无论有没有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属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用relative，计算的时候不要忘记计算padding的值。
=============================================

下节课《定位应用》帮助大家更好的理解“定位”，这节课就到这里，下课！

 

 

【第七课】定位应用

上一节主要讲了下定位，今天讲一下定位如何应用，我们分别拿两个例子来重点讲解一下绝对定位(absolute)和相对定位(relative)。

【绝对定位实例】
打开厘米IT学院的首页，右上角有一个“我要充电”

鼠标移动上去会从橙色变为红色，无论浏览器的放大缩小，位置永远处于页面的右上角，大家可以打开页面看一下实际效果，地址是www.w3cstudy.com

现在我们就来做一下这个效果
分析：右上角的“我要充电”是不会跟随浏览器大小的改变，而去改变它在浏览器右上角的位置，所以这个毫不犹豫的用“绝对定位”，另外它是可以点击的，所以结构中就是链接。

思路：把身为内联元素的链接a，先转化为块状元素，设置宽高，然后将图片设置为a的背景，当鼠标移动上去的时候换背景就可以了。

这里用到这两张图片，图片大小为107像素X107像素。

  

HTML代码：

1. <a href="http://www.w3cstudy.com/apply.aspx">a>

    

CSS代码：

1. a{
     display:block;
     width:107px;
     height:107px;
     background:url(images/applyNormal.png) no-repeat;
     position:absolute;
     top:0;
     right:0;
   }
   a:hover{
     background:url(images/applyHover.png) no-repeat;
   }

    

就这么简单！放大缩小浏览器后看看，是不是永远处于右上角~这就是绝对定位。

源代码：  定位应用1.rar (68.11 KB, 下载次数: 1100) 




【相对定位实例】
如果想把“我要充电”放到banner的右上角怎么办？

根据上节课说的，只需要让外面的盒子的定位属性为相对定位relative就可以了，也就是说让banner这个盒子的position的值为relative就可以

HTML代码

1. <div id="banner">
     <a href="http://www.w3cstudy.com/apply.aspx">a>
   div>

    

CSS代码

1. body,div{margin:0; padding:0;}
   #banner{width:1000px; height:292px; background:url(../images/banner.jpg) no-repeat; position:relative; margin:0 auto;}
   a{display:block; width:107px; height:107px; background:url(../images/applyNormal.png) no-repeat; position:absolute; top:0; right:0;}
   a:hover{background:url(../images/applyHover.png) no-repeat;}

    

这个例子很好的体现了相对定位（relative）和绝对定位（absolute）如何一块使用。

源代码：  定位应用2.rar (68.18 KB, 下载次数: 996) 

【总结】
经过这两个练习，大家对定位应该掌握的差不多了，那就再仔细品味一下上节课总结的话
=============================================
如果用定位来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用 relative，计算的时候不要忘记计算padding的值。
=============================================

 

【第八课】CSS Hack

        说到浏览器兼容性问题，就必须说CSS Hack！

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

        大家必须知道一点，CSS Hack都属于个人对CSS代码的非官方修改，所以编写的CSS代码不会通过官方W3C的认证！以后经常会遇到这种情况，CSS写的正确，通过W3C验证，但是不同浏览器显示效果不一样，用了CSS Hack，显示的效果一样了，却又通不过W3C验证了，很是郁闷，不要为了标准而标准，W3C验证只是帮你检查一下CSS
语法，通过验证只不过是说明你到目前写的CSS代码没有语法错误而已，不要计较是否通过验证，只要做出来的页面代码量少，利于搜索引擎搜索，加载速度快，能为企业节省成本就可以！



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


!important

作用：用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码：

#content{
      height:960px !important;
      height:900px;
}

 

        IE7/IE8/IE9/FireFox可以识别上面附加“!important”的语句，看到附加“!important”的语句后，就不会再去执行第二句，尽管他们也“认识”第二句，但是附加“!important”的语句拥有绝对优先级，只要有它存在，第二句就不允许执行。附加“!important”语句IE6也可以识别（wnpers同学在29楼给大家举了例子），虽然可以识别但是会无视!important，就好比对面过来了一个朋友，你认识，他从你身边走过，你却没有理会对方，这就是认识但是无视了对方，IE6对!important的态度就是这样，所以IE6会执行“!important”的语句后，再去执行第二句“height:900px”,用后面的样式覆盖了前面的样式，所以在IE6下，最终的height值是900px。

        利用浏览器对加了“!important”语句的识别能力（尽管!important被IE6~IE9，FF，Chrome所识别），来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。




*(星号)

作用：用来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码：

#content{
      height:960px;
     *height:900px;
}

 

        IE8/IE9/FireFox不能识别附加有*的CSS属性语句，所以IE8/IE9/FireFox只能读第一句“height:960px;”而忽略第二句，IE6/IE7可以识别附加有*的CSS属性语句，也就是说第一句和第二句都认识，所以它们先读第一句，将高度定为960px，而后又读第二句“*height:900px;”，将高度从960px修改为900px，所以我们在IE中看到的最终效果就是高度为900px;

        利用浏览器对加了“*”语句的识别能力，来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况。

 

 

 

原文地址：http://www.w3cfuns.com/portal.php?mod=topic&topicid=13

转载于:https://www.cnblogs.com/jinhuazhe2013/p/4621610.html