项目中文件名字
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