```
html命名规范
```
1.首页 主页面 index.html
2.子页面: 首页: home.html 我的 mine.html 关于我们:aboutus.html
信息反馈: feedback 产品:product 购物:shop 计数器:count
3.一级页面:登录 login.html login.css login.js
注册 resign.html
用户管理: userManage.html
```
图片的命名规则
```
图片的文件的后缀 xxx.png xxx.jpg xxx.gif xxx.bmp
图片的名称分为头尾两部分 用下划线隔开 头部分表示此图片的大类
例如: 产品类 product 产品下的电视手机 product_tv product_iphone
```
大类例如:广告 标志 菜单 按钮
```
-放在页面顶部的广告 banner
-企业商标 标志性的图片logo
-在页面上某一个位置连续出现 性质相投的链接栏目的图片 我们取名 menu
-装饰用的照片我们取名 pic
-不带链接表示标题的图片 我们取名 title
范例:: banner_ sohu.gif
banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_policy .gif
logo_nation .gif
pic_people.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
文本类 text-align:left
其他属性 overflow:hidden
}
布局定位类属性
margin padding float clear positon (相应的 top right bottom left)
display visibility overflow等
自身属性
width height background bord
文本属性
font color text-align text-decoration text-indent whiie-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 权重最高
7:大区域 一定要加注释 小区域适当 方便查看
8:尽量使用复合属性 magin border
css 命名规范
页面结构
容器: container wrap
整体宽度:wrapper
页头:header
内容:content
侧栏:sidebar
栏目:column
中间内容:center
导航
导航:nav
主导航:mainNav gloabNav main_nav
子导航:subNav
顶部导航:topNav
边部导航:sideBar
左边导航:leftSideBar
右边导航:rightSideBar
边导航图片:sideBarIcon
菜单:menu
子菜单:subMenu
标志: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