返回列表 发新帖

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

3,160.5k 26
开着越野放牛 发表于 2013-6-14 21:01:28|湖北 | 查看全部 阅读模式
div+css样式表的id的常用命名规则如下表所示:
页头
7 L1 A- `6 Z' M+ o3 W
header& O" o6 B2 w" |8 R, ~  B
登录条
6 a( x! l4 ?1 O2 }( a
loginBar% M% h* ?, A7 W7 \5 c
标志
  f! x0 q/ n6 w! o& N4 t
logo
& v8 }$ L5 z. O' a0 `
侧栏. [% [" x4 Z( `8 o0 o
sideBar# R+ J6 k. E. O$ @/ q
广告
  I$ y: G: G% p& S
Banner
# _6 P9 o5 f3 c+ Q7 n: f
导航' t9 C) B+ l  l0 f: z7 X) `
nav) k! C: w/ ^8 R0 B7 O6 d" \9 T
子导航* x( J: w# ^/ X( E4 R( B
subNav
# S6 O) Y1 p& C. W3 h# Z
菜单
7 `8 E8 y- D  u# M5 P
menu
# a( @5 t% e! R: Y' F1 d: D/ j
子菜单* N9 j. M4 T3 f
subMenu
4 |  S# m% q2 {5 ]! s( `% W# P
搜索
! H; g) h3 k/ C% H
search
; O* ~0 Y& B' v% x. C3 K
滚动0 X% B4 M  B0 i+ ?5 |0 y- Z
scroll* Q  d0 o0 A: H1 b; }: C
页面主体
+ Q7 W+ K6 @% e9 p, D9 i2 V
main
6 E1 J. ^) A! M7 Y3 z, M1 i9 c
内容' J  d9 K( f% L! _) E; e
content6 `( ?1 A7 P2 y1 l3 s& F. j# e6 l
标签页
4 n- J" Y& M8 H9 f
tab
* l" g0 d* u$ m: [- D
文章列表5 v" h( o! u) G
list
2 f5 w% U9 p/ t% l0 P$ v0 t6 H% i
提示信息- {4 n! ~+ H. G! h0 y
msg9 Z/ `, Z2 D  I" r/ y# s4 n, m! f
小技巧0 I( \, N9 E9 J
tips+ K  Z6 j; ?* L& i: t
栏目标题
7 ]+ ~' F, h7 ]) U: G- `4 t. y
title0 o5 q( W/ g: V
加入" X; i$ P- P- `# j' F
joinus$ |5 o3 F4 a" R1 j% Z0 f0 ?
指南
9 m0 t; |# Z3 Z* C" M
guild% i9 M# \5 ~6 h& A( w. e' ~' @2 H+ _# H
服务4 M% j3 Z8 a  G" i8 X- J0 c
service9 y) m5 L- w$ @  Y. g4 t7 H4 s0 A
热点1 U# _; E( s* j/ X8 A
hot* s2 s. M& G! Q2 N
新闻
3 e" s3 G! Z# H3 d
news
2 u( P/ O7 @8 {0 o
下载
$ u4 _6 J$ f) D" q1 [
download" [# w# n4 c$ v  t# @( P
注册% `3 K) {8 A& d+ ~# h
regsiter
. [6 F  o4 z3 u0 X9 c% m
状态
( V3 }8 D& e$ Z1 C) g9 k' E
status
& |$ z8 @  O  M% i, r  {
按钮
& \- R: N# n; v" Q* c
btn5 R" D' ]1 j, d5 r
投票' {! \. t9 n+ p  v- X
vote1 n' c9 z$ c+ ^: f
合作伙伴
2 O! H! o& P9 R/ W. |7 \
partner- `  K% E3 B7 f! P
友情链接
# E+ @- k, b, f/ J, v, w; J8 S
friendLink
1 q' u* M$ ~, x
页脚
2 B) V, [' ?- x" \3 u5 i
footer8 o$ ^; j" S# m8 \
版权8 O$ x1 a& \9 @. i6 }( z
copyRight; S. }1 ^8 j8 w$ n) X6 x5 b* ~
7 v, W! k: M( I2 D' K

- G4 U8 _* |; ~% d/ ]

