打印

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

支持下,虽然我不会,努力学习中,以后有问题再发贴来请教大家。
开心最好   愿与大家交个朋友

#SOS#
好教程啊!期待楼主继续...谢谢

TOP

引用:
最外边的大盒子(装着小盒子的大盒子)我们要让它在页面居中,并重定义其宽度为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没有问题。

[ 本帖最后由 sunvip 于 2007-3-28 18:07 编辑 ]
引用:
原帖由 webflash 于 2007-3-23 20:12 发表


可以在样式里加入这样的一条CSS:
html {background-color: #FFFFCC;}
IE并不支持此html属性

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
引用:
原帖由 sunvip 于 2007-3-28 18:04 发表


提醒一下楼主:对body的居中定义在IE中并不支持!firefox没有问题。
不知道这位热情的网友是用什么IE版本的,本人用IE6.0测试并没有问题,你可以看一下下面网页的源代码:
http://www.hsptc.com/css2.html

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

TOP

引用:
原帖由 sunvip 于 2007-3-28 18:06 发表




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

16.为什么web标准中IE无法设置滚动条颜色了



[ 本帖最后由 webflash 于 2007-3-28 18:45 编辑 ]

TOP

谢谢楼主的辛苦写这么通俗易懂的教程.
支持楼主写"CSS中的盒子宽度计算,浏览器兼容问题"的教程.
继续关注
我设计,我热爱
www.fshanxiang.com/fang/index.htm

TOP

我转走了,谢谢楼主。

TOP

我现在一看到div+css就看,我也想多学习学习,谢谢楼主的教程,很不错啊!!
就是还有很多地方不是很懂,只能慢慢学了!!

TOP

楼主的教程非常适合新手 我看过其他的教程 都没有你写的这么通俗易懂 大力支持 多出教材 我一定关注
followme_q

TOP

这个教程不错,希望做个从切图到单个页面制作过程的教程,也好学习学习
开着法拉利和飞机赛跑

TOP

看着教程,跟着做做。挺有收获的。
感谢楼主啊!
不过,对content border padding margin的宽度的计算还是不太明白。

TOP

太好了

正是我想要的
也很详细
淘宝手机

TOP

讲解的很细,支持一下
忍受。一定要学会忍受。

TOP

引用:
原帖由 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">
即可居中,够标准。呵呵

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

[ 本帖最后由 pokalu 于 2007-4-7 16:01 编辑 ]

TOP

<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;
}


这里要加*这个符号?
一匹来自南方的狼!!!

TOP

非常感谢楼主。

TOP

对于这样的帖,咱们只有跟了!!

TOP

很详细直观。谢谢了。

TOP

通俗易懂,真的很不错!

TOP

还没看完,不够已经忍不住想回帖了。真的是好帖,现在已经明白好多了。

TOP

不错,非常形象,一目了然,谢谢楼主

TOP

楼主的教程太好了,是我所见过的最好的,非常浅显易懂,有些容易出问题的地方讲得也非常清楚,非常感谢!!!

TOP

呵呵 学习啦~~+++++++油
继续学习中~~~

TOP

所有的背景图片都在CSS文件里定义的时候,为什么有一些背景图片之间会产生空白间距呢???

TOP

来学习学习.
usaway.cn

TOP

以前看了很多都不会,看了LZ的一会就会了,自己再练练应该没问题了,3Q~

TOP

好教程
我没做过网页的都明白了
谢谢楼主

TOP

教程很好!我是个初学者.
我按你的例子做了,怎么body无法居中?
body的width值自定义后不起作用

TOP

很不错的教程!

感觉学了不少东西.

看到一个页面从手上出来.真是不错!

楼主继续加油!

TOP