网页布局排版的部分技巧
css样式中的部分技巧
1. margin与padding缩写规则
margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。 可缩写为
1.四个都有且不同-顺序为上、右、下、左边界
如：DIV{margin:12px 15px 20px 16px;}
2.四个都有两两相同
上下同 左右同 可以缩写为DIV{margin:12px 15px}即代表上下边界为12px ，左右15px
上左同、下右同或者上右同、下左同此类情况还是要四个都写
3.左右同 上下不同可以缩写为DIV{margin:12px 15px 4px} 即代表上边界是是12px，左右边界都是15px，下边界是4px.
2．字体的缩写方法
font 设定字型的综合属性，其顺序如下：
{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;}
3.背景样式的缩写方法
背景的简写：background-color:#FFFFFF;
background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;
可以写成：background:#FFF url(background.gif) no-repeat fixed 0 0;
4.边框的简写：
比如：border-width:1px; border-style:solid; border-color:#FFFFFF; 可以写成：border:1px solid :#FFFFFF;
5.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的.，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
6..最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先
7.多重class定义
请看以下例子：
one{width:200px;background:#666;}
.two{border:10px solid #F00;}
最终的显示效果是这个div既有#666的背景，也有10px的边框
8.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。
9.导入样式的几种方法：
1. 链入外部样式表 在head之间
rel="stylesheet" type="text/css" media="all">
2.内部样式表 将样式写入head之间
3. 导入外部样式表
例中@import “mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。4. 内嵌样式
这是一个段落
5.在一个样式表中嵌入另个样式表 就在链入的样式表上面加上这句话@import url("index201210.css");
10.在样式中想要固定标题的长度，超出部分用省略号代替 list1{width:300px;overflow:hidden;
white-space:nowrap;text-overflow:ellipsis; }
11.高度为32px的图片让其居中的方法
.m_line{
float:left; width:1px; height:32px;
line-height:32px; /*ff下有效(图片垂直居中)*/ }
.m_line img{
margin-top:expression(( 32 - this.height ) / 2); /*ie下有效(图片垂直居中)*/
}
12.对背景图片做链接
.logo{background:url(nav2.gif) no-repeat}
.logo{width:129px;height:46px;float:left;margin-top:4px;margin-left:-7px}
13.
7 8兼容
14.空白影片剪辑this.loadMovie("menu.swf","this");
jz123.cn
【网页布局排版的部分技巧】相关文章：
网页布局教案03-03
常见的网页布局设计模式01-15
古老的网页设计布局 -电脑资料01-01
话题作文布局技巧08-31
CAD布局技巧 -工程01-01
排版技巧和规则07-29