带来一篇CSS结构进门
在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？<P>CSS结构与传统表格(table)结构最年夜的区分在于：本来的定位都是接纳表格，经由过程表格的间距大概用无色通明的GIF图片来把持文结构版块的间距；而如今则接纳层(div)来定位，经由过程层的margin,padding,border等属性来把持版块的间距。
1.界说DIV
剖析一个典范的界说div例子：
#sample{MARGIN:10px10px10px10px;
PADDING-LEFT:20px;
PADDING-TOP:20px;
PADDING-RIGHT:10px;
PADDING-BOTTOM:10px;
BORDER-RIGHT:#CCC2pxsolid;
BORDER-BOTTOM:#CCC2pxsolid;
BORDER-LEFT:#CCC2pxsolid;
BORDER-TOP:#CCC2pxsolid;
BACKGROUND:url(images/bg_poem.jpg)#FEFEFEno-repeatrightbottom;
COLOR:#666;
TEXT-ALIGN:center;
LINE-HEIGHT:150%;WIDTH:60%;}申明以下：
[*]层的称号为sample，在页面顶用<divid="sample">就能够挪用这个款式。
[*]MARGIN是指层的边框之外留的空缺，用于页边距大概与别的层打造一个间距。"10px10px10px10px"分离代表"上右下左"(顺时针偏向)四个边距，假如都一样，能够缩写成"MARGIN:10px;"。假如边距为零，要写成"MARGIN:0px;"。注重：当值是零时，除RGB色彩值0%必需跟百分号，其他情形前面能够不跟单元"px"。MARGIN是通明元素，不克不及界说色彩。
[*]PADDING是指层的边框到层的内容之间的空缺。"PADDING-LEFT"是指右边边框到内容的间隔，以此类推。假如都一样，能够缩写成"PADDING:0px"。PADDING是通明元素，不克不及界说色彩。
[*]BORDER是指层的边框，"BORDER-RIGHT:#CCC2pxsolid;"是界说层的右侧框色彩为"#CCC"，宽度为"2px"，款式为"solid"直线。假如要虚线款式能够用"dotted"。
[*]BACKGROUND是界说层的背景。分2级界说，先界说图片背景，接纳"url(../images/bg_logo.gif)"来指定背景图片路径；其次界说背景致"#FEFEFE"。"on-repeat"指背景图片不必要反复，假如必要横向反复用"repeat-x",纵向反复用"repeat-y",反复展满全部背景用"repeat"。前面的"rightbottom;"是指背景图片从右下角入手下手。假如没有背景图片能够只界说背景致BACKGROUND:#FEFEFE
[*]COLOR用于界说字体色彩，上一节已先容过。
[*]TEXT-ALIGN用来界说层中的内容分列体例，center居中,left居左,right居右。
[*]LINE-HEIGHT界说行高，150%是指高度为尺度高度的150%，也能够写作：LINE-HEIGHT:1.5大概LINE-HEIGHT:1.5em，都是一样的意义。
[*]WIDTH是界说层的宽度，能够接纳流动值，比方500px，也能够接纳百分比，象这里的"60%"。要注重的是:这个宽度仅仅指你内容的宽度，不包括margin,border和padding。但在有些扫瞄器中不是这么界说的，必要你多尝尝。
上面是这个层的实践体现:
这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，
这里是演示内容，这里是演示内容，
这里是演示内容，这里是演示内容，
这里是演示内容...我们能够看到边框是2px的灰色，背景图片在右下没有反复，内容间隔上和右边框20px，内容居中，统统和料想的一样。hoho，固然欠好看，但它是最基础的，把握了它，你就已学会一半的CSS结构手艺了。就是如许，不算难吧！(另外一半是甚么？另外一半是层与层之间的定位。我会在前面慢慢解说。)
2.CSS2盒模子
自从1996年CSS1的推出，W3C构造就倡议把一切网页上的对像都放在一个盒(box)中，计划师能够经由过程创立界说来把持这个盒的属性，这些对像包含段落、列表、题目、图片和层<div>。盒模子次要界说四个地区：内容(content)、边框距(padding)、界限(border)和边距(margin)。下面我们讲的sample层就是一个典范的盒。关于初学者，常常会弄不分明margin，background-color，background-image，padding，content，border之间的条理、干系和互相影响。这里供应一张盒模子的3D表示图，但愿便于你的了解和影象。
3.帮助图片一概用背景处置
用XHTML+CSS结构，有一个手艺一入手下手让你不习气，应当说是一种头脑体例与传统表格结构纷歧样，那就是：一切帮助图片都用背景来完成。相似如许：
BACKGROUND:url(images/bg_poem.jpg)#FEFEFEno-repeatrightbottom;只管能够用<img>间接插在内容中，但这是不同意的。这里的"帮助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于润色、距离、提示的图片。比方：相册中的图片、图片旧事中的图片，下面的3d盒模子图片都属于内容的一部分，它们能够用<img>元素间接插在页面里，而别的的相似logo，题目图片，列表前缀图片都必需接纳背景体例大概其他CSS体例显现。
如许做的缘故原由有2点：
[*]将体现与布局完全相分别，用CSS把持一切的表面体现，便于改版。
[*]使页面更具有易用性，更有亲和力。比方：瞽者利用屏幕浏览机，用背景手艺完成的图片就不会被朗诵出来。
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
页:
[1]