收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 155393|回复: 66

[教程] 彻底弄懂CSS盒子模式一(DIV布局快速入门)

[复制链接]
发表于 2007-3-15 21:37:17 | 显示全部楼层 |阅读模式
彻底弄懂CSS盒子模式一(DIV布局快速入门)

作者:唐国辉



2.彻底弄懂CSS盒子模式二(导航栏实例) 【论坛讨论】
3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 【论坛讨论】
4.彻底弄懂CSS盒子模式四(绝对定位和相对定位) 【论坛讨论】
5.彻底弄懂CSS盒子模式五(定位强化练习) 【论坛讨论】

前言

      如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网

页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,

这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义

的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常

浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些,本人在这里就不多说,自己可以去查

找相关信息。

理解CSS盒子模型

      什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框

(border)、边界(margin), CSS盒子模式都具备这些属性。

文章附图1

文章附图1

CSS盒子模式

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那

么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于

边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等

元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS

盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,

而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要

保留多大距离。在现实生活中,假设我们在一个广场上,把不同大小和颜色的盒子,以一定的间隙和顺序摆放好,最后从广场上空往下看,

看到的图形和结构就类似我们要做的网页版面设计了,如下图。

文章附图2

文章附图2

由“盒子”堆出来的网页版面


现在对CSS盒子模式理解多少了,如果还不够透彻,继续往下看,我会在后面举例,并延用盒子的概念来解释它。

转变我们的思路

  传统的前台网页设计是这样进行的:根据要求,先考虑好主色调,要用什么类型的图片,用什么字体、颜色等等,然后再用Photoshop

这类软件自由的画出来,最后再切成小图,再不自由的通过设计HTML生成页面,改用CSS排版后,我们要转变这个思想,此时我们主要考虑

的是页面内容的语义和结构,因为一个强CSS控制的网页,等做好网页后,你还可以轻松的调你想要的网页风格,况且CSS排版的另外一个目

的是让代码易读,区块分明,强化代码重用,所以结构很重要。如果你想说我的网页设计的很复杂,到后来能不能实现那样的效果?我要告

诉你的是,如果用CSS实现不了的效果,一般用表格也是很难实现的,因为CSS的控制能力实在是太强大了,顺便说一点的是用CSS排版有一

个很实用的好处是,如果你是接单做网站的,如果你用了CSS排版网页,做到后来客户有什么不满意,特别是色调的话,那么改起来就相当

容易,甚至你还可以定制几种风格的CSS文件供客户选择,又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。

实现结构与表现分离

  在真正开始布局实践之前,再来认识一件事——结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更

新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是结构化标签,有P标签的地方表示这是一个段落区块,margin是表现属性,

我要让一个段落右缩进2字高,有些人会想到加空格,然后不断地加空格,但现在可以给P标签指定一个CSS样式:P {text-indent: 2em;},

这样结果body内容部分就如下,这没有外加任何表现控制的标签:

  1. <p>加进天涯社区有一段时间了,但一直没有时间写点东西,今天写了一篇有关CSS布局的文章,并力求通过一种通俗的语言来说明知

  2. 识点,还配以实例和图片,相信对初学CSS布局的人会带来一定的帮助。</p>
复制代码


如果还要对这个段落加上字体、字号、背景、行距等修饰,直接把对应的CSS加进P样式里就行了,不用像这样来写了:

  1. <p><font color="#FF0000" face="宋体">段落内容</font></p>
复制代码


这个是结构和表现混合一起写的,如果很多段落有统一结构和表现的话,再这样累加写下去代码就繁冗了。

再直接列一段代码加深理解结构和表现相分离:

用CSS排版

  1. <style type="text/css">
  2. <!--
  3. #photoList img{
  4.   height:80;
  5.   width:100;
  6.   margin:5px auto;
  7. }
  8. -->
  9. </style> <div id="photoList">
  10. <img src="01.jpg" />
  11. <img src="02.jpg" />
  12. <img src="03.jpg" />
  13. <img src="04.jpg" />
  14. <img src="05.jpg" />
  15. </div>
复制代码


不用CSS排版

  1. <img src="01.jpg" width="100" height="80" align="middle" />
  2. <img src="02.jpg" width="100" height="80" align="middle" />
  3. <img src="03.jpg" width="100" height="80" align="middle" />
  4. <img src="04.jpg" width="100" height="80" align="middle" />
  5. <img src="05.jpg" width="100" height="80" align="middle" />
