3项目实战

1. 图片规范
   1. 内容图
      1. 内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
         1. 优先考虑JPEG格式，条件允许的话优先考虑WebP格式
         2. 尽量不使用PNG格式，PNGB色拉太低，PNG24压缩率底，文件体积大
         3. PC平台单张的图片的大小不应大于200KB
   2. 背景图
      1. 背景图多以图标等颜色比较简单、文件体积不大、起修饰作用的图片
         1. PNG与GIF格式，优先考虑使用PNG格式，PNG格式允许更多的颜色并提供更好的压缩率
         2. 图片颜色比较简单的，如纯色块线条图标，优先考虑使用PNG8格式，避免不使用JPGE格式
         3. 图片颜色丰富而且图片文件不太大的（40KB以下）或有半透明效果的优先考虑PNG24格式
         4. 图片颜色丰富而且图片文件比较大的（40KB-200KB）优先考虑JPEG格式
         5. 条件允许的，优先考虑WebP代替PNG和JPEG格式
2. CSS规范
   1. 代码格式化
      1. 样式书写一般有两种：
         1. 一种是紧凑格式
            1. 例子：.jdc{display: block;width: 50px;}
         2. 一种是展开式
            1. 例子： .jdc{

display: block;

width: 50px;

}

• • 1. 团队约定：同样使用展开格式书写样式

1. 代码大小写
   1. 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写
2. 选择器
   1. 尽量少用通配符选择器*
   2. 不使用ID选择器
   3. 不使用无具体语义定义的标签选择器
3. 代码缩进
   1. 统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有关配置）
4. 分号
   1. 每个属性声明末尾都要加分号;
      1. 案例：
         1. .jdc {

display: block;

width: 50px;

}

1. 代码易读性
   1. 左括号与类名之间一个空格，冒号与属性值之间一个空格
      1. .jdc {

display: block;

width: 50px;

}

• 1. 逗号分隔的取值，逗号之后一个空格
     1. 案例：.jdc {

box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;

}

• 1. 为单个css选择器或新声明开启新行
     1. 例子：
        1. .jdc,

.jdc_logo,

.jdc_hd {

color: #ffo

}

• 1. 颜色值十六进制数值能用简写的尽量用简写
  2. 不要为0指定单位
     1. 例子：margin: 0 25px;
  3. 属性值引号时，统一使用单引号
     1. 例子：.jdc {

font-family: ‘Hiragino Sans GB’;

}

1. 属性书写顺序：
   1. 1.布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
   2. 2.自身属性：width/height/margin/padding/border/background
   3. 3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
   4. 4.其它属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background: linear-gradient…
2. 命名规范
   1. 由历史原因及个人习惯引起的DOM结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高
   2. 目录命名
      1. 项目文件夹：pinyougou(见名知意)
      2. 样式文件夹： css
      3. 脚本文件夹： js
      4. 样式类图片文件夹：img
      5. 产品类图片文件夹：upload
      6. 字体类文件夹：fonts
   3. ClassName命名
      1. ClassName的命名应该尽量最精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线“_”连接
         1. 例子：.nav_top
   4. 常用命名推荐
      1. 注意：ad、banner、gg、guanggao等有机会和广告挂钩的字眼不建议直接用ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此，这种广告的英文或拼音类名不应该出现。另外敏感不和谐字眼也不应该出现

1. 样式文件的分类
   1. 初始化css让浏览器风格统一，把常用的初始化语句放入base.css里面
   2. 我们把一些公共的样式放入common.css里面
2. 网站ico图标
   1. 使用ico图标
      1. 首先把favicon.ico这个图标放到根目录下。
      2. 再html里面，head之间引入代码
         1. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   2. 制作ico图标（一般是16x16或48x48的）
      1. 我们可以自己做的图片，转换为ico图标，以便放到我们站点里面。
      2. 方法步骤：
         1. 首先把我们想要的切成图片
         2. 要把图片转换为ico图标，我们借助于第三方转换网站： https://www.bitbug.net。比特虫
   3. 注意：
      1. 它是显示在浏览器中的网页图标
      2. 它是图标形式，不是一个图片
      3. 位置是放到head标签中间
      4. 后面的type=“image/x-icon”属性可以省略
      5. 为了兼容性，请将favicon.ico这个图标放到根目录下。
3. 网站优化三大标签
   1. SEO是由英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”！
   2. 常见的搜索引擎，比如百度，谷歌，雅虎，搜狗等等
   3. SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。简单的说就是，把产品做好，搜索引擎就会介绍客户来
