css各div名称1.docx

通过同时使用两个class（使用空格而不是逗号分割）,这个段落将同时应用两个class中制定的规则。

如果两者中有任何规则重叠，那么后一个将获得实际的优先应用。

4.利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。

这时为元素添加border属性确定元素边界，错误原因即水落石出。

5.float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。

这是MacIE的著名的bug，倘若不知道就会走弯路。

6.float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。

所以不管float元素的内容如何，一定要为其指定width属性。

另外指定元素时尽量使用em而不是px做单位。

7.float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。

因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。

也可以使用hack方法为IE指定特别的值。

8.float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。

因此请保证宽度之和小于99%。

9.是否重设了默认的样式？

某些属性如margin、padding等，不同浏览器会有不同的解释。

因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

1、form　如果您需要提交数据，那个form标签是必不可少的。

它标记了数据提交的方式及处理页面。

但form默认外补丁的问题也使许多人找不着北了。

如下图，在IE6和IE7下，默认form是有上下外补丁的。

这样就造成了本来想和上下内容贴近显示的，结果却离的很远，有可能造成页面错乱。

而在火狐下却没有外补丁的。

解决的办法是在样式表中加入form{margin:

0px;}，这样在IE和火狐下显示都一致了。

2、宽度　当用css定义文本框和下拉列表框的宽度相同时，文本框的宽度更大一些。

目前，本人的解决办法是把select的宽度定义大一样，一点一点调整至一样为止。

如果您还有什么更好的办法，欢迎贴出来。

　　另外一个问题就是按钮的宽度在IE和火狐下显示一样，解决这个办法就是用css定义按钮的宽度。

收藏夹小图标例如：

首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。

然后将下面的代码嵌入head区：

网页设计中常用的CSS命名规则2009-09-1113:

422009-06-2712:

47头部：

header

　　内容：

content/container

　　尾：

footer

　　导航：

nav

　　侧栏：

sidebar

　　栏目：

column

　　页面外围控制整体布局宽度：

wrapper

　　左右中：

leftrightcenter

　　登录条：

loginbar

　　标志：

logo

　　广告：

banner

　　页面主体：

main

　　热点：

hot

　　新闻：

news

　　下载：

download

　　子导航：

subnav

　　菜单：

menu

　　子菜单：

submenu

　　搜索：

search

　　友情链接：

friendlink

　　页脚：

footer

　　版权：

copyright

　　滚动：

scroll

　　内容：

content

　　标签页：

tab

　　文章列表：

list

　　提示信息：

msg

　　小技巧：

tips

　　栏目标题：

title

　　加入：

joinus

　　指南：

guild

　　服务：

service

　　注册：

regsiter

　　状态：

status

　　投票：

vote

　　合作伙伴：

partner

（二）注释的写法:

　　/*Footer*/

　　内容区

　　/*EndFooter*/

　　（三）id的命名:

（1）页面结构

　　容器:

container

　　页头：

header

　　内容：

content/container

　　页面主体：

main

　　页尾：

footer

　　导航：

nav

　　侧栏：

sidebar

　　栏目：

column

　　页面外围控制整体布局宽度：

wrapper

　　左右中：

leftrightcenter

（2）导航

　　导航：

nav

　　主导航：

mainbav

　　子导航：

subnav

　　顶导航：

topnav

　　边导航：

sidebar

　　左导航：

leftsidebar

　　右导航：

rightsidebar

　　菜单：

menu

　　子菜单：

submenu

　　标题:

title

　　摘要:

summary

　　（3）功能

　　标志：

logo

　　广告：

banner

　　登陆：

login

　　登录条：

loginbar

　　注册：

regsiter

　　搜索：

search

　　功能区：

shop

　　标题：

title

　　加入：

joinus

　　状态：

status

　　按钮：

btn

　　滚动：

scroll

　　标签页：

tab

　　文章列表：

list

　　提示信息：

msg

　　当前的:

current

　　小技巧：

tips

　　图标:

icon

　　注释：

note

　　指南：

guild

　　服务：

service

　　热点：

hot

　　新闻：

news

　　下载：

download

　　投票：

vote

　　合作伙伴：

partner

　　友情链接：

link

　　版权：

copyright

　　（四）class的命名:

（1）颜色:

使用颜色的名称或者16进制代码,如

　　.red{color:

red;}

　　.f60{color:

#f60;}

　　.ff8600{color:

#ff8600;}

（2）字体大小,直接使用"font+字体大小"作为名称,如

　　.font12px{font-size:

12px;}

　　.font9pt{font-size:

9pt;}

　　（3）对齐样式,使用对齐目标的英文名称,如

　　.left{float:

left;}

　　.bottom{float:

bottom;}

　　（4）标题栏样式,使用"类别+功能"的方式命名,如

　　.barnews{}

　　.barproduct{}

　　注意事项:

:

　　1.一律小写;

　　2.尽量用英文;

　　3.不加中杠和下划线;

　　4.尽量不缩写，除非一看就明白的单词.

　　主要的master.css

　　模块module.css

　　基本共用base.css

　　布局，版面layout.css

　　主题themes.css

　　专栏columns.css

　　文字font.css

　　表单forms.css

　　补丁mend.css

打印print.css

解决IE6的浮动元素的双倍边距问题

对一个div设置了float:

left和margin-left:

100px那么在IE6中，这个bug就会出现。

您只需要多设置一个display即可，代码如下：

div {float:

left;margin:

40px;display:

inline;} 

让footer总是停留在页面的底部

Java代码

XHTML：

 *Place all page content here*