复制代码


  第一种方法是结构表现相分离,内容部分代码简单吧,如果还有更多的图片列表的话,那么第一种CSS布局方法就更有优势,我打个比

喻你好理解:我在BODY向你介绍一个人,我只对你说他是一个人,至于他是一个什么样的人,有多高,是男是女,你去CSS那里查下就知道

。这样我在BODY的工作就简单了,也就是说BODY的代码就简单了。如果BODY有一个团队人在那里,我在CSS记录一项就行了,这有点像Flash

软件里的元件和实例的概念,不同的实例共享同一个元件,这样动画文件就不大了,把这种想法移到CSS网页设计中,就是代码不复杂,网

页文件体积小能较快被客户端下载了。

文章附图3

文章附图3

演示地址:http://www.blueidea.com/articleimg/2007/03/4545/css1.html
用CSS排版减小网页文件体积


  像上面我做的那个版面,一共分为四个区块,每个区块的框架是一样的,这个框架就是用CSS写出来的,样式写一次,就可以被无数次

调用了(用class调用,而不是ID),只要改变其中的文字内容就可以生成风格统一的众多板块了,它的样式和结构代码是(请不

要直接复制生成网页,把下面代码分别粘贴到网页中它们应在的位置
):

  1. <style type="text/css">
  2. <!--
  3. * {margin:0px; padding:0px;}
  4. body {
  5. font-size: 12px;
  6. margin: 0px auto;
  7. height: auto;
  8. width: 805px;
  9. }
  10. .mainBox {
  11. border: 1px dashed #0099CC;
  12. margin: 3px;
  13. padding: 0px;
  14. float: left;
  15. height: 300px;
  16. width: 192px;
  17. }
  18. .mainBox h3 {
  19. float: left;
  20. height: 20px;
  21. width: 179px;
  22. color: #FFFFFF;
  23. padding: 6px 3px 3px 10px;
  24. background-color: #0099CC;
  25. font-size: 16px;
  26. }
  27. .mainBox p {
  28. line-height: 1.5em;
  29. text-indent: 2em;
  30. margin: 35px 5px 5px 5px;
  31. }
  32. -->
  33. </style>
  34. <div class="mainBox">
  35. <h3>前言</h3>
  36. <p>正文内容</p>
  37. </div>
  38. <div class="mainBox">
  39. <h3>CSS盒子模式</h3>
  40. <p>正文内容 </p>
  41. </div>
  42. <div class="mainBox">
  43. <h3>转变思想</h3>
  44. <p>正文内容 </p>
  45. </div>
  46. <div class="mainBox">
  47. <h3>熟悉步骤</h3>
  48. <p>正文内容 </p>
  49. </div>
复制代码


熟悉工作流程

  在真正开始工作之前我们脑海中要形成这样一种思想:表格是什么我不知道,在内容部分我不能让它再出现表现控制标签,如:font、

color、height、width、align等标签不能再出现,(简单说工作前先洗脑,忘掉以前的一惯做法,去接受和使用全新的方法),我不是单

纯的用DIV来实现排版的嵌套,DIV是块级元素,而像P也是块级元素,例如要分出几个文字内容块,不是一定要用DIV才叫DIV排版,不是

“<div>文字块一</div><div>文字块二</div><div>文字块三</div>”,而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>”更合适



  用DIV+CSS设计思路是这样的: 1.用div来定义语义结构;2.然后用CSS来美化网页,如加入背景、线条边框、对齐属性等;3.最后在这

个CSS定义的盒子内加上内容,如文字、图片等(没有表现属性的标签),下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结

果图:

文章附图4

文章附图4

演示地址:http://www.blueidea.com/articleimg/2007/03/4545/css2.html
CSS排版结果图


用div来定义语义结构
  现在我要给大家演示的是一个典型的版面分栏结构,即页头、导航栏、内容、版权(如下图),

文章附图5

文章附图5

典型版面分栏结构

其结构代码如下:

  1. <div id="header"></div>
  2. <div id="nav"></div>
  3. <div id="content"></div>
  4. <div id="footer"></div>
