HTMLの命名＋CSSの書き方_html/css_WEB-ITnose

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

ディスカッションへの返信 (解決策)

ポイントをくれた投稿者に感謝します

名前が長すぎます。 。 1つのレイヤー内に重ねられているものの正しい名前は何ですか?

とても素敵です！

とても気に入っています。

あはは、保存したので、今後は名前を付けることに悩まされません!ありがとう！

パンくずリストとは何ですか?


著作権: copyright その後ろにボリューム C の文字があります

勉強になりました

キャメルケース方式を使用するものと、使用しないものがあります。 。

良いことだよ。フォローアップ

私はこぶがあまり好きではありません。

これはいいですね、コードの書き方は標準化する必要があります

どの言語でコードを書いても、名前付けはいつも頭の痛い問題です~~

とても良いですね、ありがとう!

とても良いですね、応援してください。仕様

非常に良い、収集されました

ポイントを受け取りました。

整理して共有していただきありがとうございます

役に立ちます、初めての得点になることを願っています!

これを探していました

参考にしてください、ネーミングは本当に悩みどころです

とても実用的なものです！

これは今でも非常に便利です

これはいいですね、名前をつけるのはいつも頭の痛い問題です

オリジナルの投稿者に感謝します。 。 。

すごいですね、、、やっと名前の付け方が分かりました

とても丁寧なポスターですね、将来的にはリソースを共有してお互い励まし合えるといいですね、

ありがとう、ポスターさん！ ！ ！

学びました、ありがとう

(1) 色:

.red { color: red; }

.f60 { color: #f60; } などの色の名前または 16 進コードを使用します。 : #ff8600; }

(2) フォント サイズ。
.font12px { font-size: 12px }
.font9pt {font-size: 9pt; など、名前として直接使用します。

(3 ) 整列スタイル、整列ターゲットの英語名を使用します (例:
.left { float:left; }
.bottom { float:bottom; } )

ここでの命名方法は推奨されません。性能に応じて命名するのではなく、機能や構造に応じて命名する必要があります。
たとえば、 .red { color: red; } 色を緑に変更したい場合は、 .red { color: green; } になるのではないでしょうか。
これは、開発者にとって混乱を招くことになります。

とても良くてパワフルです

ありがとう...

まあ、あまり気にしていませんでした