当前位置:Gxlcms > html代码 > HTML命名+CSS书写顺序_html/css_WEB-ITnose

HTML命名+CSS书写顺序_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:16人阅读

HTML CSS

在XHTML中定义ID时都用得上,主要是方便CSS定义样式时能一眼看穿。所以,CSS命名仅作参考。(1)页面结构类容器: container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper(2)导航类导航:nav主导航:mainnav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar位置导航: crumb菜单:menu子菜单:submenu面包屑:breadcrumb(即页面所处位置导航提示)(3)网页内容类标题: title摘要: summary箭头: arrow商标: label网站标志: logo转角/圆角: corner横幅广告: banner子菜单: subMenu搜索: search搜索框: searchBox登录: login登录条:loginbar工具条: toolbar下拉: drop标签页: tab当前的: current列表: list滚动: scroll服务: service提示信息: msg热点:hot新闻: news小技巧: tips下载: download栏目标题: title热点: hot加入: joinus注册: regsiter指南: guide友情链接: friendlink状态: status版权: copyright按钮: btn合作伙伴: partner投票: vote左右中:left right center(二)注释的写法:/* Footer */内容区/* End Footer */(三)id的命名:(1)页面结构容器: container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center(2)导航导航:nav主导航:mainbav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar菜单:menu子菜单:submenu标题: title摘要: summary(3)功能标志:logo广告:banner登陆:login登录条:loginbar注册:regsiter搜索:search功能区:shop标题:title加入:joinus状态:status按钮:btn滚动:scroll标签页:tab文章列表:list提示信息:msg当前的: current小技巧:tips图标: icon注释:note指南:guild服务:service热点:hot新闻:news下载:download投票:vote合作伙伴:partner友情链接:link版权:copyright(四)class的命名:(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用"font+字体大小"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用"类别+功能"的方式命名,如.barnews { }.barproduct { }注意事项::1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写,除非一看就明白的单词.推荐的 CSS 书写顺序//显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent


回复讨论(解决方案)

谢楼主送分

名字太长了。。有的一层套一层的那种该怎么命名才比较对呢?

很  赞!

我好喜欢哦。

呵呵 已经保存了,以后就不会为起什么名而感到烦恼!谢谢啦!

面包屑是什么东西?


版权:copyright 后面有一个卷C的字符.

如何显示?

学习了,太棒了

有些使用了驼峰方式,有些没使用,不统一。

好东西。接分来着

我不是很喜欢驼峰。

这个不错了,写代码一定要规范

不管写什么语言的代码,命名永远是让人头疼的任务~~

很不错,谢谢!

挺不错的,支持一下。规范

很好,收藏了

收藏了,接分。

多谢整理分享

有用,望第一次得分!

正找这个呢

可以参考下,命名确实是一个头疼的问题

很实用的东西!

这还是很有用的

这个不错,命名总是让人头疼的

谢楼主。。。

真不错,,,终于知道怎么命名了

很细心的楼主, 希望以后资源共享互勉励,

谢谢楼主!!!

学习了,谢谢

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

这里的命名方式不推荐,应该按照功能或结构命名,而不应按照表现命名。
例如.red { color: red; } 如果要把颜色改成green,岂不是要变成.red { color: green; },
让后面的开发人员看的莫名其妙。

很好很强大

谢谢···

嗯 一直没怎么注意

人气教程排行