7 L( t) H8 \9 p8 h" _
div+css样式表的class的常用命名规则如下表所示:
外 套
8 r) j* Y; F$ v( A; r: r- |
wrap
7 _5 M( o- r7 }# d0 j" g, D
主导航9 P7 v; L& K5 ]% a' N" R, O
mainNav+ J- f6 F+ A5 V+ ]
子导航
; R# L8 Y5 }4 K& n: L8 D+ E
subnav
. N3 ^2 \2 ]0 G6 Q2 f
页 脚4 o/ T+ n; z% s/ Y. u! F
footer
& w: Z2 y+ M1 x7 G4 E6 w4 U
整个页面7 o+ F5 `2 y3 p5 y
content
; A$ H' T5 Z" F% z
页 眉0 ?; M/ T% K) v1 @' R5 G7 V7 a, q
header
) ]' V( g; X9 P3 k# t% [' f1 Z8 \
商 标) N9 }0 n/ `5 Q1 E- m" }' A8 L- b; ^! m
label( x7 o3 V0 @3 x# L( K
标 题2 W" m, K$ x+ k. O8 `
title: c) S# e3 o( @2 T9 a! N
主导航: Z) \& k$ o+ X( J
mainNav
& g$ H* z# h* J2 G+ g+ F4 O; p
边导航
' X/ n8 ]# O" F5 b% r9 n  [( s  i
sidebar. {: U! n' W( t% D  T
左导航
  Q2 Y3 h- O- B2 i
leftsideBar6 S  X- V5 n, [+ M$ y
右导航; y5 ^1 q3 B! o+ t- i  a% L
rightsideBar
( K' U4 z9 {- f& S4 y
旗 志
+ v/ l; u& _4 b+ K6 O$ a" Q8 u
logo$ z# R, T0 G4 A
标 语+ @5 r+ s: g/ V' `) D7 g5 e
banner
8 R, G* u0 c/ z+ |
菜单内容: {; Y6 S( }/ D3 g( {5 D7 O; D7 F9 k
menu1Content
. `7 K1 n4 T  \  M; S
菜单容量
& w' T  S+ l1 T3 g0 @2 N
menuContainer9 N, v! f( D3 Z; ]$ N
子菜单& {6 m- n7 I, I8 M
submenu$ U7 e5 h9 i  d% J5 t
边导航图标4 D. l2 j  A, C
sidebarIcon+ [& f  L4 Q) Q- i
注释( @. P2 h% p7 Q* T) s
note: V% c# R& _  t0 p# Q
面包屑- c2 a" o$ G1 M, U
breadCrumb
. @, Q: S1 x( S1 T9 {4 P3 k
容器* e: M  V5 H$ V+ a2 f6 J7 G
container8 G* m1 _+ h: S; v7 ]
内容  f5 L& W; c) [, e3 Q; \) b
content
: K* m# V6 @2 x8 H
搜索
- Z' T. r) I( A9 _
search5 X# F) \; I+ U2 T/ x2 d
登陆
% i4 z' Q) i8 \; y; X; e' V
login" u( x0 i: B, i. t: }# h' a
功能区+ c9 [! @8 j6 t% W
shop. i+ z. T$ A. P& t% n( D( Z
当前的; U2 X0 K; a9 ^: V
current
7 e" S& B$ C+ m
( i1 k; B% f- }  c

+ ~! I  u" r8 ]0 ~0 S

2 s8 r5 f5 _6 h$ z8 i1 V* Y3 x
* Z' i) P7 V( `* Z
: i0 X: F- B+ h1 T* F

回复|共 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|北京 | 查看全部
好帖要顶,楼主的头像还是不错滴
- E0 P$ L2 I) K: y6 z
                               
登录/注册后可看大图
. R; S) g: {. l. X0 G4 C) E
                               
登录/注册后可看大图
9 ?9 S5 t. R) A. Q7 |/ {
                               
登录/注册后可看大图
( t/ U8 G; ~7 B5 Y6 j$ r5 n0 G
                               
登录/注册后可看大图
' [' [# ~! t2 W) Y
                               
登录/注册后可看大图

) W7 u5 P6 L% k* L% k                               
登录/注册后可看大图

# {% u# X# ^, |% }4 U                               
登录/注册后可看大图
0 A9 n$ g% q. l, R. }0 [
                               
登录/注册后可看大图

- ^1 r" E; M2 M                               
登录/注册后可看大图

5 w" t8 f  C8 H; y! _4 V                               
登录/注册后可看大图
& a2 f- o0 {0 X: Z" [
                               
登录/注册后可看大图

1 |. Q! A7 V* @" E8 C                               
登录/注册后可看大图

4 T3 M$ i' U7 B  c9 w( ^2 B+ M+ }6 N                               
登录/注册后可看大图
9 E* L3 Q5 d. V9 Q
                               
登录/注册后可看大图
  Z7 s6 X( B$ N1 l4 A/ c! i, r
                               
登录/注册后可看大图
亮凌庚 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客服 返回顶部
快速回复 返回顶部 返回列表