复制代码


  上面我们定义了四个盒子,按照我们想要的结果是,我们要让这些盒子等宽,并从下到下整齐排列,然后在整个页面中居中对齐,为了

方便控制,我们再把这四个盒子装进一个更大的盒子,这个盒子就是BODY,这样代码就变成:

  1. <body>
  2. <div id="header"></div>
  3. <div id="nav"></div>
  4. <div id="content"></div>
  5. <div id="footer"></div>
  6. </body>
复制代码


  最外边的大盒子(装着小盒子的大盒子)我们要让它在页面居中,并重定义其宽度为760像素,同时加上边框,那么它的样式是:

  1. body {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: 12px;
  4. margin: 0px auto;
  5. height: auto;
  6. width: 760px;
  7. border: 1px solid #006633;
  8. }
复制代码


  页头为了简单起见,我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙,目的是让页头的图像不要和下

面要做的导航栏连在一起,这样也是为了美观。其样式代码为:

  1. #header {
  2. height: 100px;
  3. width: 760px;
  4. background-image: url(headPic.gif);
  5. background-repeat: no-repeat;
  6. margin:0px 0px 3px 0px;
  7. }
复制代码


  导航栏我做成像一个个小按钮,鼠标移上去会改变按钮背景色和字体色,那么这些小小的按钮我们又可以理解为小盒子,如此一来这是

一个盒子嵌套问题了,样式代码如下:

  1. #nav {
  2. height: 25px;
  3. width: 760px;
  4. font-size: 14px;
  5. list-style-type: none;
  6. }
  7. #nav li {
  8. float:left;
  9. }
  10. #nav li a{
  11. color:#000000;
  12. text-decoration:none;
  13. padding-top:4px;
  14. display:block;
  15. width:97px;
  16. height:22px;
  17. text-align:center;
  18. background-color: #009966;
  19. margin-left:2px;
  20. }
  21. #nav li a:hover{
  22. background-color:#006633;
  23. color:#FFFFFF;
  24. }
复制代码


  内容部分主要放入文章内容,有标题和段落,标题加粗,为了规范化,我用H标签,段落要自动实现首行缩进2个字,同时所有内容看起

来要和外层大盒子边框有一定距离,这里用填充。内容区块样式代码为:

  1. #content {
  2. height:auto;
  3. width: 740px;
  4. line-height: 1.5em;
  5. padding: 10px;
  6. }
  7. #content p {
  8. text-indent: 2em;
  9. }
  10. #content h3 {
  11. font-size: 16px;
  12. margin: 10px;
复制代码


  版权栏,给它加个背景,与页头相映,里面文字要自动居中对齐,有多行内容时,行间距合适,这里的链接样式也可以单独指定,我这

里就不做了。其样式代码如下:

  1. #footer {
  2. height: 50px;
  3. width: 740px;
  4. line-height: 2em;
  5. text-align: center;
  6. background-color: #009966;
  7. padding: 10px;
  8. }
复制代码


  最后回到样式开头大家会看到这样的样式代码:

  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. }
复制代码


  这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以

这样的控制,这可以在一定程度上简化代码。最终完成全部样式代码是这样的:

  1. <style type="text/css">
  2. <!--
  3. * {
  4. margin: 0px;
  5. padding: 0px;
  6. }
  7. body {
  8. font-family: Arial, Helvetica, sans-serif;
  9. font-size: 12px;
  10. margin: 0px auto;
  11. height: auto;
  12. width: 760px;
  13. border: 1px solid #006633;
  14. }
  15. #header {
  16. height: 100px;
  17. width: 760px;
  18. background-image: url(headPic.gif);
  19. background-repeat: no-repeat;
  20. margin:0px 0px 3px 0px;
  21. }
  22. #nav {
  23. height: 25px;
  24. width: 760px;
  25. font-size: 14px;
  26. list-style-type: none;
  27. }
  28. #nav li {
  29. float:left;
  30. }
  31. #nav li a{
  32. color:#000000;
  33. text-decoration:none;
  34. padding-top:4px;
  35. display:block;
  36. width:97px;
  37. height:22px;
  38. text-align:center;
  39. background-color: #009966;
  40. margin-left:2px;
  41. }
  42. #nav li a:hover{
  43. background-color:#006633;
  44. color:#FFFFFF;
  45. }
  46. #content {
  47. height:auto;
  48. width: 740px;
  49. line-height: 1.5em;
  50. padding: 10px;
  51. }
  52. #content p {
  53. text-indent: 2em;
  54. }
  55. #content h3 {
  56. font-size: 16px;
  57. margin: 10px;
  58. }
  59. #footer {
  60. height: 50px;
  61. width: 740px;
  62. line-height: 2em;
  63. text-align: center;
  64. background-color: #009966;
  65. padding: 10px;
  66. }
  67. -->
  68. </style>
