果果贝 10分钟教会你DIV+CSS网页布局

《果果贝 10分钟教会你DIV+CSS网页布局》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、布局技巧实例使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。盒尺寸通常有下面四种书写方法:§property:value1;表示所有边都是一个值value1；§property:value1value2;表示top和bottom的值是value1,right和

2、left的值是value2§property:value1value2value3;表示top的值是value1，right和left的值是value2，bottom的值是value3§property:value1value2value3value4;四个值依次表示top,right,bottom,left方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em02em0.5em;边框(border)边框的属性如下：§border-width:1px;§border-style:solid;§border-color:#000;可以缩写为

3、一句：border:1pxsolid#000;语法是border:widthstylecolor;背景(Backgrounds)背景的属性如下：§background-color:#f00;§background-image:url(background.gif);§background-repeat:no-repeat;§background-attachment:fixed;§background-position:00;可以缩写为一句：background:#f00url(background.gif)no-repeatfixed00;语法是background:colorimag

4、erepeatattachmentposition;你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：§color:transparent§image:none§repeat:repeat§attachment:scroll§position:0%0%字体(fonts)字体的属性如下：§font-style:italic;§font-variant:small-caps;§font-weight:bold;§font-size:1em;§line-height:140%;§font-family:"LucidaGrande",sans-serif;可以缩写为一

5、句：font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。列表(lists)取消默认的圆点和序号可以这样写list-style:none;,list的属性如下:§list-style-type:square;§list-style-position:inside;§list-style-image:url(image.gif);可以缩写为一句：list-style:squareinsideurl(image.gif);确定义单位，除非值为0

6、忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100pxwidth:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。DIV+CSS网页布局技巧实例设置网页整体居中的代码以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用DIV+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不同而已。标准之路www.aa25.cn