CSS的class与id常用的命名规则

网页公共命名：

# wrap PE r - - 页面外围控制整体布局 宽 度 #cont ai ner或#content - - 容器，用于最外层 #layout - - 布局 #head，#header - - 页头部分 #foot，#footer - - 页脚部分 #nav - - 主导航 #s ub nav - - 二级导航 #menu - - 菜单 #submenu - - 子菜单 #sidebar - - 侧栏 #sidebar_a,#sidebar_b - - 左边栏或 右边 栏 #main - - 页面 主体 #tag - - 标签 #msg，#message - - 提示信息 #tips - - 小技巧 #vote - - 投票 #friendlink - - 友情链接 #t IT le - - 标题 #summary - - 摘要 #lo gin bar - - 登录条 #se Arch Input - - 搜索输入框 #hot - - 热门 热点 #search - - 搜索 #search_output - - 搜索输出和 搜索结果 相似 #searchBar - - 搜索条 #search_results - - 搜索结果 #copyright - - 版权信息 # br anding - - 商标 # LOG o - - 网站LOGO标志 #sit ei nfo - - 网站信息 #siteinfoLegal - - 法律声名 #siteinfoC red its - - 信誉 #joinus - - 加入我们 #partner - - 合作伙伴 #service - - 服务 #regsiter - - 注册 arr/arrow - - 箭头 #guild - - 指南 #sitemap - - 网站地图 #list - - 列表 #homeepage - - 首页 #subpage - - 二级页面子页面 #tool，#toolbar - - 工具条 #drop - - 下拉 #dorpmenu - - 下拉菜单 # stat us - - 状态 #scroll - - 滚动 .tab - - 标签页 .left,.right,. center - - 居中、左、右 .news - - 新闻 .download - - 下载 .banner - - 广告条（顶部广告条） 电 子贸易相关： . PR oducts - - 产品 .products_prices - - 产品价格 .products_description - - 产品描述 .products_ rev iew - - 产品评论 .editor_review - - 编辑评论 .news_release - - 最新产品 .publisher - - 生产商 .screenshot - - 缩略图 .faqs - - 常见问题 .keyword - - 关键词 . blog - - 博客 .forum - - 论坛

基础的命名：

外套 wrap - - 用于最外层 头部 header - - 用于头部 主要内容 main - - 用于主体内容（中部） 左侧 main-left - - 左侧布局 右侧 main-right - - 右侧布局 导航条 nav - - 网页 菜单导航 条 内容 content - - 用于网页中部主体 底部 footer - - 用于底部

CSS文件命名：

master.css,style.css - - 主要的 module.css - - 模块 base.css - - 基本共用 layout.css - - 布局，版面 themes.css - - 主题 columns.css - - 专栏 font.css - - 文字、字体 forms.css - - 表单 mend.css - - 补丁 print.css - - 打印

命名建议：

无论是使用"."(小写句号)选择符开头命名，还是使用"#"(井号)选择符号开头命名，我们最后都遵循，主要的， 重要 的，特殊的，最外层的 盒子 用[#]（井号）选择符号开头命名，其他都用"."(小写句号)开头命名，同时考虑命名的CSS选择器在HT ML 中重复使用调用。

到此这篇关于CSS的class与id常用的命名规则的 文章 就介绍到这了,更多相关CSS class与id命名规则内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS的class与id常用的命名规则 全部内容，希望文章能够帮你解决 CSS的class与id常用的命名规则 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS的class与id常用的命名规则的详细内容...