网页公共命名：

• #wrapper - - 页面外围控制整体布局宽度
• #container或#content - - 容器，用于最外层
• #layout - - 布局
• #head，#header - - 页头部分
• #foot，#footer - - 页脚部分
• #nav - - 主导航
• #subnav - - 二级导航
• #menu - - 菜单
• #submenu - - 子菜单
• #sidebar - - 侧栏
• #sidebar_a,#sidebar_b - - 左边栏或右边栏
• #main - - 页面主体
• #tag - - 标签
• #msg，#message - - 提示信息
• #tips - - 小技巧
• #vote - - 投票
• #friendlink - - 友情链接
• #title - - 标题
• #summary - - 摘要
• #loginbar - - 登录条
• #searchInput - - 搜索输入框
• #hot - - 热门热点
• #search - - 搜索
• #search_output - - 搜索输出和搜索结果相似
• #searchBar - - 搜索条
• #search_results - - 搜索结果
• #copyright - - 版权信息
• #branding - - 商标
• #logo - - 网站LOGO标志
• #siteinfo - - 网站信息
• #siteinfoLegal - - 法律声名
• #siteinfoCredits - - 信誉
• #joinus - - 加入我们
• #partner - - 合作伙伴
• #service - - 服务
• #regsiter - - 注册
• arr/arrow - - 箭头
• #guild - - 指南
• #sitemap - - 网站地图
• #list - - 列表
• #homeepage - - 首页
• #subpage - - 二级页面子页面
• #tool，#toolbar - - 工具条
• #drop - - 下拉
• #dorpmenu - - 下拉菜单
• #status - - 状态
• #scroll - - 滚动
• .tab - - 标签页
• .left,.right,.center - - 居中、左、右
• .news - - 新闻
• .download - - 下载
• .banner - - 广告条（顶部广告条）
• 电子贸易相关：
• .products - - 产品
• .products_prices - - 产品价格
• .products_description - - 产品描述
• .products_review - - 产品评论
• .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选择器在HTML中重复使用调用。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS中隐藏input光标的方法是什么，有什么问题要注意

  这篇文章主要给大家介绍了关于如何利用css隐藏input光标的相关资料，这是最近工作中遇到的一个需求，虽然看似不合理，但是有需要就要有解决的办法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。

• 基于CSS怎样将元素固定容器底部，有哪些方法

  基于CSS怎样将元素固定容器底部，有哪些方法？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

• CSS让背景图片自适应大小的方法是什么

  在css中，可以利用“background-size”属性设置背景图片自适应大小，该属性用于设置背景图片的大小，只需要给背景图片元素添加“background-size:cover;”样式，即可使背景图片的大小自适应

• HTML超连接的使用是什么样，有何不同吗

  在HTML中如果你想从这个页面连接到另一个页面就要使用a标记(超连接)1.普通连接<ahref="网址"target="目标窗口弹出方式">文本或图片</a>如果没有跳转目标可以将href="#'(表示空连接)。如果不写文本或不添加图片那么超链接是看不见的，也点不到。2.锚点连接<ahref="#box">盒子</a&am

• HTML页面下拉滚动时导航栏渐变显现的效果怎么做

  这篇文章主要介绍了html+css+js实现导航栏滚动渐变效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下