DIV+CSS样式表的一些技巧
2008-09-02 14:36
441 查看
使用CSS的一点心得:
1。当有两个层嵌套时,如果内层的div是浮动的,外层的div就要设高度,否则用border属性看看该层会发现它没有高度。这种情况下你对外层设置背景时会发现没有作用。 另外设外层的padding属性也可以让它有高度。还可以在内层设置ul dl列表,这样外层也会跟着内层调整高度。
2。浮动的层一定要设宽度!向左浮动,可以设margin-left属性,向右浮动可以设margin-right属性。然而当我们还需要在垂直方向进行调整时就要特别注意:margin-top属性的语句要在height之前。像这样:#logo{float:left; margin-left:5px; margin-top:20px; padding:0px; width:300px; height:40px; background:...} 当把height属性放在margin-top之前时,我的图标怎么做都margin-top都不起作用!为此苦恼了一个上午。
3。标题前面的小图标
标题前面的小图标可以用a标签的padding属性来设置,而且还很方便,具体如下:#node_1 a{padding-left:20px;background:url(...tag.gif) left 2px norepeat;}这样子就可以在标题(标题是个A标签可链接到新页面)的左边20px宽的地方放置一个tag.gif图标了,而且图标的位置可以调整。参考background属性。
4。关于页面底部背景图片
一般都把背景的颜色的处理放在网页底部,避免把不能重复的背景放在底部以上区域(即不放在foot层以上)。然而也有一些很特殊的情况,当页底foot部份高度很小(比如只有30px),而图片的结尾处理又需要更高的高度时(比如100px)。这是一个很苦恼的问题。我的情况是要在左边做一条有阴影的坚条,我的做法是这样,在center_all(主体层)下<div id="bodybg_left"></div> #bodybg_left{ float:left; margin:0px;padding:0px; width:30px; height:100%;background:url(...) left bottom no-repeat; }当然还有一个前提就是center层要设高度,不设高度#body_left的高度就显示不出来!至于center_all不设高度的情况我还不知道有什么好的方法去实现。
5. background属性包含在border包含的框内,所以background是将padding包含在内的。
6. IE中width属性只是content内容的宽度,如果一个div设了padding,又设width,它的总宽度是width+padding+border+margin.我们看到的背景图片的宽度是(如果设了背景的话):width+padding+border.border设了宽度的话会显示border的颜色。也可以认为背景图片的宽度为:width+padding的宽度。
1。当有两个层嵌套时,如果内层的div是浮动的,外层的div就要设高度,否则用border属性看看该层会发现它没有高度。这种情况下你对外层设置背景时会发现没有作用。 另外设外层的padding属性也可以让它有高度。还可以在内层设置ul dl列表,这样外层也会跟着内层调整高度。
2。浮动的层一定要设宽度!向左浮动,可以设margin-left属性,向右浮动可以设margin-right属性。然而当我们还需要在垂直方向进行调整时就要特别注意:margin-top属性的语句要在height之前。像这样:#logo{float:left; margin-left:5px; margin-top:20px; padding:0px; width:300px; height:40px; background:...} 当把height属性放在margin-top之前时,我的图标怎么做都margin-top都不起作用!为此苦恼了一个上午。
3。标题前面的小图标
标题前面的小图标可以用a标签的padding属性来设置,而且还很方便,具体如下:#node_1 a{padding-left:20px;background:url(...tag.gif) left 2px norepeat;}这样子就可以在标题(标题是个A标签可链接到新页面)的左边20px宽的地方放置一个tag.gif图标了,而且图标的位置可以调整。参考background属性。
4。关于页面底部背景图片
一般都把背景的颜色的处理放在网页底部,避免把不能重复的背景放在底部以上区域(即不放在foot层以上)。然而也有一些很特殊的情况,当页底foot部份高度很小(比如只有30px),而图片的结尾处理又需要更高的高度时(比如100px)。这是一个很苦恼的问题。我的情况是要在左边做一条有阴影的坚条,我的做法是这样,在center_all(主体层)下<div id="bodybg_left"></div> #bodybg_left{ float:left; margin:0px;padding:0px; width:30px; height:100%;background:url(...) left bottom no-repeat; }当然还有一个前提就是center层要设高度,不设高度#body_left的高度就显示不出来!至于center_all不设高度的情况我还不知道有什么好的方法去实现。
5. background属性包含在border包含的框内,所以background是将padding包含在内的。
6. IE中width属性只是content内容的宽度,如果一个div设了padding,又设width,它的总宽度是width+padding+border+margin.我们看到的背景图片的宽度是(如果设了背景的话):width+padding+border.border设了宽度的话会显示border的颜色。也可以认为背景图片的宽度为:width+padding的宽度。
相关文章推荐
- div+csS中的一些技巧和浏览器兼容的办法
- 转:整理收集的div+css制作网页的一些小实例技巧
- DIV+CSS一些小小的技巧
- div+css一些技巧 li前面插入小图标居中+marquee
- div+css设计的一些技巧
- CSS技巧,像table一样布局div
- 使用样式表CSS进行网页布局的十八个技巧
- html+css的一些技巧.收集中...
- DIV+CSS网页布局常用的方法与技巧
- 谈DIV+CSS样式表命名的规则方法
- (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
- 关于DIV+CSS的一些命名规则
- javascript、css、html来制作交互式网页的一些必备技巧
- CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
- 一些DIV+CSS 命名规范
- 关于CSS+DIV一些兼容问题常见的例子
- 应用DIV+CSS编码时容易犯的一些错误
- css+div的一些易错点
- css+div的一些易错点小结
- css一些常用的技巧