返回列表 发新帖

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

3,160.5k 26
开着越野放牛 发表于 2013-6-14 21:01:28|湖北 | 查看全部 阅读模式
div+css样式表的id的常用命名规则如下表所示:
页头
3 ^- g% s) V, b2 y! l( s4 [' k
header
. p0 _' o4 l0 v9 F
登录条
# i) V+ p" s: Q4 t7 M
loginBar' l3 v' W2 T8 u+ ?7 y( M
标志
6 s' ?* v0 H( U7 z7 f* G1 x
logo
, V+ b: ~5 P+ u* ^
侧栏! F4 n* l7 M: k
sideBar# E* f( S1 v$ |$ o: g
广告# n/ ~( U) u3 h1 h8 U
Banner
& z. R3 `7 C6 Q) h* Y: D2 @
导航
2 a: w* r0 J  M7 k; z
nav: \# _' |9 _. D# G
子导航: Q' @8 n% b3 T7 h
subNav
6 x5 @5 R+ I% x- b
菜单3 F# S3 F1 E" r- c- M( R* _8 l* f  z
menu4 V$ X4 U+ Y4 D7 p
子菜单9 ^' E  o9 B9 b/ ~
subMenu
6 w3 |) h# h: u, T6 V3 R
搜索
% D% T; q& Y) G3 a- d
search9 S: K6 r( f& Q$ G5 w2 Q1 G# d' R' P
滚动
; [7 i' r; U2 o6 B
scroll
: x( R/ o5 _9 J, f
页面主体" I, ~6 _' K2 ~% t
main
- O! `* X) V3 C/ q0 B. N
内容
: `7 y/ ^; j1 P5 O* V  @+ J
content
# M1 `9 f7 x: |4 e- O2 p
标签页: _+ ?2 h% Q9 D/ Y: h! @# p
tab' A7 j# F$ g; _* t
文章列表  X2 [$ R. h& X2 ~2 t7 G# H9 r
list- L) p4 S' I) ]! [/ L' x4 r1 }
提示信息  }$ y; `# S2 t: Y
msg
5 V4 K0 y; r0 X
小技巧
0 f" B' T4 o: Q9 _
tips
+ ]. c# C, o: g
栏目标题6 J; l0 @+ `* A' i9 A  t
title; b- H% V! z% O+ |: J
加入
+ n  K* [4 }5 N
joinus4 ~3 n- K& \0 |( u! [) M
指南
9 b! u# m( S4 u& D# I) D1 O
guild$ Q2 p5 R/ r& m7 H7 M6 r
服务, p* W; e! x5 b* j( y
service+ k* A0 n' Q$ }) Z  ^) Y+ z
热点
6 K& x/ b/ r) z6 x) D
hot
0 l! W" }& b/ i1 u
新闻- k+ m0 Y' O) Q) s
news
* {% W$ v8 q- j  g8 r4 u
下载
7 `2 U# ~; S4 f$ V. ?/ G7 J" K
download7 t, N) u. n5 l9 N2 a( ?2 ^! p
注册; v4 u: c, U) b* L. i8 r! z* }9 z0 M
regsiter9 W  b- Y. o7 M5 M( v6 T& H
状态
. _; A7 F( o, f2 ?- \
status$ k5 e; A: [3 e- k+ }. z% B2 e
按钮
3 K5 O- G7 H: ]# F9 P5 V
btn9 e8 [+ Q8 }' B2 P3 h. m
投票
! m  ?9 H4 p: A+ H% j3 n0 y' l. @
vote6 [2 _; Y9 t8 o; A* Z
合作伙伴3 `! u9 K* b; b$ U+ O5 F
partner2 X" i$ e/ i9 X- U* k
友情链接
2 t- a5 ^. _6 O
friendLink+ q" Q8 l9 L! \, H
页脚
5 c1 e1 \" M8 i) Z' {5 J
footer( c2 ]) @$ ^) _5 o, I7 t( [
版权  b7 l8 y# ^6 T- j2 L- u8 _) C
copyRight
9 m/ F' Q' r' G7 |2 X7 k! A8 H
+ Q4 A) o  x* I, E6 x4 L% z! ^

1 B  O6 n3 h4 B; h/ H! {  }

1 D- ~5 p0 m& j( h3 `
div+css样式表的class的常用命名规则如下表所示:
外 套) i  \8 K" `2 C9 d; B
wrap
* @8 n* `$ |% C2 @9 H$ X1 f: q
主导航! F5 _5 ^* B- h9 q$ c  E- T
mainNav; f, |- H& [, {$ \  \
子导航
" r  g" L- U) G* ?
subnav9 l9 ?* J, b& L: x$ Y4 W
页 脚  Z: x3 J8 {9 r
footer
( h3 d0 }" R: S
整个页面
" I; x. e3 h# I8 F' D' E
content
3 y0 U6 q" M) F& t% A$ u
页 眉
* `8 C- P0 {4 q7 A  t0 w( g% \
header
' Z1 Y; R# p9 m! K: }
商 标
' ?) k$ \  J' v7 a8 T3 r
label
- L; v2 I  d6 m8 j
标 题
) j6 j+ f. u9 G
title
% ~3 ^# s) [, Y7 q% K: P$ P& f
主导航
$ A# C& x; H% E0 y
mainNav
3 u6 @) ^! Y: U+ ~5 I; `& Y
边导航( Z( [* y; P, T3 u! }' I
sidebar# A7 q4 n9 D  z2 S) {
左导航, \& p; I9 E8 P9 I+ G& _4 Q
leftsideBar
" D* ~( e! ^9 ^
右导航+ G; N' ]( k, g2 z1 [+ f' q. C' T
rightsideBar3 _8 M9 j8 S  T: q$ w
旗 志
) C! {' s7 z5 Q9 x
logo6 m$ F" C8 S5 ^! {9 N! S" Q5 p
标 语8 f( z5 ^  G. j; }. a2 Z
banner
% x7 D; }2 M7 Z) u; E2 b
菜单内容
6 X4 z, a; l4 `5 R# S' n
menu1Content
9 E1 }" J" D- e: l
菜单容量
8 a7 ?9 l2 D5 f& i3 f% e
menuContainer& R. k; j7 n. N; U
子菜单) m- a( e7 w3 z+ s4 ^. W
submenu" F+ j4 \8 f- J: ?  k
边导航图标
8 ^% I3 l# F  ?( i
sidebarIcon
' B, T/ s1 H/ |: N) I7 w: `/ q2 `
注释5 W& v# W6 Z" F
note
' w3 g6 D1 y- K! ?
面包屑
  a: q/ I8 H7 ~) ?6 O
