HTML,CSS的class与id命名规则

来源:用户投稿 收藏

网页公共命名:

#wrapper - - 页面外围控制整体布局宽度

#container或#course- - 容器,用于最外层

#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 - - 网页菜单导航条

内容 course - - 用于网页中部主体

底部 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中重复使用调用。


原文链接:https://blog.csdn.net/weixin_43606158/article/details/95870475



免责声明:1.凡本站注明“来源:XXX(非小二胡工作室)”的作品,均转载自其它媒体,所载的文章、图片、音频视频文件等资料的版权归版权所有人所有,如有侵权,请联系xiaoerhu#88.com处理;2.凡本站转载内容仅代表作者本人观点,与小二胡工作室无关。
0 条评论

网友留言