项目中文件名字

1：符合应用场景

2：一律使用小写英文字母，统一要求；英文，禁止中文拼音。

5：命名原则：使团队成员可以看懂自己代码；自己也方便查找并修改

xxx.html文件的命名

1：主页面 index.html

2: 子页面：首页：homme.html 我的 mine.html 关于我们:aboutus.html 信息反馈 feedback

产品 product 购物 shop 计数器 count

3: 一级页面: 登录：login.html login.css login.js

注册： resign.html

用户管理：userManage.html

图片的命名规则

1：图片文件的后缀 xxx.png xx.jpg xxxx.gif xxx.bmp

图片的名称分为头尾两例如：广告、标志、菜单、按钮部分，用下划线隔开，头部分表示此图片的大类

大类例如：广告、标志、菜单、按钮

放在页面顶部的【广告】 【banner】企业商标 【标志】性的图片 【logo】在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： 【menu】装饰用的照片我们取名： 【pic】【不带链接】表示【标题的图片】我们取名： 【title】

范 例 ： banner_ sohu.gif

banner_sina.gif

menu_aboutus.gif

menutitle_news.gif

logo_police.gif

logo_national.gif

pic_people.jpg

pic_iphone.jpg

pic_TV.jpg

…

文件夹存放规范

www 或者 web 存放前端代码文件

css 存放 xxx.css 文件src 存放 xxx。js文件views 或者 pages 存放 xxx.html 或者 xxx.vue 文件assetes 存放所有【资源文件】

images 存放图片文件library 存放【第三方库】文件media 存放媒体文件

build 存放经过【自动化构建工】或者【自动化打包工具】处理后的文件

serve 存放服务端代码文件

api 存放【接口文件】modules 存放 【数据库操作】文件

css 书写规范 性能优化方案

1：禁止class 与id 重名

2：书写顺序：布局定位属性–>自身属性–>文本属性–>其他属性

.box{

/* 布局定位类 */

float:left;

/* 自身属性 */

width:100px;

height:100px;

/* 文本类 */

text-align:left;

/* 其他属性 */

background:red;

}

布局定位类属性

Margin\padding\float\clear\position （ 相 应 top,right,bottom,left）\display\visibility\overflow

自身属性

Width\height\background\ bord

文本属性

font\color\text-align\text-decoration\text-indent\ white-space\othertext\content

其他属性

list-style(列表样式)\vertical-align\cursor\z-index(层叠顺序)\zoom

CSS优化

1: 全局考虑样式；提你高代码重复使用

2：多使用兼容性好的样式 css2

3: 减少使用功能position absolute fixed 属性;

4: 重要图片 加【alt】 重要标签加【title属性】

5：合理使用选择器；尽量少使用伪类选择器 nth:type-of-child()

6: 不到万不得已；不要用 !important 权重最高

8：尽量使用复合属性 magin border

css 命名规范

页面结构

容器: container/wrap

整体宽度：wrapper

页头：header

内容：content

侧栏：sidebar

栏目：column

中间内容：center

导航

导航：nav

主导航：mainNav /gloabNav main_nav/gloab_nav main-nav/gloab-nav

子导航：subNav sub_nav sub-nav

顶部导航 topNav top_nav top-nav

边部导航 sideBar side_nav side-nav

左边导航：leftSideBar left_side_nav left-side-nav

右边导航：rightSideBar

边导航图片 sideBarIcon

菜单 menu

子菜单 subMenu sub_menu sub-menu

标志：logo

登陆：login

登录条：loginbar

注册：regsiter

产品：products

产品价格：products_prices

产品评论：products_review

编辑评论：editor_review

最新产品：news_release

最新产品：news_release

广告/标语：banner

摘要:summary

生产商：publisher

缩略图：screenshot

常见问题：faqs

关键词：keyword

博客：blog

论坛：forum

搜索：search

搜索输入框：search_input

搜索输出：search_output

搜索结果：search_results

加入我们：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg/message

当前的: current

小技巧：tips

皮肤：skin

充值：pay

活动：activities

推广：promotion

公告：announcement

排行：ranking

公司简介：company_profile

公司设备：equipment

公司荣誉：glories

企业文化：culture

企业规模：scale

营销网络：sales_network

组织机构：organization

技术力量：technology

分支机构：branches

企业资质：enterprise_qualification

公司实力：strength_strength

经营理念：operation_principle

经理致辞：manager_oration

发展历程：development_history

工程案例：engineering_projects

分类浏览：browse_by_category

应用领域：application_fields

人力资源：human_resource_hr

领导致辞： leader_oration

客户留言：customer_message

客户服务：customer_service

您的要求：your_requirements

销售信息：sales_information

招商：enterprise_establishing

教育培训：education_training

在线交流：online_communication

质量认证：quality_certification

合作加盟：joinIn_cooperation

产品描述：products_description

业务范围：business_scope

产品销售：sales_sales

联系我们：contact_us

信息发布：information

返回首页：homepage

产品定购：order

电子商务：e_business

版权所有：copy _right

友情连结：hot_link

行业新闻：trade_news

行业动态：trends

邮编：postal_code_zipcode

新闻动态：news_trends

公司名称：company_name

销售热线：sales_hotline

联系人：contact_person

建设中：in_construction

证书：certificate

地址：add

电话：tel

传真：fax

产品名称：product_name

产品说明：description

价格：price

品牌：brand

规格：specification

尺寸：size

生产厂家：manufacuturer

型号：model

产品标号：item_no

技术指标：technique_data

产品描述：description

产地：production_place

用途：application

论坛：forum

在线订购：on_line_order

招标：bidInviting

综述：general

业绩：achievements

大事：great_event

动态：trends

服务：service

投资：investment

行业：industry

规划：programming

环境：environment

发送：delivery

提交：submit

重写：reset

社区：community

业务：business

在线调查：online_inquiry

下载中心：download

意见反馈：feedback

常见问题：faq

中心概况：general_profile

游乐园：amusement_park

专题报道：special_report

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

商标：label/branding

当前位置：breadcrumb/loc

购物车：shop

标签：tag

信誉：siteinfo_credits

网站信息：siteinfo

法律声明：siteinfo_legal

合作伙伴：partner

友情链接：friendlink

版权：copyright