4. 网站优化三大标签
   1. 网页title标题
   2. description
   3. keyword
5. 网页title标题
   1. title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点
   2. 标题的长度
      1. Google(70KB),35个中文
      2. Baidu（56KB）,28个中文
   3. 关键字分布
      1. 最先出现的词语权重越高
   4. 关键字词频
      1. 主关键词出现3次
      2. 辅关键词出现一次
   5. 建议：
      1. 网页标题
         1. 格式：
            1. <title>网站名（产品名）-网站的介绍</title>
         2. 案例：
            1. <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
            2. <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
            3. <title>小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站</title>
6. description网站说明
   1. 对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的mata标签中描述部分作为搜索结果的“内容摘要”。就是简要说明我们网站的主要做什么的。
   2. 我们提倡，description作为网站的总体业务和主题概括，多采用“我们是…” “我们提供…” ”…网作为…” ”电话：010…”之类语句
   3. 案例：
      1. 京东：
         1. <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
   4. 注意点：
      1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣，吸引用户点击
      2. 同样遵循简短原则，字符数含空格在内不要超过120个汉字。
      3. 补充在title和keywords中未能充分表述的说明
      4. 用英文逗号 关键词1, 关键词2
7. Keywords关键词
   1. Keywords是页面关键词，是搜索引擎关注点之一，keywords应该限制在6~8个关键词左右，电商类网站可以多少许
   2. 案例：
      1. 小米网：
         1. <meta name=”keywords” content=”小米，小米6，红米Note4，小米MIX，小米商城” />
      2. 京东：
         1. <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
8. 总结：
   1. 我们的网页要做得优秀，符合搜索引擎的要求，才可以让搜索引擎优先显示我们的网页。所以我们的网站要做很多的优化，其中就有这三大标签。
   2. 一般情况下，三大标签里面的优化词，都是专门的优化人员写的，我们大概了解一下就可以了。
   3. 我们的主要任务是，能写出这三大标签，然后把优化人员给我们的内容，添加到里面
9. 字体图标
   1. 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术重新“宠信”了，这就是字体图标（iconfont）
   2. 字体图标优点
      1. 可以做出跟图片一样可以做的事情，改变透明度、旋转度，等…
      2. 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
      3. 本身体积更小，但携带的信息并没有消减
      4. 几乎支持所有的浏览器
      5. 移动端设备必备良药…
   3. 字体图标使用流程
      1. UI人员设计字体图标效果图（svg）
      2. 前端人员上传生成兼容性字体文件包
      3. 前端人员下载兼容性字体文件包到本地
      4. 把字体文件包引入到HTML页面中
10. 设计字体图标
    1. 假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在illustrator或Sketch这类矢量图形软件里创建icon图标，之后保存为svg格式，然后给我们前端人员就好了
    2. 其实第一步我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步
11. 上传生成字体包
    1. 当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。
       1. 推荐网站：http://icomoon.io
       2. Icomoon字库
          1. icoMoon成立于2001年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使他们成一字型，内容种类繁多，非常全面，唯一的遗憾是国外服务器打开网速较慢
          2. 推荐网站：http://www.iconfont.cn
       3. 阿里iconfont字库
          1. http://www.iconfont.cn
          2. 这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！
12. 下载兼容字体包
    1. 刚才上传完毕，网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了
    2. 当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上两步可以直接省略了，直接到刚才的网站上找喜欢的下载使用吧。
13. Icomoon字体库使用
    1. 下载
       1. 进入官网：http://icomoon.io
       2. 点击右上角的“IcoMoon App”
       3. 选择需要的字体图标 点击即可
       4. 然后点击右下角的“Generate Font F”
       5. 再点击右下角的“font Download”
    2. 字体引入到HTML
       1. 得到压缩包之后，我们得知字体图标 本质就是 字体文件。注意这个压缩包不要删掉，我们后面还有用（解压后的压缩包里找到fonts文件夹，把fonts文件夹放到根目录下面）
       2. 最后一步，是最重要的一步，就是字体文件已经有了，我们需要引入到我们页面中
          1. 首先把fonts文件夹放入我们根目录下。
          2. html标签内添加结构
          3. 在下载的字体压缩包内找到“demo.html”,双击进入demo页面
          4. 在demo页面中复制需要的字体图标后面的矩形框框，将这个框框放入html结构中（例如：span标签里面）
    3. 在样式里面声明字体：告诉别人我们自己定义的字体（一定注意字体文件路径的问题）
       1. 在解压的字体包中找到style.css
       2. 将@font-face {…}里面的样式复制到自己的css样式里面
          1. @font-face {

  font-family: 'icomoon';

   src:  url('fonts/icomoon.eot?w2vqw0');

   src:  url('fonts/icomoon.eot?w2vqw0#iefix') format('embe dded-opentype'),

     url('fonts/icomoon.ttf?w2vqw0') format('truetype'),

     url('fonts/icomoon.woff?w2vqw0') format('woff'),

     url('fonts/icomoon.svg?w2vqw0#icomoon') format('svg');

   font-weight: normal;

  font-style: normal;

   font-display: block;

}

