HTML,CSS的class与id命名规则

分类:技术文章 时间:2019-08-23 17:12 浏览:0 评论:0
0

网页公共命名:

#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. 本站所有资源来源于用户上传或网络,仅作为参考研究使用,如有侵权请邮件联系站长!
2. 本站积分货币获取途径以及用途的解读,想在本站混的好,请务必认真阅读!
3. 本站强烈打击盗版/破解等有损他人权益和违法作为,请各位会员支持正版!
4. 技术文章 > HTML,CSS的class与id命名规则

用户评论