复制代码


结构代码是这样的:

  1. <body>
  2. <div id="header"></div>
  3. <ul id="nav">
  4. <li><a href="#">首 页</a></li>
  5. <li><a href="#">文 章</a></li>
  6. <li><a href="#">相册</a></li>
  7. <li><a href="#">Blog</a></li>
  8. <li><a href="#">论 坛</a></li>
  9. <li><a href="#">帮助</a></li>
  10. </ul>
  11. <div id="content">
  12. <h3>前言</h3>
  13. <p>第一段内容</p>
  14. <h3>理解CSS盒子模式</h3>
  15. <p>第二段内容</p>
  16. </div>
  17. <div id="footer">
  18. <p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright &copy;2006 - 2008 Tang

  19. Guohui. All Rights Reserved</p>
  20. </div>
  21. </body>
复制代码


  好了,此文到此结束,更多内容,如:CSS中的盒子宽度计算,浏览器兼容问题,XHTML规范化写法等请大家去参考其它资料。如果觉得

此文还可以,看过之后记得跟帖,你的鼓励是我不断出新文章的动力^-^

本文完全为个人原创作品,转摘请注明作者,作者:唐国辉。感谢经典论坛网页标准化专栏斑竹blankzheng指点优化几处

看完本教程后,建议大家再看一下下面的回复,本人在下面的回复中有回答不同网友问及的问题,如果您有在这里提问,

记得过一段时间再回来看我的答复,一般我都会回复的,再次谢谢各位网友支持!


[[i] 本帖最后由 webflash 于 2007-8-20 10:06 编辑 ]

评分

参与人数 1威望 +2 收起 理由
blank + 2 原创内容

查看全部评分

 楼主| 发表于 2007-3-21 14:07:08 | 显示全部楼层

解释id与class的区别

原帖由 [i]cbcman 于 2007-3-20 17:43 发表
请教一下楼主,id与class有什么区别,看到一些文章,一时id,一时又class,有点糊涂了!这篇文章对初学者,获益良多!!谢谢!


关于这位网友提到的问题我再用打比喻的方法让你好明白:
我们知道成年人一般都有一张身份证,身份证里有一个号码,这个号码是唯一的,一个号码对应一个人,而CSS样式引用的ID就类似身份证号码,一个页面中不能有重复的ID,就像国内不能出现同样号码的不同人的身份证来一样,这样样式就找不到它对应的标签或者盒子并给它赋上样式了。

而class则是可以重复利用的,就像一场演讲派发的入场券一样,这些券只是证明你有权进入演讲室,可以是一样的。如果一个页面中有很多要重复利用的样式,就用class了。如果把页面比作一个舞台,结构标签是演员,那么由class定义的一种风格统一的衣服可以给具有相同角色的演员穿上,而ID就是舞台中唯一有自己风格的演员。
回复 支持 1 反对 0

使用道具 举报

发表于 2007-3-16 10:48:47 | 显示全部楼层
文章写的浅显易懂,还很生动,不错!继续加油!

不过,另外几点注意:

1、P {text-indent: 2em;}或者P{margin:0em 0em 0em 2em;},两个所表现的意义不同。

2、“如果用CSS实现不了的效果,你更不用想用表格去实现”,此说法欠妥。

3、
  1. <span>前言</span>
  2. <p>正文内容</p>
复制代码


span处用hx,比如h3,更有语义。

4、
  1. <div id=”mainBox”>
  2. <div id="header"></div>
  3. <div id="nav"></div>
  4. <div id="content"></div>
  5. <div id="footer"></div>
  6. </div>
复制代码


不建议套一层无语义的div,尽可能减少页面中的div嵌套。

5、
  1. background-image: url(headPic.gif);
  2. background-repeat: no-repeat;
复制代码

可以合并写成:
  1. background: url(headPic.gif) no-repeat;
