项目中文件名字

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：书写顺序：布局定位属性–>自身属性–>文本属性–>其他属性

布局定位类属性

自身属性

文本属性

其他属性

CSS优化

1: 全局考虑样式；提你高代码重复使用
2：多使用兼容性好的样式 css2
3: 减少使用功能position absolute fixed 属性;
4: 重要图片 加【alt】 重要标签加【title属性】
5：合理使用选择器；尽量少使用伪类选择器 nth:type-of-child()
6: 不到万不得已；不要用 !important 权重最高
8：尽量使用复合属性 magin border

css 命名规范

页面结构

导航