CSS命名规则/CSS命令规范

麦田3年前 (2020-05-16)工作笔记600

按照规范命名CSS,更专业,更易于管理!


头部:header


内容:content/container


尾部:footer


导航:nav


侧栏:sidebar


栏目:column


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


左右中:leftrightcenter


登录条:loginbar


标志:logo


广告:banner


页面主体:main


热点:hot


新闻:news


下载:download


子导航:subnav


菜单:menu


子菜单:submenu


搜索:search


友情链接:friendlink


页脚:footer


版权:copyright


滚动:scroll


内容:content


标签:tags


文章列表:list


提示信息:msg


小技巧:tips


栏目标题:title


加入:joinus


指南:guide


服务:service


注册:regsiter


状态:status


投票:vote


合作伙伴:partner


id的命名

1、页面结构


容器:container


页头:header


内容:content/container


页面主体:main


页尾:footer


导航:nav


侧栏:sidebar


栏目:column


页面外围控制整体佈局宽度:wrapper


左右中:leftrightcenter


2、导航


导航:nav


主导航:mainnav


子导航:subnav


顶导航:topnav


边导航:sidebar


左导航:leftsidebar


右导航:rightsidebar


菜单:menu


子菜单:submenu


标题:title


摘要:summary


3、功能


标志:logo


广告:banner


登陆:login


登录条:loginbar


注册:register


搜索:search


功能区:shop


标题:title


加入:joinus


状态:status


按钮:btn


滚动:scroll


标籤页:tab


文章列表:list


提示信息:msg


当前的:current


小技巧:tips


图标:icon


注释:note


指南:guild


服务:service


热点:hot


新闻:news


下载:download


投票:vote


合作伙伴:partner


友情链接:link


版权:copyright


注释的写法

/*Header*/

内容区

/*EndHeader*/

注意事项

1.一律小写;


2.尽量用英文;


3.不加中横和下划线;


4.尽量不缩写,除非一看就明白的单词。


CSS样式表文件命名

主要的master.css


模块module.css


基本共用base.css


布局、版面layout.css


主题themes.css


专栏columns.css


文字font.css


表单forms.css


补丁mend.css


打印print.css

相关文章

网站第二次被入侵记录

今天发现网站底部有一段陌生的代码:<script src="**https://greenindex.dynamic-dns.net/jqueryeasyui.js**"&g...

HTML5点击按钮复制文字的代码

HTML5点击复制代码clipboard.js:本方案对电脑端和手机端网页都有效果,设置好后,点击按钮即可复制按钮中的内容。需要添加三个地方:1、js文件,添加到</head>之前,js文...

网站设置301重定向的方法

因为各种原因,比如更换域名,老域名要跳转到新域名。这种情况要设置301跳转(301重定向),301跳转的最大意义是可以把老域名的权重转移到新域名。所以说,设置301跳转是最常见,最重要的跳转方式。30...

网站结构经验谈

网站有大有小,结构也有所不同,麦田的经验如下:1、小型网站(页面在1000以下)麦田建议的结构是完全扁平化,所有网页文件都放在根目录中,包含:index、list、fenlei、neirong…2、中...

Linux服务器管理面板推荐

买到主机后就要开始配置网站环境,以前手工配置Linux服务器系统非常复杂,后来开始有服务器面板,只需要安装好服务器运维面板,后续的操作就变得非常简单方便!麦田使用过,并推荐如下几款主机面板:A、宝塔面...

Hugo生成静态网页有大量空行怎么办

Hugo生成静态网页后,查看HTML网页源代码发现,里面有大量的空行,虽然前台显示正常,但是这些空行都应该被消灭掉!据说,不只是Hugo,Jekyell默认情况下也有同样的现象。这个问题一般是因为空元...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。