breadCrumb! }' U- j' Y( f8 o& ?' f5 ]" Z6 T' y' Q
容器
! a) a; y: k& u- |+ l) ?9 `
container
, k4 [( L; W3 }+ {% j5 D) j' g
内容: j; [" F# p/ J: i
content
7 i2 ?+ e# G* H+ L
搜索8 B1 X5 B( u7 E- Z6 @; |* Z
search; l& ?. J; }; g/ V1 a' j1 n
登陆% O& g  W: C  n5 H: V' f0 p
login
3 W/ M& m6 k  }0 u$ |
功能区
+ H' V1 Q6 v5 F# l; p$ s0 {( G/ Q, S
shop* k+ ?/ ~: P! `0 Z5 R$ E1 H
当前的
" }  P1 R: y1 H1 r
current
. W* B0 Y$ L( K4 {! p: U

( n: r) w$ q3 g2 S0 x9 a6 U
- J- x, I, d+ d1 p5 H

" e2 m# t, V7 c; }! S- ]- u- V* I6 g6 |+ z

7 V( O( ]# d; k4 l

回复|共 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|北京 | 查看全部
好帖要顶,楼主的头像还是不错滴

1 q6 Q' [0 d% R% L                               
登录/注册后可看大图
6 }" O0 ~; o: M- j
                               
登录/注册后可看大图

  n2 U- d2 v1 r# c                               
登录/注册后可看大图
+ n( e6 @, Q& P$ Q" x' K- P
                               
登录/注册后可看大图
5 Y. B/ M! o9 F
                               
登录/注册后可看大图
; H) u- M4 F+ U
                               
登录/注册后可看大图
& w8 m5 p9 R# B. x
                               
登录/注册后可看大图

8 G' N. E1 K/ g# i$ k4 E0 b4 n                               
登录/注册后可看大图

; A' B9 }3 {9 U3 ]                               
登录/注册后可看大图

5 D0 m" M: I+ w4 E                               
登录/注册后可看大图

; y3 W/ }3 q. d) V+ a. l                               
登录/注册后可看大图

8 t, E0 u1 q' y  ~3 t) d: B' H/ M+ f1 O                               
登录/注册后可看大图
4 W' W& z' ^) \' D0 x; a$ c
                               
登录/注册后可看大图

, e8 r7 n  B' t- [                               
登录/注册后可看大图

- J  O: ~7 a6 _) L1 w% [% A                               
登录/注册后可看大图
亮凌庚 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客服 返回顶部
快速回复 返回顶部 返回列表