复制代码

尽量优化CSS代码;

评分

参与人数 1威望 +2 收起 理由
greengnn + 2 我很赞同

查看全部评分

回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-16 12:44:59 | 显示全部楼层

多谢斑竹的指点和对本帖的补充说明

  多谢斑竹的指点和对本帖的补充说明,本人虽然不是什么高手,但本人善于通过一种通俗易懂的语言把知识点说清楚,比如通过打比方、辅助图,让更多人可以享受到学习的乐趣。如果我的文章可以让大家能有所收获,那怕只有一点点,那我就深感欣慰了!
  
  网络让我有权利享受知识,我也清楚自己有义务向他人传授自己所知道的知识,发表此文正是尽本人一点能力的表现。
回复 支持 反对

使用道具 举报

发表于 2007-3-17 19:45:51 | 显示全部楼层
我需要提个疑问.控制版面的属性都在CSS文件里.当用户访问这个页面时,万一CSS没有加载完整,那么页面就乱了.这个应该怎么实施才比较好呢.
因为之前我访问过MOP的其中一个页面,就出现过这样的情况,页面内容无法阅读.需要刷新一下,页面板式才正常了.
但是,不要说我绝情啊,有些人看到页面显示错误,他们就立即关闭这个页面了.
我只是想请教,如何使这样的现象尽可能的不发生呢?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-17 20:02:01 | 显示全部楼层
原帖由 [i]yymax 于 2007-3-17 19:45 发表
我需要提个疑问.控制版面的属性都在CSS文件里.当用户访问这个页面时,万一CSS没有加载完整,那么页面就乱了.这个应该怎么实施才比较好呢.
因为之前我访问过MOP的其中一个页面,就出现过这样的情况,页面内容无法阅 ...


浏览器解释网页的时候是从上往下解释的,而样式我们往往都是写在网页页头的,即使是以外链的方式引入样式也是在页头这里引入,而CSS文件是纯文本的,相对于网页中的图片元素来说小多了,一般你说的问题出现的可能性很小。如果硬要在网页加载前确保样式下载完,就用JAVASCRIPT写个预加载函数吧。

[[i] 本帖最后由 webflash 于 2007-3-23 23:31 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-3-19 09:58:36 | 显示全部楼层
作者思路很清晰,教材也很适用,我自已也从中汲取了点:
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

我原先想,应写成这样:
<body>
<div>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
后来才知道,采用CSS+DIV布局要尽量减少DIV嵌套.
回复 支持 反对

使用道具 举报

发表于 2007-3-19 15:53:38 | 显示全部楼层
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
里没有定义整个版面居中对齐啊?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-19 16:31:24 | 显示全部楼层
原帖由 [i]hwg3000 于 2007-3-19 15:53 发表
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
里没有定义整个版面居中对齐啊?


上面margin: 0px auto;就可以实现居中对齐,前提是要指定BODY一个宽度,我一开始也是在BODY内再搞一个mainBox DIV,再让DIV居中,后来斑竹修正说那多余(下面为斑竹回复),于是改了一下,发现直接给BODY重定义一个宽度再用边界自动可实现版面居中。

4、

  1. <div id=”mainBox”>
  2. <div id="header"></div>
  3. <div id="nav"></div>
  4. <div id="content"></div>
  5. <div id="footer"></div>
  6. </div>
复制代码


不建议套一层无语义的div,尽可能减少页面中的div嵌套。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-20 17:32:06 | 显示全部楼层
此文一些网友问及的有关问题本人已在下面链接作出回答,在此不重复说明,相了解更多到下面链接查看:
回复 支持 反对

使用道具 举报

发表于 2007-3-20 17:43:31 | 显示全部楼层
请教一下楼主,id与class有什么区别,看到一些文章,一时id,一时又class,有点糊涂了!这篇文章对初学者,获益良多!!谢谢!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-21 17:07:03 | 显示全部楼层

给导航栏样式加详细说明

针对一些网友在本网站,以及本文转摘的其它网站网友反映问题,现给部分样式加上说明,下面为导航栏样式说明:

  1. #nav {/*定义一个导航栏的长盒子*/
  2. height: 25px;
  3. width: 760px;
  4. font-size: 14px;
  5. list-style-type: none;/*让nav这个大盒子下面的小盒子LI列表样式不显示,这对于标准浏览器很重要*/
  6. }
  7. #nav li {
  8. float:left;/*让LI这些小盒子左对齐*/
  9. }
  10. #nav li a{
  11. color:#000000;
  12. text-decoration:none;/*让LI盒子里面的链接样式没有下滑线*/
  13. padding-top:4px;
  14. display:block;/*让LI里面的链接块状呈现,就像一个按钮,而不必一定要点中链接文字才起作用*/
  15. width:97px;
  16. height:22px;
  17. text-align:center;/*LI盒子中链接文字水平居中*/
  18. background-color: #009966;
  19. margin-left:2px;/*设置不同盒子有一定距离,不要靠在一起*/
  20. }
  21. #nav li a:hover{
  22. background-color:#006633;/*鼠标移到链接盒子上面改变盒子背景色*/
  23. color:#FFFFFF;
  24. }
