[暑假]品优购练手Demo---需要掌握的知识

仅了解知识或许会让我们变得博识,但是为了精通可能就需要一点点背诵了

开发小技巧: 多行输入 AIT + 点击我们要输入的行

                      批量操作可以使用 AIT+Shift 批量操作 也就是Emmet语法

                        可以使用 shift+Alt+F 快速使文档格式化

 一. 一个网站制作的流程:

               第一步: 和客户详细沟通,尽可能详细的提问,掌握并且明确客户的需求(这个时候不好好沟通问清楚,后面改到崩溃)

                第二步: 签合同咯~

                第三步: 客户首先要支付定金(一般是这个项目的30%左右) , 这个定金绝对不退~~~

                 第四步: 由美工小姐姐或者小哥哥上线,开始画图咯

                 第五步: 前端的好好把页面画出来, 后端的就做后台功能开发 

                 第六步: 交付客户验收

                 第七步: 客户感觉没啥大问题, 我们就教客户如何使用这个网站

                 第八步: 就是后期维护(就是售后哦), 一般是半年~一年时间.

  

二.项目大致搭建

   第一步:创建统一的文件夹:

        

中文名称	实际文件命名
项目文件夹	shoping(具体名称看做的是什么类型的项目 做之前一个团队的前端商量好   商城就是shoping 平台类的比如篮球的 sport-basketball)
样式图片文件夹(不经常换掉的)	images
样式文件夹	css
产品类图片文件夹(经常换的 比如双十一,广告等等)	upload
字体类文件夹	fonts
脚本文件夹	js

 第二步: 写通用样式和基础框架

                        比如: 首页, CSS初始化样式文件,  CSS公共样式文件

                        注意(也要统一命名):                                

中文名称	实际文件命名
首页	index.html
CSS初始化样式文件	base.css
CSS公共样式文件	common.css

                               第二步中的

                                                        第1)步 设置首页 其实就是 先 index.html 创建一个页面

                                                        第2)步 去某些指明(比如 JD)网页复制 或者 如果自己想写可以写一个初始化样式文件

                                                        第3)步 写公共样式文件(common.css)其中 一般包含版心宽度,清除浮动, 页面文字颜色 等公共样式

                                                                                 

               第二步中 第 3) 公共样式中:

                                                                                                                                                  

                               拓展:

                                                要具备模块式开发的思维:

                                                                        1) 有些样式在这个项目中重复出现, 比如页面的头部                                                                                  和底部, 大部分页面都有. 这些结构和样式单独做一个模块,然后拿来重复使用

                                                                         2) 比如最典型的应用就是 common.css公共样式

                                                                         3) 模块化开发具有重复使用, 方便修改等优点      

 第三步: 网站的favicon图标

                                1) 制作favicon 

                                                使用PS将所需图标,转换格式为PNG格式,然后在比特虫转换成 ico格式                                                                                                                           

                                2) 图标放到跟目录下

                                        

                                3)HTML页面引入图标

                                                在比特虫里面有对应的代码

                                                                

        第四步:

三.需要牢记的一点点的知识点

1.伪类的修饰顺序

2. zoom是CSS中的一个属性, 有"缩放"的意思, 用于设置或检索对象的缩放比例, 可以让网页实现IE7中的放大缩小功能. zoom是IE浏览器的专有CSS属性,

3. 解析 link标签:

                href属性: 设置或返回倍链接资源的URL

                rel属性: 规定当前文档与被链接文档之间的关系

                                   值stylesheet : 文档的外部样式表

4. 路径中 / ./ ../的含义

/ 代表的是根目录

./ 代表的是当前目录

../ 代表的是上一层目录         

5.    引用自@pink老师

常用模块类名 命名

                                  

6.CSS属性的书写顺序:

                建议遵循以下顺序:

                        1.布局定位属性: display/position/float/clear/visibility(指定一个元素是否可见)/overflow(建议display第一个写, 毕竟关系到模式)

                        2.自身属性: width/height/margin/padding/border/background

                        3.文本属性:color/font/text-decoration / text-aligin/ vertical-align / white-space / break-word

                        4.其他属性(CSS3): content / cursor/ border-radius/ box-shadow / text-shadow

7.浏览器私有前缀

        私有前缀:

                        -moz-: 代表firefox浏览器私有属性

                        -ms-: 代表ie浏览器私有属性

                        -webkit-: 代表safari, chrome私有属性

                        -o-: 代表Opera私有属性