返回列表 发新帖

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

3,160.4k 26
开着越野放牛 发表于 2013-6-14 21:01:28|湖北 | 查看全部 阅读模式
div+css样式表的id的常用命名规则如下表所示:
页头
: |1 z# u& Z3 f2 _1 ?& N
header" _+ T: Q8 H6 {* d* E0 {
登录条* o8 Z+ X3 [/ z) v" k# c
loginBar
$ h- w( E2 B) I( ?3 j% W. y; u
标志
6 W! M7 R" C& I6 k8 T
logo
# W8 k! O$ t0 g
侧栏
2 D( J3 d. L7 g' I/ Q8 a0 Y
sideBar, l* @& c1 V9 O. Y9 P) u
广告& B1 S0 H3 A* \. ^5 [; m( e4 ]- f
Banner
  A* e8 J: t+ _9 T, x# }: [
导航" Z( L7 b, ?# ]; O
nav2 z: y1 k3 R2 s4 r: }4 B
子导航& c$ p, ^) d2 f2 k) j  F/ h8 r
subNav
8 p0 G% N# u' s- A" z9 I
菜单
4 m, A# z# e) p% T! A! W  y6 G0 ?4 d
menu
2 T9 _1 |7 V% K) e* W6 {
子菜单9 t/ W6 b  w7 Z) B
subMenu* R  u3 G% I% z3 @0 G
搜索2 J) v, Y' L9 Q5 x* T  U/ t; y9 M5 S
search3 P& B+ r& M6 G1 C2 X- A. ~
滚动% C# e) S/ N/ [5 u5 c
scroll
! S0 |  [# ^- V' A
页面主体
3 Q: @7 c) Z0 x) S/ W/ W$ [/ F. s
main. H2 q* y$ R" l( ^/ V9 {# \$ l  [9 a
内容
5 E7 H( N: O5 g" O, f
content
& Z" o  R/ X+ [1 _
标签页: ]7 q5 R+ k& g' J0 Z& X, o
tab
! R! r  W. T9 f
文章列表
6 H+ O' n, `2 X% _+ Y9 Z
list
5 j+ @1 i9 K  M, j5 ?
提示信息
1 m; X$ q) |: i# A& X. G* I
msg( ^3 K+ q- d; c2 n
小技巧
( Z1 s& A6 d4 X+ Q6 H. A
tips5 N! J7 ]/ _. w9 H6 u. S
栏目标题: [' G, ?1 b4 s2 u
title. E, d$ U  V0 ^: z9 b
加入
$ h+ s/ k' \& x* _' T: Y2 T# J) B
joinus+ j- B+ f- u. F+ ?0 ?7 x
指南5 G' P5 m& I6 e
guild6 h0 W+ [  i' |1 z' i
服务2 B, Z: G1 J3 L/ u
service
( @6 R8 x) H0 }! k2 d% u0 ?
热点
3 }5 _4 \2 g' E' \. V
hot; D2 O, m  Z9 {
新闻% f1 R: ^4 C7 ]+ P3 L# w- Z7 n; e1 W
news+ y8 S% e/ V& r6 F& y
下载3 J4 m' c" ~% P2 A
download5 w2 ?3 ~: k6 Z) T/ P4 m6 s- l
注册
0 j" ]0 ^" F. B$ R- I! ~
regsiter, n8 T# C' r- q- q3 \9 j: t: x2 }
状态
' O$ e& X6 L: {# W' w0 g
status
2 a+ e- Z, U% h9 v! u7 `6 E
按钮
! b' v' O/ E7 J
btn
9 ?6 B, }+ V1 K6 h
投票
" f6 ]5 n6 f( b2 x0 A
vote
, c/ I% s, b) B; I) E2 y
合作伙伴
, f" U! R" Q7 c' {8 A
partner" J1 b) E0 [+ M/ L2 E
友情链接) M6 U+ W% v2 U
friendLink- f- e7 Q+ r; r& N
页脚, r: }2 Q- }; |( _" ~' q" g$ b
footer$ k" i6 c+ M+ H% ?9 U0 d( @* {
版权+ P1 @+ v# X9 N0 x( `+ S
copyRight
8 ]0 {# I9 \, h8 {+ y4 a! V
6 H1 @1 V/ {. b2 c6 w
+ h1 t' \1 c1 u# K" s
% [- d0 ]2 c" N) k
div+css样式表的class的常用命名规则如下表所示:
外 套; q9 F% M1 e/ x: J( s
wrap* t  g9 v- v, O; Q
主导航
) u4 r9 C. m3 N: L
mainNav
% F5 ]2 S- C6 ?2 n1 l' W# j
子导航
; x% g5 Z" o0 \+ C) l" H5 k( B
subnav
, E" w& \% Y7 M' a0 {9 X
页 脚+ s5 Y1 v8 l0 T+ {
footer& ^+ @* ^' F* c( M# x
整个页面8 P% w; Q3 d) q
content
# T4 ~# D; j- p, f
页 眉
! N1 }! C$ v& r+ L
header
! @- P# I% t6 F8 r7 f
商 标, v8 U: a( @6 ]2 l8 u
label' {, X6 N& Y) j* a$ B, K1 O. R' N) u
标 题% v; v# X# W6 \  ^8 _. X
title
/ H7 N2 @& P! L* J# R) Y: ^! v
主导航5 B# `) s0 Z9 R' O7 T8 g7 U! K
mainNav: V* B/ [2 ]) I$ q* M) T
边导航: j7 p: Y2 w- t6 P5 g  S
sidebar+ H& ~3 g% Q+ M
左导航
% R% L1 ^, s, l7 V( F
leftsideBar
- D0 V7 `* \2 Z" e5 b
右导航7 N5 P: J# S; C% @/ P: ?$ I8 I5 e& V
rightsideBar
3 z8 x1 {) v$ b3 ^
旗 志
, B0 i; P3 X0 s4 `$ A1 G0 i
logo; \9 |. ^( l$ S" I
标 语8 k  y/ x3 p! E" N
banner7 y) y4 a0 \& M2 Q1 v$ O( G
菜单内容
7 p1 k9 N% z/ N' R
menu1Content
" G. u0 [9 j1 }
菜单容量
6 W  Z: n1 x. A& N2 G- R& D" \
menuContainer# j; g) G7 m# K: h( J, X
子菜单! x4 t8 V, a% M7 s! L' n
submenu9 S! [7 _$ f9 h) @! f5 {
边导航图标
% }8 S! D; i/ S$ F8 @
sidebarIcon$ ?$ c" Q& v& U) L; Y5 J7 z
注释6 V2 D: m. O* @3 T! }! z
note
. N* z; x9 B0 v* Z% H$ `, F
面包屑* T4 E% b# q. f5 N- L2 X
breadCrumb, B5 S+ V0 {9 o1 H) V
容器, v/ G. M& y( U8 W# u
container. K- F$ ]& _  C: K! {3 l" ~- i
内容- _+ @0 `* b. l- f! N( M$ M
content
+ o0 n: }+ [8 s
搜索
$ F: B* @4 C; q: c8 Y
search6 ^9 s. f% |) h$ A7 n
登陆
& f7 N/ }- {! K2 v+ X+ _7 a# a6 `
login' M- ~: B5 x( T! Y
功能区9 [6 b3 a4 I3 R( B9 }, H: H
shop
5 z/ ^% P2 y( ?1 l( b8 t  U- ^
当前的& e( ^$ g+ ]8 f% P, q
current. q) i* ^, `6 h2 f
5 g4 |. @9 l; N) p/ q" C
, ^! H. s$ J; b( B

0 K) u0 }: d$ r* t; q( Q: }9 S" W3 [
" g! Y3 r/ e% [

回复|共 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|北京 | 查看全部
好帖要顶,楼主的头像还是不错滴
6 e; `! r& o% v  K/ H/ }) p: k
                               
登录/注册后可看大图
* {( \  A" O( {  ?4 k3 b
                               
登录/注册后可看大图
' w9 i- r- Z! N
                               
登录/注册后可看大图

2 U; Y) R3 w# G4 b" }0 l                               
登录/注册后可看大图
' v4 d, w' A, Q% y
                               
登录/注册后可看大图

/ l5 m) S0 K0 z, f                               
登录/注册后可看大图
& i1 W$ b2 [5 ~- i: @: b$ T/ |
                               
登录/注册后可看大图
  R$ Q  a% ]9 O
                               
登录/注册后可看大图
- r% J+ d0 h/ s# W  Z
                               
登录/注册后可看大图
/ V! g; V. E; A0 R# L9 u
                               
登录/注册后可看大图

4 [* e: [2 ]' q8 |                               
登录/注册后可看大图
" Q' u, Z0 B3 F! n3 g4 v
                               
登录/注册后可看大图
. n; _- Q. p3 }, J2 s
                               
登录/注册后可看大图
) ?4 y' S2 q: P8 S& w& `
                               
登录/注册后可看大图

: U% y5 [! d2 e; p! H0 _( `4 G                               
登录/注册后可看大图
亮凌庚 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技术交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表