• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

关于CSS样式命名问题

前端 搞代码 3年前 (2018-06-17) 132次浏览 已收录 0个评论

商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar

http://www.gaodaima.com/37700.html关于css样式命名问题

左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的   current
报头:   masthead
摘要, 概要  summary或general
左边的浮动照图片 photoleft
右边的浮动图片 photoright
标题   title
条目底端    entrybottom
更多    extended或.more
容器背景 containerbg
服务   service
服务链接   servicelink
线   line
文本   text
右边   rightside
版权   copyright
新闻   news
书皮   wrapper
介绍      intro-part1
专栏   column
路径   pathways
片断   section
模块   module
上导航   subnav
2.另外在编辑样式表时可用的注释可这样写:

<– Footer –>
内容区
<– End Footer –>

3.样式文件命名

主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

4.样式表中的注示
实例一
/* GLOBAL ————————— */
/* LINKS ————————— */
/* FORMS ————————— */
/* IDS ————————— */
/* HEADER ————————— */
/* COLUMN 1 ————————— */
/* COLUMN 2 ————————— */
/* CLASSES ————————— */

实例二

HTML

<!–START: Header –>
<!–END: Header –>
<!–START: Content –>
<!–START: Main Navigation –>
<!–END: Main Navigation –>
<!–START: Search –>
<!–END: Search –>
<!–START: Submenu Navigation –>
<!–END: Submenu Navigation –>
<!–START: Left Column –>
<!–END: Left Column –>
<!–START: Left Column –>
<!–END: Right Column –>
<!–END: Content –>
<!– START: Crazyegg code –>
<!– END: Crazyegg code –>
<!–END: Body –>
<!– 1159340743 –>

CSS

/********************** Site General Tag *************************/
/********************** Navigation Tag *************************/
/********************** Right Content Tag *************************/
/********************** Left Content Tag *************************/
/********************** Comments Tag *************************/
/********************** Header Tag *************************/
/********************** Form Tag *************************/
/********************** MOS Tag *************************/
/********************** Sub Navigation Tag *************************/
/************************ Resources Tag ***************************/
/********************** Sitemap Tag **********************/
/********************** Footer Tag *************************/

实例三(网易)

CSS
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#NewsCenter
.keyword
#MallArea
#city
#aboutus

HTML

<!– 通栏1 Start –>
<!– 通栏1 End –><!– 第1屏 Start–>
<!– 最新消息 Start –>
<!– 最新消息 End –><!–产品导航 Start –>
<!– 产品导航 End–><!– 搜索 Start –>
<!– 搜索 End –><!– 第1屏小Logo Start–>
<!– 第1屏小Logo End–><!– 无线推荐 Start –>
<!– 铃声搜索 –>
<!– 铃声搜索 End –><!– 精彩推荐 –><!– 左边内容 –>
<!– 右边内容 –>
<!– 精彩推荐 END–>
<!– 无线推荐 End –>
略……………………

欢迎大家阅读《关于CSS样式命名问题》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址