打印

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

很详细,原来对DIV+CSS的概念还很模糊,经这么介绍以后,有了更深的认识,谢谢楼主~~~~
http://www.hsptc.com/articles/index.html这个网站好像有问题
在IE浏览的时候,先看'文章',然后不要最大化网页,浏览'首页',接着最大化浏览,会发现下面的footer不能居中,请问这是为什么呢?
看完还是一头雾水呀,55555
这家很聪明,什么都没有留下~
好东西,学习中
很好的学习贴   收了~
哦米驮佛,女施主.老衲先.......

TOP

一、
引用:
原帖由 beth2004 于 2007-4-8 19:40 发表
这个我不明白!为什么
* {
margin: 0px;
padding: 0px;
}

这里要加*这个符号?
引用:
最后回到样式开头大家会看到这样的样式代码:
复制内容到剪贴板
代码:
[Copy to clipboard]CODE:
* {
margin: 0px;
padding: 0px;
}
  这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以这样的控制,这可以在一定程度上简化代码。
二、
引用:
原帖由 nine71104 于 2007-4-21 14:30 发表
所有的背景图片都在CSS文件里定义的时候,为什么有一些背景图片之间会产生空白间距呢???
一个页面是由不同盒子组成的,背景面积占用盒子内容与填充区域,不同盒子加上不同的边界,最终就会看到背景图之间是分开的,不知道是不是你要的意思?!

三、
引用:
原帖由 suninging 于 2007-4-25 17:58 发表
教程很好!我是个初学者.
我按你的例子做了,怎么body无法居中?
body的width值自定义后不起作用
请声明文档类型为标准的,如下设置:
复制内容到剪贴板
代码:
<!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">
<head>
</head>
<body>
</body>
</html>

TOP

谢谢,启发好大

TOP

http://www.hsptc.com/css1.html
楼主,请问为什么把上面这个范例的body宽度定位为805px??总的宽度精确数字到底是多少呢?是不是应该为mainBox的宽度×3+border×8+margin×3,最终的结果应该为192×4+1×8+3×3=785,距离805这个数字好像差的很多,可即便我把body的宽度定义为802,最后一个框框仍会串到下一行,怎么回事呢?

TOP

还有,关于上面的例子,我不太理解为什么.mainBox的宽度为192px,而.mainBox h3的宽度却为179px,.mainBox的192px这个宽度是由哪些宽度组成的呢?不好意思,我刚学css,现在对宽度的定义很模糊,问题太菜了请见谅。

[ 本帖最后由 raincolor 于 2007-5-5 11:22 编辑 ]

TOP

写的很清晰,

TOP

楼主辛苦咯

TOP

感受颇多啊。。
就是那个居中相关的。。看的多了有点迷糊了。。明天来了。自己也照着做看看。。。会居中不?

TOP


楼主好人啊
想问下楼主
想学好CSS+DIV
先从什么地方下手?
是不是先弄懂HTML语言
然后在弄懂CSS语言
然后在弄懂样式表
只有有了以上的基础才能学习CSS+DIV这种网页制作的方法呢?
£我曾经张扬的样子,我身上那些曾经尖锐的棱角,再也不会出现了~~

TOP

:)
QQ:275333

TOP

学习中,谢谢!

TOP

3Q

读了楼主的文章,茅塞顿开!
厉害厉害

TOP

感谢楼主!

TOP

哎,英语不好只能沾光于楼主这样乐于奉献的好同志了~

TOP

刚刚看到过类似的文章,现在又看一便,真是受益菲浅

TOP

支持楼主,呵呵!

TOP

确实又学了不少东西!

复制内容到剪贴板
代码:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body { margin: 0 auto; padding: 0; border: 1px solid #007900; width: 776px; height: auto;
font-size: 12px }
#head { width: 776px; height: 80px }
#nav { border-bottom: 1px solid #007900; width: 776px; height: auto }
#nav ul { margin: 0; padding: 0; list-style: none }
#nav li { margin: 1px; float: left; width: 85px; height: 28px; line-height: 28px; text-align: center; background-color: #00B700; }
#nav li a { font-size: 14px; text-decoration: none; color: #000; width: 85px; display: block }
#nav li a:hover { background-color: #008000; color: #fff; text-decoration: none }
#content { padding: 10px; border-bottom: 1px solid #007900; width: 756px; height: auto;
line-height: 1.5em }
#content h3 { margin: 10px }
#content p { text-indent: 2em }
#footer { padding: 15px; width: 746px; height: auto; background-color: #00A800; text-align: center; line-height: em }
-->
</style>
</head>
<body>
<div id=head></div>
<div id=nav>
<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">文章</a></li>
  <li><a href="#">相册</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">论坛</a></li>
  <li><a href="#">帮助</a></li></ul></div>
<div id=content>
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p></div>
<div id=footer><p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p>
<p>Copyright ?2006 - 2008 Tang Guohui. All Rights Reserved</p></div>
</body>
</html>

TOP

真是受益匪浅!



 提示:您可以先修改部分代码再运行

TOP

很好的文章,非常适合学习,楼主辛苦啦~
自己试一试先,有问题再来请教咯
追逐幸福

TOP

引用:
原帖由 raincolor 于 2007-5-5 11:04 发表
http://www.hsptc.com/css1.html
楼主,请问为什么把上面这个范例的body宽度定位为805px??总的宽度精确数字到底是多少呢?是不是应该为mainBox的宽度×3+border×8+margin×3,最终的结果应该为192×4+1×8+ ...
在那个例子里:
body的宽度应该要大于等于  mainbox的宽度x4+border-widthx8+marginx8(padding为0所以不要加.)
你用的应该是IE6看的,有双倍边距BUG.给mainbox加个display:inline;然后将body宽度改成800都没问题.
而你说的H3的宽度问题,你把H3的左右内边距加起来应该跟mainbox尺寸差不多了.

[ 本帖最后由 lijun198296 于 2007-5-24 15:59 编辑 ]

TOP

除了感谢还是感谢。学习之。。。。。。

TOP

引用:
原帖由 webflash 于 2007-3-16 12:44 发表
  多谢斑竹的指点和对本帖的补充说明,本人虽然不是什么高手,但本人善于通过一种通俗易懂的语言把知识点说清楚,比如通过打比方、辅助图,让更多人可以享受到学习的乐趣。如果我的文章可以让大家能有所收获,那 ...
谢谢你!我也会的。

TOP

好帖!顶!

TOP

真的很不错,我是个初学者,感觉这个教程非常实用 易学,谢谢.

真的很不错,我是个初学者,感觉这个教程非常实用 易学,谢谢.

TOP

真是好教程!顶了!

TOP

顶 楼住 该第2讲了

TOP