1.公共部分和经常要用到的样式 整个容器: container 外围整体布局: wrap 页头部分: head/header/top 内容:content 页脚部分:foot/footer/bottom 栏目:column 主体部分:main 左/中/右三栏 main_left/main_mid/main_right或者main_l/main_m/mian/r 侧栏:sidebar 左右两栏 sidebar_l/sidebar_r或者leftsidebar/rightsidebar 左/中/右:left/center/right 标签页:tag 首页:homepage 二级页面:subpage 网站标识:logo 商标:brand 主导航:nav/navi 二级导航:subnav 顶部导航:topnav 侧导航:sidenav 左/右导航:leftsidenav/rightsidenav 子导航:subnav 菜单:menu 子菜单:submenu 标题:title 摘要:summary 下拉:drop 下拉菜单:dropmenu 搜索:search 热门搜索:hotsearch 关键字:keyword 搜索输入框:search_input 搜索条:searchbar 搜索结果:search_result 登录:login 注册:regsiter 状态:status 登录条:loginbar 忘记密码:foreget_password 会员:member 友情链接:friendlink/link 版权信息:copyright 投票:vote 合作伙伴:partner 服务:servic 指南:guid 网站信息:siteinfo 网站地图:sitemap 网站帮助:sitehelp 法律声明:siteinfolegal 信誉:siteinfocredits 加入我们:joinus 关于我们:aboutus 联系我们:contantus 常见问题:faq 博客:bolg 论坛:forum/bbs 按钮:button/but 功能区:shop 图标:icon 箭头:arrow/arr 提示信息:message/msg 小技巧:tips 注释:note 当前的:current 滚动:scroll 工具条:toolbar/tool 放大:zoom 内容:content 时间:time 日期:data 热点:hot 新闻:news 下载:download 产品:products/pro 缩略图:screenshot 产品价格:pro_prices 产品描述:pro_description 产品评论:pro_review 编辑评论:editor_review 最新产品:news_release/newspro 生产商:publisher …… 2,一些常用样式的命名习惯 1)首先定义公共部分的css 如:* { font-size:12px} body { color:#666} ul li { list-sytle:none} form { margin:0; paddingL0} input { color:#333} label p a a:hover dl,dd,dt 文章标题按主次大小依次h1,h2,h3,h4,h5,h6 …… 2)区域块:box/area 区域块样式类别+box/area,比如新闻区域块:newsbox/newsarea 产品区域块:probox/proarea 标题栏:bar 标题栏样式类别+bar,比如新闻标题栏:newsbar 产品标题栏:probar 列表:list 列表样式类别+list,比如新闻列表newslist 产品列表:prolist 3)对齐样式,如: .left { float:left} .right { float:right} 4)定义行高样式,如定义一个行高为9px的样式: .lineheight9px { lineheight:9px} 5)定义字体大小颜色,如定义一个颜色为红色、14号字体粗体 .font12red_b {font:700 14px "SimSun"; color:red} 6)定义按钮样式,but/button+属性或者功能, 如定义一个绿色按钮 button_green/but_green 搜索按钮 button_search/but_search 注册/登陆按钮 button_reg/but_reg button_login/but_login 7)输入框样式,input+属性或者功能 如定义搜索框样式:.input_search { border:1px solid #ccc; height:20px} 8)定义图片样式,img+属性或者功能 如:.img_border { border:1px solid #ccc} .img_float { float:left} 9)清屏: .clear { clear:both} .over { overflow:hidden} …… 3,一些注意事项: 1)一律小写字母; 2)尽量用英文; 3)不加中杠,有必要用下化线区分; 4)css注释 /* ffff */ 注意要加空格,我就碰到过因为不小心没加上空格,在JSP读取下会忽略掉注释下的第一个css 5)css文件最好用utf-8 6)页面居中:margin:0 auto; 居右:margin:0 0 0 auto; 居左:margin:0 auto 0; 4.css文件名命名 1)如果是一个小型网站或一个企业网站,只要一个css文件就可以,我一般取名为:style.css/main.css/layout.css 2)如果是个大型的门户网站,css一般分三个文件区分出来,用的最常用的css和公共部分的css 放在common.css;一些主要的其他css放在 content.css;字体放在font.css