2021-03-06

一：文件命名规则

---

   1.文件名称的命名规则
    
        文件命名：必须由英文字母开头，命名的规则是根据内容的分类和框架的类型翻译成英文单词来命名；所有命名要尽量避免使用中文字符，要以最少的字母达到最容易理解的含义，除非一看即懂，否则尽量不缩写。
        例如：
                   div id=“nav”（表示为这个div是个导航条）
                   div=“main_piclist”（表示主要内容下的图片列表）
                   div=“nav_bg.jpg” （表示导航条的背景图）
                   div=“main-left”（表示左侧内容的布局）
        创建站点文件夹
            　  1、images 存放一些网站常用的图片；
            　  2、css 存放一些CSS文件；
            　  3、Flash 存放一些Flash文件；
            　  4、Temp 存放所有临时图片和其它文件；
            　  5、copyright 版权信息（可选）
            　  6、readme 说明文件
            
        总结：统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。
        
2.索引文件的命名规则（首页面）
    
         - index.htm
         - index.html 
          - index.asp（VB）
         - index.aspx（）
         - index.jsp（Java）
         - index.php（PHP）
     
3.子页面的命名规则
    
        1. 统一用翻译的英文命名（推荐）     
        2. 统一用拼音命名（拼音的简化也可）
        3. 如果文件名过长，企业要提前约定一份缩写的规范，如pro—product
    
    例如：
         1. 首页—index 产品列表—prolist产品详细页面—prodetail 
         2. 新闻列表—newslist新闻详细页面—newsdetail
         3. 发展历史—history 关于我们—aboutus
         4. 联系我们—linkus，contactus
         5. 信息反馈—feedback留言—leavewords 
         
4.CSS文件命名示例
            1.index.css：单独为首页建立样式
            2.base.css：共用样式
            3.style.css：独立页面所使用的样式文件。
            4.global.css：页面样式基础，全局公用样式，页面中必须包含。
            5.layout.css：布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
            6.Master.css/main.css：主要的样式表
            7.forms.css：表单样式
            
5.图片命名规范
     
           图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等
           banner：放置在页面顶部的广告，装饰图案等长方形的图片 
           logo：标志性的图片 button：在页面上位置不固定，并且带有链接的小图片
           menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
           pic：装饰用的图片 
           例子：
           banner_sohu.gif, banner_sina.gif 
           menu_aboutus.gif,menu_job.gif 
           title_news.gif logo_police.gif 
           pic_people.gif
           
6.脚本文件和动态文本文件命名规则
     
             脚本文件：一般使用脚本功能的英文小写缩写命名
            实际模块：例如广告条的javascript文件名为ad.js，弹出窗口的javascript文件名为pop.js     
            公用模块：js文件命名：英文命名，后缀js。如common.js，basic.js
             外部资源：Jquery.min.js，Jquery.validate.js，Jquery.date.js
            动态文件：以性质描述，可以有多个单词，用‘_’隔开，性质一般是该页面的概要（见名知意）。
            
            范例：
            register_form.aspx，register_post.aspx，topic_lock.aspx。不同模块之间，可以使用不同的前缀来区分
            
7.页面结构命名
    
            1．page：代表整个页面，用于最外层。
            2．wrap：外套，将所有元素包在一起的一个外围包，用于最外层
            3．wrapper：页面外围控制整体布局宽度，用于最外层
            4．container：一个整体容器，用于最外层
            5．head、header：页头区域，用于头部
            6．nav：导航条
            7．content：内容，网站中最重要的内容区域，用于网页中部主体
            8．main：网站中的主要区域（表示最重要的一块位置），用于中部主体内容
            9．column：栏目
            10．sidebar：侧栏
            11．foot、footer：页尾、页脚。网站一些附加信息放置区域，（或命名为copyright）用于底部
            12．content/container：内容
            13. left right center：左右中
8.导航命名
    
            1.nav、navbar、navigation、nav-wrapper：导航条或导航包，代表横向导航
            2.topnav：顶部导航
            3.mainbav：主导航
            4.subnav：子导航
            5.sidebar：边导航
            6.leftsidebar 或 sidebar_a ：左导航
            7.rightsidebar 或 sidebar_b：右导航
            8.title：标题
            9.summary：摘要/li>
            10.menu：菜单。区域包含一般的链接和菜单
            11.submenu：子菜单
            12.drop：下拉
            13.dorpmenu：下拉菜单
            14.links：链接菜单