• 1. 给盒子使用字体
     1. span{

font-family: ‘icommon’;

}

1. 追加字体图标
   1. 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做
      1. 把压缩包里面的selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，替换原来文件即可。
         1. 进入icommon官网http://icomoon.io
         2. 点击“IcoMoon App”
         3. 点击左上角的“Import Icons”
         4. 选择压缩包里面的“selection.json”
         5. 点击”yes”
         6. 再选择需要的图标就好了，后面操作和前面一样
2. logo优化
   1. logo里面首先放一个h1标题，目的是为了提权，告诉搜索引擎，这个地方很重要
   2. h1里面再放一个链接，可以返回首页的，给链接一个大小和logo的背景图片
   3. 链接里面放文字(网站名称)，但是文字不要显示出来
      1. 淘宝的做法：
         1. 用text-indent移到盒子外面（text-indent：-999px）然后用overflow：hidden;
      2. 京东的做法：
         1. font-size: 0;
   4. 给链接一个title属性 这样鼠标放到logo上，就可以看到提示文字了
   5. 案例：
      1. Css样式部分
         1. .logo{

     position: absolute;

     top: 50%;

     left: 0;

    width: 175px;

     height: 56px;

     margin-top: -28px;

     /*

         这里用的是定位的盒子垂直居中的方法

     */

}

.logo a {

     display: block;

     overflow: hidden;

     width: 175px;

     height: 56px;

     /*

     链接里面的网站名称不显示

      法一：font-size: 0;

      法二：text-indent: -999px;

            overflow: hidden;

     本代码中用的法二

     */

     text-indent: -9999px;

      background:blue url(../imgs/logo.png) no-repeat -2px 0;

}

• • 1. Html结构
       1. <div class="logo">

             <h1>

                 <a href="index.html" title="品优购">品优购</a>

              </h1>

         </div>

1. 顶部快捷导航栏<div class = “shortcut”></div>
2. 头部区域<div class =”header”></div>
3. 推荐服务模块<div class =”recommend”></div>
4. 楼层区<div class =”floor”></div>
5. 过渡(CSS3)
   1. 过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
   2. 过渡动画：是从一个状态 渐渐的过渡到另一个状态
      1. 谁做过渡给谁加
   3. 可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。
   4. 我们现在经常和:hover一起搭配使用。
   5. 语法格式：
      1. transition: 要过度的属性 花费时间 运动曲线 何时开始;
      2. transition: 要过度的属性1 花费时间 运动曲线 何时开始,

要过度的属性2 花费时间 运动曲线 何时开始;

• 1. 运动曲线
     1. linear：匀速
     2. ease：逐渐慢下来
     3. ease-in：加速
     4. ease-out：减速
     5. ease-in-out：先加速后减速
  2. 何时开始
     1. 默认是0s 鼠标触发就立即开始 可以设置延迟触发时间
  3. 案例：transition: width 2s ease 2s;
  4. 在元素和元素的链接伪类选择器:hover同时存在时，过渡样式只加在元素上面，则过渡的效果在鼠标经过元素和离开元素都会存在。如果过渡样式只加在链接伪类选择器:hover选中的元素时，过渡效果只会在鼠标经过元素时有过渡效果，离开会复原，不会有过渡效果
  5. 如果有多个属性值发生变化，用逗号隔开
  6. 属性就是你想要变化的css属性，如果想要所有的属性都变化，写一个all就可以。
  7. transition如果属性值是由一个属性和一个数字组成，则属性是要变化的属性，数字是花费的时间

1. 获得焦点元素
   1. :focus伪类选择器用于选取获得焦点的元素。我们这里主要针对的是 表单元素
   2. 当表单获取到焦点时，的样式
2. 实战第四天详情页detail.html常用单词