码迷,mamicode.com
首页 > Web开发 > 详细

html页面的CSS、DIV命名规则

时间:2017-09-02 01:07:36      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:lin   标题   后缀   命名规则   screens   friend   release   drop   logs   

十二、          html页面的CSS、DIV命名规则

名称

命名

名称

命名

名称

命名

名称

命名

页头

header

广告条

banner

登录条

loginbar

标志

logo

侧栏

sidebar

菜单

menu

子菜单

subMenu

下拉菜单

dropMenu

导航

nav

工具条

toolbar

表单

form

栏目

column

子导航

subNav

箭头

arrow

搜索

search

搜索按钮

btn-search

滚动条

scroll

内容

content

标签页

tab

文章列表

list

提示信息

msg

小技巧

tips

栏目标题

title

链接

links

页脚

footer

服务

service

热点

hot

新闻

news

下载

download

注册

regsiter

状态

status

按钮

btn

投票

vote

合作伙伴

partner

版权

copyright

网站地图

sitemap

最外层

wrap

主体内容(中部)

 main

左侧布局

main-left

右侧布局

main-right

中部主体

content

底部

footer

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

css、js文件命名:

名称

命名

名称

命名

名称

命名

名称

命名

主要的

master.css/main.css

布局,版面

layout.css 

专栏

columns.css 

文字

font.css 

打印样式

print.css 

主题

themes.css

模块

module.css

基本共用

base.css

表单

forms.css

补丁

mend.css

 

 

 

 

 

 

 

 

 

 

 

 

ID命名:

名称

命名

名称

命名

名称

命名

名称

命名

页面外围控制整体布局宽度

#wrapper

容器,用于最外层

#container或#content

布局

#layout

页头部分

#head, #header

页脚部分

#foot, #footer

主导航

#nav

二级导航

#subnav

菜单

#menu

子菜单

#submenu

侧栏

#sideBar

左边栏或右边栏

#sidebar_a, #sidebar_b

页面主体

#main

标签

#tag

提示信息

#msg #message

小技巧

#tips

投票

#vote

友情连接

#friendlink

标题

#title

摘要

#summary

登录条

#loginbar

搜索输入框

#searchInput

热门热点

#hot

搜索

#search

搜索条

#searchBar

搜索输出和搜索结果相似

#search_output

搜索结果

#search_results

版权信息

#copyright

商标

#branding

网站LOGO标志

#logo

网站信息

#siteinfo

法律声明

#siteinfoLegal

信誉

#siteinfoCredits

加入我们

#joinus

合作伙伴

#partner

服务

#service

注册

#regsiter

箭头

arr/arrow

指南

#guild

 网站地图

#sitemap

列表

#list

首页

#homepage

二级页面子页面

#subpage

工具条

#tool, #toolbar

下拉

#drop

下拉菜单

#dorpmenu

状态

#status

滚动

#scroll

标签页

.tab

居左、中、右

.left .right .center

新闻

.news

下载

.download

广告条(顶部广告条)

.banner

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

电子贸易相关:

名称

命名

名称

命名

名称

命名

名称

命名

产品

.products

产品描述

.products_description

编辑评论

.editor_review

生产商

.publisher

产品价格

.products_prices

产品评论

.products_review

最新产品

.news_release

缩略图

.screenshot

常见问题

.faqs

关键词

.keyword

博客

.blog

论坛

.forum

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

http://www.cnblogs.com/rising-fay/archive/2013/02/25/2932592.html

 

 

67.    CSS命名规则

  头:header

  内容:content/containe

  尾:footer

  导航:nav

  侧栏:sidebar

  栏目:column

  页面外围控制整体布局宽度:wrapper

  左右中:left right center

  登录条:loginbar

  标志:logo

  广告:banner

  页面主体:main

  热点:hot

  新闻:news

  下载:download

  子导航:subnav

  菜单:menu

  子菜单:submenu

  搜索:search

  友情链接:friendlink

  页脚:footer

  版权:copyright

  滚动:scroll

==========

68.    XHTML文件中id的命名

(1)页面结构

  容器: container

  页头:header

  内容:content/container

  页面主体:main

  页尾:footer

  导航:nav

  侧栏:sidebar

  栏目:column

  页面外围控制整体布局宽度:wrapper

  左右中:left right center

(2)导航

  导航:nav

  主导航:mainbav

  子导航:subnav

  顶导航:topnav

  边导航:sidebar

  左导航:leftsidebar

  右导航:rightsidebar

  菜单:menu

  子菜单:submenu

  标题: title

  摘要: summary

(3)功能

  标志:logo

  广告:banner

  登陆:login

  登录条:loginbar

  注册:regsiter

  搜索:search

  功能区:shop

  标题:title

  加入:joinus

  状态:status

  按钮:btn

  滚动:scroll

  标签页:tab

  文章列表:list

  提示信息:msg

  当前的: current

  小技巧:tips

  图标: icon

  注释:note

  指南:guild

  服务:service

  热点:hot

  新闻:news

  下载:download

  投票:vote

  合作伙伴:partner

  友情链接:link

  版权:copyright

======

69.    CSS+DIV的命名规则:

  登录条:loginBar
  标志:logo
  侧栏:sideBar
  广告:banner
  导航:nav
  子导航:subNav
  菜单:menu
  子菜单:subMenu
  搜索:search
  滚动:scroll
  页面主体:main
  内容:content
  标签页:tab
  文章列表:list
  提示信息:msg
  小技巧:tips
  栏目标题:title
  友情链接:friendLink
  页脚:footer
  加入:joinus
  指南:guild
  服务:service
  热点:hot
  新闻:news
  下载:download
  注册:regsiter
  状态:status
  按钮:btn
  投票:vote
  合作伙伴:partner
  版权:copyRight

  1.CSSID的命名
  外套:wrap
  主导航:mainNav
  子导航:subnav
  页脚:footer
  整个页面:content
  页眉:header
  页脚:footer
  商标:label
  标题:title
  主导航:mainNav(globalNav)
  顶导航:topnav
  边导航:sidebar
  左导航:leftsideBar
  右导航:rightsideBar
  旗志:logo
  标语:banner
  菜单内容1:menu1Content
  菜单容量:menuContainer
  子菜单:submenu
  边导航图标:sidebarIcon
  注释:note
  面包屑:breadCrumb(即页面所处位置导航提示)
  容器:container
  内容:content
  搜索:search
  登陆:login
  功能区:shop(如购物车,收银台)
  当前的current

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

说明:均为class,需要扩展,则在当前命名内以“_“(下划线)后缀自定名称。
我习惯称列表页为list,新闻列表则为newslist,图片列表为piclist,
内容页为view,

  内容:content

  标签页:tab

  文章列表:list

  提示信息:msg

  小技巧:tips

  栏目标题:title

  加入:joinus

  指南:guild

  服务:service

  注册:regsiter

  状态:status

  投票:vote

  合作伙伴:partner

html页面的CSS、DIV命名规则

标签:lin   标题   后缀   命名规则   screens   friend   release   drop   logs   

原文地址:http://www.cnblogs.com/wujunbin/p/7465469.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!