php的设计css规则,css命名规则 网站设计及基本框架结构

一.网站设计及基本框架结构:

1. Container

“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.

2. Header

“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).

3. Navbar

“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.

4. Menu

“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.

5. Main

“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。

6. Sidebar

“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.

7. Footer

“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“。

二.需要注意的几点:

1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.

如:red/left/big等。

2.组合命名规则:

[元素类型]-[元素作用/内容]

如:搜索按钮: btn-search

登录表单:form-login

新闻列表:list-news

3.涉及到交互行为的元素命名:

凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:

鼠标悬停:：hover 点击：click 已浏览：visited

如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

三、常用命名汇总:

页头:header

登录条:loginbar

标志:logo

侧栏:sidebar

广告条:banner

导航:nav

子导航:subNav

菜单:menu

子菜单:subMenu

下拉菜单:dropMenu

工具条: toolbar

表单:form

栏目:column

箭头:arrow

搜索:search

搜索按钮:btn-search

滚动条:scroll

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

链接:links

页脚:footer

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

按钮:btn

投票:vote

合作伙伴:partner

版权:copyright

网站地图: sitemap

其他参考的命名规则

页头：header

登录条：loginbar

标志：logo

侧栏：sidebar

广告：banner

导航：nav

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

滚动：scroll

页面主体：main

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

下载：download

注册：regsiter

状态：status

按钮：btn

投票：vote

合作伙伴：partner

友情链接：friendlink

页脚：footer

版权：copyright

CSS ID 的命名

外　套：　　wrap

主导航：　　mainnav

子导航：　　subnav

页　脚：　　footer

整个页面：　content

页　眉：　　header

页　脚：　　footer

商　标：　　label

标　题：　　title

主导航：　　mainbav(globalnav)

顶导航：　　topnav

边导航：　　sidebar

左导航：　　leftsidebar

右导航：　　rightsidebar

旗　志：　　logo

标　语：　　banner

菜单内容1： menu1content

菜单容量：　menucontainer

子菜单：　　submenu

边导航图标：sidebarIcon

注释：　　　note

面包屑：　　breadcrumb(即页面所处位置导航提示)

容器：　　　container

内容：　　　content

搜索：　　　search

登陆：　　　Login

功能区：　　shop(如购物车，收银台)

当前的　　　current

另外在编辑样式表时可用的注释可这样写：

内容区

样式文件命名

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

实例：

为同一开发，特设定CSS命名关键字如下：

容 器：container/box

头 部：header

主 导 航：mainNav

子 导 航：subNav

顶 导 航：topNav

网站标志：logo

大 广 告：banner

页面中部：mainBody

底 部：footer

菜 单：menu

菜单内容：menuContent

子 菜 单：subMenu

子菜单内容：subMenuContent

搜 索：search

搜索关键字：keyword

搜索范围：range

标签文字：tagTitle

标签内容：tagContent

当前标签：tagCurrent/currentTag

标　 题：title

内 容：content

列 表：list

当前位置：currentPath

侧 边 栏：sidebar

图 标：icon

注 释：note

登 录：login

注 册：register

列 定 义：column_1of3 (三列中的第一列)

column_2of3 (三列中的第二列)

column_3of3 (三列中的第三列)

相关标签：css

本文原创发布php中文网，转载请注明出处，感谢您的尊重！