网页布局排版的部分技巧

时间:2023-04-30 05:25:32 资料 我要投稿
  • 相关推荐

网页布局排版的部分技巧

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

【网页布局排版的部分技巧】相关文章:

网页布局教案04-25

排版技巧和规则05-01

许理平:谈谈关键词在网页中的布局 -电脑资料04-07

餐厅风水布局05-01

大学英语四六级复合式听写及综合部分的答题技巧04-26

齐人攫金:现货投资技巧中长线单如何进行布局?05-01

交房工作汇报(重新排版)01-17

文科毕业论文排版格式04-30

网页的教案01-25

其他部分倒装05-04