返回列表 发新帖

div+css样式表的id和class常用命名规则

3,160.5k 26
开着越野放牛 发表于 2013-6-14 21:01:28|湖北 | 查看全部 阅读模式
div+css样式表的id的常用命名规则如下表所示:
页头
7 L0 b) }5 T, P. h  n
header
$ f4 j0 e2 \# q1 E& n" q! ?
登录条
/ t: H3 A/ j5 R& ^! j$ |
loginBar
' I) F0 T! h. F4 F  d, o7 I5 z- q' w
标志
! d  h. F7 e& W/ }6 S
logo8 X3 |# ]1 S2 x3 S" D/ U& E' V
侧栏
# M2 w) D' _2 O+ A( k
sideBar
" O) l+ a( m0 Z3 A% N
广告3 u8 @6 f8 o9 m# k% u  d
Banner
, X# J3 m% r1 W, y
导航
! P4 H, ~; }5 K
nav( ?3 F2 e6 K" }! a
子导航1 s" J# x9 f& A
subNav
) C1 Q6 N0 x% @+ z' g! j
菜单% `- @+ L- z' w
menu
  w0 l" J; S) F5 \+ t" L
子菜单
' T/ w  ]( s5 X9 T7 e
subMenu
. d4 I1 D% A3 \8 J8 C, B3 ?! K  c
搜索
$ Y7 ]6 j# \6 \/ z: F: P9 l6 }/ X; b
search3 U  X" M  f- a" ^' ]2 i
滚动/ g7 @8 h1 U* u: I
scroll* w, y# @" ^/ G' f- Z
页面主体
# s; L+ k5 V8 G+ d9 Q2 _
main( E# Y% M" _7 F# _
内容
, I1 a8 U5 `8 X
content
2 y5 O. R7 T$ t# c; o5 L# Z6 Z# S
标签页6 ?3 r' |; q9 E% h( O
tab
/ V/ n/ l" @/ [, E! o
文章列表
: F' _; U& Z/ f5 r/ M
list! m+ W" E. E3 h
提示信息
; R8 f, L9 B$ l8 F% x, V, |
msg$ \; i7 H2 r2 r: T  n" K) u
小技巧+ K; z! R  p3 `' u$ p/ V
tips
8 ^) s+ ]& \5 O; O  I
栏目标题
: H. C% o% f; {0 z; N5 M
title! `* C- u: ^& d( h7 Z
加入
5 G! p" \$ x' R
joinus
; l& x! h: [; ~& q
指南) I, I4 k) F& s# |' S& c
guild7 z* H% Z* L  e" x
服务  v& \, ~! Q, z' s& [3 @$ y
service
- B( B* d: k6 L$ K
热点
. ]& ]$ {; [# Y0 m1 r
hot
9 T5 ~$ s: H2 E. Y1 X+ E8 Z* C
新闻1 \4 ^7 s7 _$ e* U. @
news
, W' |- A3 S* L6 x9 E
下载
& ^, l* T, l3 C' Z
download( \' S3 K0 ~6 e! E( c4 g/ n
注册- G; x2 U( `5 H. F
regsiter
* s  z' K( G7 T1 f  _/ B$ y
状态
3 U9 p# |4 G$ j) V+ h, F8 R
status
1 C# H4 |7 O; H
按钮
1 L4 h8 z  A2 @1 A( C% T; L. l
btn$ O% o- L; k4 L2 `; q- t
投票
; D' s- `+ i' ^
vote7 Z$ L. N7 a9 _* ]) }; ^2 X. E5 D! T
合作伙伴
7 M$ t9 b8 N% N. x( }0 M; o
partner8 Q. Z7 R9 a; N( @! [4 K
友情链接2 n8 ]$ h6 |: C5 U9 G- @
friendLink( f8 w0 l& w  t0 l( b
页脚& Z; c3 O, v' X: {
footer# A3 q4 J( \; y- |) D) Z# r
版权. g, W1 H' Q$ ?
copyRight  C/ W4 j' I$ s# L) ]2 X' h& e( h% ?
$ E9 t/ Z. ~; T  ~2 o
4 D$ J7 }2 e" W! y+ K4 P
' t  d$ b$ [( l$ L& E- A# {9 d
div+css样式表的class的常用命名规则如下表所示:
外 套
4 m; `  |! ]# `) X
wrap
. E( @/ s8 j& W  U+ N6 d) {
主导航% H, m( {0 N5 L  U3 Y6 B8 N
mainNav7 ~  C% j' M  j% X$ Q( t+ q+ R( ]! N! W
子导航
- n$ ~9 Z% J# r, V# D
subnav
$ o3 ?* ^0 I) [8 j# P& b
页 脚& X. J! c" h1 K% X
footer
; K% a# O. C0 G" c$ f! I+ K
整个页面
0 U  m: t5 P- a; g2 j0 i
content
: Q" X+ }" B" H# v
页 眉# U0 M! R3 T1 I9 W5 P, P8 _/ L
header
' ]% e: V# |6 W- b" p9 @/ `' P3 M. Q
商 标; c3 m4 \. W* g* ~. B
label
  L+ k# @# ?7 o! Q. ]
标 题
$ c$ h, N! q" r0 P* r8 ~
title9 p2 k2 @( S- ]* C
主导航
# G1 I; R1 c' N
mainNav9 `$ l8 `& t4 h. s1 x
边导航
9 E# ^8 D/ J# o
sidebar9 S/ m5 ?" |! o" ?6 B4 l
左导航
5 X6 U$ D- X# x. _' k. Q2 |
leftsideBar
! }4 j( |) J0 }/ t
右导航' n6 k) B+ @; x  h( ^$ o7 J. [5 N
rightsideBar0 T- o! _( i; u" b# c
旗 志
1 S1 Z- t; k& G6 G
logo5 e. s; C* _8 H; i8 i
标 语
" s* [$ O, K' n4 n, I
banner
2 @& p5 A; `& e' N
菜单内容; f3 x' ~) g1 ~- V, U
menu1Content2 I1 T9 a6 g  c- e8 c) ]3 W7 z$ K6 @
菜单容量& E# T1 Z( N' x+ ]: `" p
menuContainer2 G4 F# Q& j7 \
子菜单- Y/ ^: r6 Y6 C" ~2 s0 K" a- V  m
submenu
/ U$ c/ J& |/ _) R: B
边导航图标- J9 }7 C9 B0 D  U4 ~
sidebarIcon9 p* D+ G* {' B
注释
0 _4 s  G  k6 h$ _+ j- |. U+ s8 Q
note
+ J# I" U8 J. Z! A0 W' X
面包屑8 Y  l) g$ v5 o8 I, S
breadCrumb. }9 ~' T. o( t6 B$ ~% P7 _; y
容器1 d7 U5 C# S9 y5 W6 k# j8 ~
container
& b! n$ m5 s+ f/ K
内容
% V6 Z7 E" l! z# O! b3 ]
content# `2 v' t( X) A7 |% a5 F. N1 w
搜索
$ [4 K0 T) U* M% \' |8 G# o$ I
search
7 z! T' ?9 `. U7 i. L
登陆# c. _* a+ q4 a7 A! j2 J
login/ Q0 I" I6 I; i2 v# e+ N' O
功能区3 {( ]" _! Z! W" s  h+ K+ q9 Q
shop1 Q4 d; q! W7 p! g
当前的
7 n3 V* \3 ^1 y# g9 V/ g
current
* ?/ R$ ^. v) q) k  P

0 w% s. L2 u8 e. ^4 B* U7 O) ^
6 `" t- v; T3 Z9 n1 V, H
" o7 P! z' O: b( P* [3 j7 z. b

1 F* W. L5 M3 ~* W- }
$ T4 W8 R1 ?. k9 r3 f8 Z

回复|共 26 个

inhidgehila Lv.8 发表于 2014-10-1 10:27:26|美国 | 查看全部
我有家的感觉~~你知道吗
ofbnbaiinfnh Lv.8 发表于 2014-10-1 10:42:17|美国 | 查看全部
貌似我没看懂那~~~
kwjvtwzx Lv.15 发表于 2014-10-1 10:35:31|美国 | 查看全部
这日子没法过了....
ofbnbaiinfnh Lv.8 发表于 2014-10-1 11:09:42|德国 | 查看全部
怎么就没人拜我为偶像那??
efiew Lv.15 发表于 2014-10-1 11:06:09|美国 | 查看全部
什么啊
贾修4762 Lv.6 发表于 2014-10-25 12:53:34|北京 | 查看全部
好帖要顶,楼主的头像还是不错滴
7 b4 s% E8 T( b; m6 I8 _
                               
登录/注册后可看大图

* T/ y+ q- l# O" U$ F- f                               
登录/注册后可看大图

( |  U( ?, {! H% Y" F                               
登录/注册后可看大图
9 f( K9 R  O$ X- J) B4 d8 Q
                               
登录/注册后可看大图
9 S0 G; l2 W- _% e3 ~. k: v% a4 i0 z
                               
登录/注册后可看大图
3 g: L9 C' v( U& F' e: d% r
                               
登录/注册后可看大图

0 l" I  `/ r! [: k& W# A                               
登录/注册后可看大图
( H" [& y' |' @( @  n6 K
                               
登录/注册后可看大图

  c: f9 b* }% R( V5 z                               
登录/注册后可看大图
6 Y4 W% i2 H6 _  M, v
                               
登录/注册后可看大图
# y1 S( }9 c- ~% x% [$ @
                               
登录/注册后可看大图

2 W5 ?6 y; B! C                               
登录/注册后可看大图
  n9 P/ r1 }5 u* p0 C8 n  S
                               
登录/注册后可看大图

4 u. s7 B0 R. D0 O# W                               
登录/注册后可看大图
+ o( E% Z" ^: C" |- a  i
                               
登录/注册后可看大图
亮凌庚 Lv.15 发表于 2014-10-31 15:45:06|中国 | 查看全部
只是本着“看贴(虽然看不懂)回贴,利人利己的中华民族优秀传统美德”,顺便赚点积分。
ffuip Lv.8 发表于 2014-10-31 15:15:02|加拿大 | 查看全部
嘻嘻~` 要是只看你的话~`~`` 很容易让人家以为你也跟偶们一样是天使类~`(偷笑中````````
亮凌庚 Lv.15 发表于 2014-10-31 15:34:33|INNA | 查看全部
估计你是没见识过~` 呵呵
inhidgehila Lv.8 发表于 2014-10-31 16:04:00|意大利 | 查看全部
呵呵 我可不敢~~~~
ofbnbaiinfnh Lv.8 发表于 2014-10-31 15:24:05|匈牙利 | 查看全部
呵呵 没事怎么有点被讽刺的味道啊
Acropozelan 发表于 2014-12-16 09:16:06|美国 | 查看全部
怎么这么跟别人不一样类~
Acropozelan 发表于 2014-12-16 09:17:54|美国 | 查看全部
说嘛1~~~想说什么就说什么嘛~~
wwdu926a 发表于 2014-12-16 09:15:33|意大利 | 查看全部
哈哈 ok ~~~

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表