复制代码
回复 支持 反对

使用道具 举报

发表于 2007-3-23 16:54:41 | 显示全部楼层
原帖由 [i]webflash 于 2007-3-19 16:31 发表


上面margin: 0px auto;就可以实现居中对齐,前提是要指定BODY一个宽度,我一开始也是在BODY内再搞一个mainBox DIV,再让DIV居中,后来斑竹修正说那多余(下面为斑竹回复),于是改了一下,发现直接给BODY重定 ...

<body>定义了宽度之后在屏幕超过你定的宽度的外面是什么背景色?本人有这个疑问!
里面嵌套的话浏览器中显示所有内容都可定义背景色!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-23 20:12:43 | 显示全部楼层
原帖由 [i]connorgg 于 2007-3-23 16:54 发表

<body>定义了宽度之后在屏幕超过你定的宽度的外面是什么背景色?本人有这个疑问!
里面嵌套的话浏览器中显示所有内容都可定义背景色!


可以在样式里加入这样的一条CSS:
  1. html {background-color: #FFFFCC;}
复制代码
回复 支持 反对

使用道具 举报

发表于 2007-3-23 20:16:50 | 显示全部楼层
通配符 是什么意思?
请大侠们帮忙解释~
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-23 20:35:56 | 显示全部楼层
原帖由 [i]irise25 于 2007-3-23 20:16 发表
通配符 是什么意思?
请大侠们帮忙解释~


在我们的电脑资源管理器的搜索功能中,我们可以输入这样的关键字进行搜索,如:“*.jpg”,这样其实我们要搜的是所有以".jpg"结尾的图片文件,像1.jpg、myphoto.jpg 、520pic.jpg...等都是符合的查找结果,*即代表了任意关键字。移到CSS上来说,*号可以理解为代表了不同的任意标签,举个例子来说:

不用通配符的写法:
body {margin:0px; padding:0px; }
p {margin:0px; padding:0px; }
ul {margin:0px; padding:0px; }
img {margin:0px; padding:0px; }
...
或者
body,p,ul,img... {margin:0px; padding:0px; }

用通配符的写法:
我们只要用* {margin:0px; padding:0px; }就全包括了。
回复 支持 反对

使用道具 举报

发表于 2007-3-23 20:50:53 | 显示全部楼层
好教程!望楼上再出续篇!!!!!!!比如:一个网站的制作(可以慢慢来,小型网)

你都说了,大家的支持是你再出新文章的动力!


你看,大家多支持你呀!!!!!!!!!!

爱死你了哈哈
回复 支持 反对

使用道具 举报

发表于 2007-3-28 18:04:32 | 显示全部楼层
最外边的大盒子(装着小盒子的大盒子)我们要让它在页面居中,并重定义其宽度为760像素,同时加上边框,那么它的样式是:
[Copy to clipboard]CODE:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}


提醒一下楼主:对body的居中定义在IE中并不支持!firefox没有问题。

