让大家久等了,呵呵.说实话,我希望大家可以把这次聊天当作一次美工跟美工之间的交流.我先谈谈我个人对DIV+CSS(XHTML)的理解吧.我最早接触DIV+CSS完全是为了方便因为那时候我没有自己的电脑.需要经常在网吧研究制作主页.但是在网吧下载DREAMWEAVER或FRONTPAGE.需要很长时间.有的时候等了两个小时下载完成机器一死机,我晕倒,开机重新下.所以后来强迫自己学习用记事本编辑设计网页.但是大家知道
那个年代的网页布局,通篇一律都是TABLE (表格).
表格的布局我个人感觉非常麻烦
<table>
<tr>
<td>
</td>
</tr>
</table>
这样实在太头疼了.所以我开始尝试使用更简洁,更方便的XHTML.同样的一个布局,我对比了一下,使用更简单的写法:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="25%" ></td><td width="25%" ></td><td width="25%" ></td><td width="25%" ></td>
</tr>
</table>
这样是一个一行4列的布局方式(TABLE写法),下面用div实现同样的功能.
<div style="float:left;width:25%;"></div>
<div style="float:left;width:25%;"></div>
<div style="float:left;width:25%;"></div>
<div style="float:left;width:25%;"></div>
哪种更方便?没错,当然是后者,这就是我们可见的方便之处.作为一个合格的网页设计师,最基本的能力,就是可以熟练手工编写网页.
每设计一个网页之前,我都会临时用WIN画图工具勾勒出一个草图来。然后在脑海里形成一个基本影象,
打开记事本,或EDITPLUS.(我推荐大家使用EDITPLUS)，开始编写结构的CSS.比如一个模块。高度170象素
宽度300象素
边框线1象素 蓝色 实体线
背景颜色浅灰色
内距5象素
字体ARIAL
字体颜色黑色
等等之类的，
要有个概念,
OK,然后就可以开始写了。
象这样:
#div_one {
clear:both;
width:300px;
height:170px;
border:1px blue solid;
background:#c0c0c0;
padding:5px;
font-family:Arial;
color:black;}
有了基本的影象,写出的内容才和自己的想的一样.当然大家要注意几个小问题：
1:实际宽度是边框线与宽度相加;2:如果有PADDING (内边距) 那么在实际宽度中要加上PADDING的LEFT和RIGHT；比如象刚才我写的那一段
#div_one {
clear:both;
width:300px;
height:170px;
border:1px blue solid;
background:#c0c0c0;
padding:5px;
font-family:Arial;
color:black;}
现在所占的实际宽度是多少,计算一下：300+2+10=312px
300(width)
2(border-left border-right)
10(padding-left padding-right)
border:1px blue solid;
这个是我目前接触到的最简单的写法，FF下会有差别。不过如果写的标准,出错的概率很小.如果一定遇到某些难以防止的差别，可以考虑使用HACK。（用hack不符合XHTML的标准，建议使用undohtml）关于通配符，* {
margin:0px;
padding:0px;}
每次设计一个网页的CSS的时候,顶部肯定会有个这样的通配符设置
倾心爱恋 14:48:13
:link,:visited {text-decoration:none}
ul,ol {list-style:none}
h1,h2,h3,h4,h5,h6,pre,code {font-size:1em;}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img {border:none}
address {font-style:normal}
还有我个人有个建议，就是设置容器名称的时候,尽量用标准的英文,或一些简称,简短一些.(个人看法)。
比如
头部 (#TOP 或 #HEAD)
导航 (#MENU 或 #NAV)
好的.我临时写一个简单的网页布局,大家一起来交流下.
//通配符定义，内外边框都为 0 像素
* {
margin:0px; //外边距
padding:0px; //内边距
}
body {
margin:auto;
text-align:center; //body标签里的所有文字全居中显示
cursor:default; //鼠标样式
background:white; //页面背景颜色为白色
font-size:12px;} //页面字体大小为12px
div {
margin:auto;} //DIV容器居中
#top {
clear:both; //id为top的div容器清楚浮动
width:900px;} //宽度为900px
#top .tops {
float:left; //id为top的div 容器里的class为tops的容器样式设定
width:100%; //宽度为100%（浏览器按照屏幕大小自己调整）
height:150px; //高度150px
background:black;} //id为top的div 容器里的class为tops的容器背景为黑色
#main { //id为main的容器设定样式
clear:both; //清楚浮动
width:900px;} //宽度900px
#main .left { // id为main的div 容器里的class为left的容器样式
float:left; //局左飘浮
width:300px; //宽度300px
height:200px;} //高度200px
#main .right { // id为main的div 容器里的class为right的容器样式
float:left; //局左漂浮
width:600px; //宽度600px
height:200px;} //高度200px
#foot { //id为foot的div样式设定
clear:both; //清楚浮动
width:900px;} //宽度900px
#foot .footer { //id为foot的div容器里class为footer的样式设定
float:left; //局左飘浮
width:900px; //宽度900px
height:60px;} //高度60px
可能我这样写很麻烦，但我目前还没接触到更简单的写法.同一个页面一般不允许有重复id。cursor:default; 鼠标默认样式 (这个是我个人的喜好)，因为有时候鼠标移动到文本内容上后会变成输入样式，
div {
margin:auto;}
DIV容器居中。还有图片我需要说一下，有时候一个图片在IE中显示的时候会出现多余
大家注意到了么?多出边来了。用DISPLAY:BLOCK;可以解决出现多余的问题.但是要注意，比如一个容器里只有一个图片的时候才能使用用DISPLAY:BLOCK;如果并排放5个图片或若干个图片可以使用UL LI比如：
<ul>
<li><img src="xx.gif" _fcksavedurl=""xx.gif"" style="display:block;" /><／li>
<li><img src="xx.gif" style="display:block;" /><／li>
<li><img src="xx.gif" style="display:block;" /><／li>
<li><img src="xx.gif" style="display:block;" /><／li>
<li><img src="xx.gif" style="display:block;" /><／li>
</ul>
现在咱们回到布局来，现在很多网页布局流行使用3栏布局。3栏,每个容器与容器之间会有一个距离，这个距离怎么做呢?用MARGIN?但是FF与IE的MARGIN有时候会有冲突，所以我用了单独的一个容器。可能不是很标准，但我最近2年一直是这么写的.大家可以看一下,有想法可以说出来.
<div style="float:left;width:300px;">容器-1</div>
<div style="float:left;width:5px;font-size:0px;"> </div>
<div style="float:left;width:300px;">容器-2</div>
两个容器中间用了一个单独的容器把它们隔开，这样就不怕出现浏览器错误了。float:left;width:5px;font-size:0px;
这三个都必不可少， 更是必须加的。用MARGIN有时候会产生IE和FF下的差错，有时候IE下的MARGIN和FF下的MARGIN不同的。我查了一下 firefox 宽度高度加个 !important，!important 现在在IE7下也被承认了。overflow:auto;这个通常是需要固定高度的时候使用的，比如需要产生滚动条。
空格的像数好像大于5个像数哦，不会把中间的那个撑大？所以用到了FONT-SIZE:0PX;所以不会撑大。
绝对不要在HTML里用到STYLE，为什么？如果不停的在HTML页里使用
<div style="*******"></div><div style="*******"></div><div style="*******"></div><div style="*******"></div><div style="*******"></div>
这样其不是很麻烦，所以真正应用的时候一定要结合CSS的。
其实我认为DIV只是一个一个的房间，CSS是点缀这些房间的装饰。所以讲DIV的同时，就是在讲CSS。
还有背景的用法，background:url(xx.gif) no-repeat;或者可以干脆把LOGO以背景图片的形式展现出来。比如：
.logo {
float:left;
width:160px;
height:60px;
background:url(logo.gif);}
.logo a {
display:block;
width:100%;
height:60px;}
能不能说说:影响Firefox正常显示的因素有哪些(能在IE正常显示的在Firefox确显示错误)
我遇到的一些明显的细微的差别有：
1：MARGIN PADDING
2：LINE-HEIGHT
3：INPUT
4：SCROLLBAR
图片四周边框可以设定
IMG {
BORDER：0PX；}
body{
font-size: 1em;
}
.font{
font-size: 150%;
}
好的，倾心给大家讲以下FONT
这样的字体比
font-size: 13px;
这样好看,比较圆满一点，对，最常用的是12px 和14 px。