9.功能命名
            1.logo：标记网站logo标志
            2.banner：标语、广告条、顶部广告条
            3.login：登陆，（例如登录表单：form-login）
            4.loginbar：登录条
            5.regsiter：注册
            6.tool、toolbar：工具条
            7.search：搜索
            8.searchbar：搜索条
            9.searchlnput：搜索输入框
            10.shop：功能区，表示现在的
            11.icon：小图标
            12.label：商标
            13.homepage：首页
            14.subpage：二级页面子页面
            15.hot：热门热点
            16.list：文章列表，（例如新闻列表：list-news）
            17.scroll:滚动
            18.tab：标签
            19.sitemap：网站地图
            20.msg 或 message：提示信息
            21.current：当前的
            22.joinus：加入
            23.status：状态
            24.btn：按钮，（例如搜索按钮可写成：btn-search）
            25.tips：小技巧
            26.note：注释
            27.guild：指南
            28.arr、arrow：标记箭头
            29.service：服务
            30.breadcrumb：(即页面所处位置导航提示）
            31.download：下载
            32.vote：投票
            33.siteinfo：网站信息
            34.partner：合作伙伴
            35.link、friendlink：友情链接
            36.copyright：版权信息
            37.siteinfoCredits：信誉
            38.siteinfoLegal：法律信息
10.CSS样式命名
    
            1.对齐样式命名：left（左边内容）、center（中间内容）、right（右边内容）等；
            2.颜色英文命名：red（红色）、green（绿色）、yellow（黄色），又或者border_red（红色边框）等；
            3.颜色代码命名：f00（红色）、ff0（黄色）、f90（橙色）等；
            4.文字大小命名：font12px（字体12像素）、font16px（字体16像素）等；
            5.页面线条命名：line_x （横线）、line_y （纵线）或 line_red（红线）、line_black（黑线）
            6.图片图标命名：pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
            7.页面广告命名：ad_01、ad_02
            8.背景框架命名：nav_bg（代表导航条的背景图片位置）、tool_bg（代表工具栏的背景图片位置）
            
11.类class的书写规范示例
     　　（1）颜色：使用颜色的名称或者16进制代码，如
　　        .red { color： red； }
　　        .f60 { color： #f60； }
　　        .ff8600 { color： #ff8600； }
　　        (2）字体大小，直接使用"font+字体大小"作为名称，如
    　　.font12px { font-size： 12px； }
    　　.font9pt {font-size： 9pt； }
    　　 （3）对齐样式，使用对齐目标的英文名称，如
    　　.left { float：left； }
    　　.bottom { float：bottom； }
    　　 （4）标题栏样式，使用"类别+功能"的方式命名，如
    　　.barnews { }
    　　.barproduct { }
    　　九、注意事项
    　　（1）一律小写；
    　　（2）尽量用英文；
    　　（3）不加中杠和下划线；
    　　（4）尽量不缩写，除非一看就明白的单词

12.预览

标题: title
摘要: summary
箭头： arrow
商标： label
网站标志： logo
转角/圆角： corner
横幅广告： banner
子菜单： subMenu
搜索： search
搜索框： searchBox
登录： login
登录条：loginbar
工具条： toolbar
下拉： drop
标签页： tab
当前的： current
列表： list
滚动： scroll
服务： service
提示信息： msg
热点：hot
新闻： news
小技巧： tips
下载： download
栏目标题： title
热点： hot
加入： joinus
注册： regsiter
指南： guide
友情链接： friendlink
状态： status
版权： copyright
按钮： btn
合作伙伴： partner
投票： vote
左右中：left right center

/* Footer */
内容区
/* End Footer */

(三)id的命名:

(1)页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

(2)导航

导航：nav
主导航：mainnav
子导航：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

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }
.barproduct { }

注意事项:

1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.

推荐的 CSS 书写顺序
//显示属性
display
list-style
position
float
clear

//自身属性
width
height
margin
padding
border
background

//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content