[[i] 本帖最后由 sunvip 于 2007-3-28 18:07 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-3-28 18:06:00 | 显示全部楼层
原帖由 [i]webflash 于 2007-3-23 20:12 发表


可以在样式里加入这样的一条CSS:
html {background-color: #FFFFCC;}




IE并不支持此html属性
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-28 18:36:35 | 显示全部楼层
原帖由 [i]sunvip 于 2007-3-28 18:04 发表


提醒一下楼主:对body的居中定义在IE中并不支持!firefox没有问题。


不知道这位热情的网友是用什么IE版本的,本人用IE6.0测试并没有问题,你可以看一下下面网页的源代码:
http://www.hsptc.com/css2.html

在用margin: 0px auto;之前,也给BODY重新指定了一个宽度width: 760px;
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-28 18:44:23 | 显示全部楼层
原帖由 [i]sunvip 于 2007-3-28 18:06 发表




IE并不支持此html属性


如果IE不支持HTML属性,那么下面链接的精华收藏第16条:为什么web标准中IE无法设置滚动条颜色了,这个实现方法也是有问题的吗?



[[i] 本帖最后由 webflash 于 2007-3-28 18:45 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-3-29 13:54:29 | 显示全部楼层
我转走了,谢谢楼主。
回复 支持 反对

使用道具 举报

发表于 2007-4-6 09:12:53 | 显示全部楼层
这个教程不错,希望做个从切图到单个页面制作过程的教程,也好学习学习
回复 支持 反对

使用道具 举报

发表于 2007-4-6 16:45:16 | 显示全部楼层
看着教程,跟着做做。挺有收获的。
感谢楼主啊!
不过,对content border padding margin的宽度的计算还是不太明白。
回复 支持 反对

使用道具 举报

发表于 2007-4-7 16:00:19 | 显示全部楼层
原帖由 [i]webflash 于 2007-3-28 18:36 发表


不知道这位热情的网友是用什么IE版本的,本人用IE6.0测试并没有问题,你可以看一下下面网页的源代码:
http://www.hsptc.com/css2.html

在用margin: 0px auto;之前,也给BODY重新指定了一个宽度width:  ...


其实
body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        margin: 0px auto;
        height: auto;
        width: 760px;
        border: 1px solid #006633;
}
并不能居中。

在<html>前引入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
即可居中,够标准。呵呵

楼主教程非常棒,非常适合新手。建议陆续推出新教程。辛苦了。非常感谢。

[[i] 本帖最后由 pokalu 于 2007-4-7 16:01 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-4-8 19:40:21 | 显示全部楼层
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
#nav {
height: 25px;
……………………
………………




这个我不明白!为什么
* {
margin: 0px;
padding: 0px;
}


这里要加*这个符号?
回复 支持 反对

使用道具 举报

发表于 2007-4-21 14:30:02 | 显示全部楼层
所有的背景图片都在CSS文件里定义的时候,为什么有一些背景图片之间会产生空白间距呢???
回复 支持 反对

使用道具 举报

发表于 2007-4-25 17:58:38 | 显示全部楼层
教程很好!我是个初学者.
我按你的例子做了,怎么body无法居中?
body的width值自定义后不起作用
回复 支持 反对

使用道具 举报

发表于 2007-4-26 23:13:04 | 显示全部楼层
http://www.hsptc.com/articles/index.html这个网站好像有问题
在IE浏览的时候,先看'文章',然后不要最大化网页,浏览'首页',接着最大化浏览,会发现下面的footer不能居中,请问这是为什么呢?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-4-28 21:12:09 | 显示全部楼层
一、
原帖由 [i]beth2004 于 2007-4-8 19:40 发表
这个我不明白!为什么
* {
margin: 0px;
padding: 0px;
}

这里要加*这个符号?

最后回到样式开头大家会看到这样的样式代码:
  1. [Copy to clipboard]CODE:
  2. * {
  3. margin: 0px;
  4. padding: 0px;
  5. }
复制代码

  这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以这样的控制,这可以在一定程度上简化代码。


二、
原帖由 [i]nine71104 于 2007-4-21 14:30 发表
所有的背景图片都在CSS文件里定义的时候,为什么有一些背景图片之间会产生空白间距呢???

一个页面是由不同盒子组成的,背景面积占用盒子内容与填充区域,不同盒子加上不同的边界,最终就会看到背景图之间是分开的,不知道是不是你要的意思?!

三、
原帖由 [i]suninging 于 2007-4-25 17:58 发表
教程很好!我是个初学者.
我按你的例子做了,怎么body无法居中?
body的width值自定义后不起作用


请声明文档类型为标准的,如下设置:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. </head>
  5. <body>
  6. </body>
  7. </html>
复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-5-25 16:11 , Processed in 0.109102 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表