京东静态页面总结

京东网页的实现

• 图标制作

1.选择我们自己做的一张图片，存储为web使用格式，选择为透明的，保存，选中的切片，然后保存。

2.进入http://www.bitbug.net/ 选择图片，然后转换成.ico格式。

3.将图标加入项目的更目录里面（即和css文件夹等同级）

4.link:favicon 将图标加入网页

• 网站三大标签优化

1.title标签（最好不超过28个汉字）

建议以：首页标题，网站名（产品名）- 网站介绍

例：京东（JD.COM）-综合网购首选-正品低价、品质保障、配送及时、轻松购物

例：小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站

2.description标签（详细的说明，最好不超过120汉字）

主要用来吸引客户

3.Keywords关键字

主要写公司的重点产品，主要产品

• 下载字体图标

1.进入icomoon.io网站，找到相应的图标，下载。

2.解压后，将fonts里面的内容复制粘贴到项目的fonts文件夹里面。

3.打开解压文件夹里面的demo网页文件，复制后面手机形状的图标。

4.粘贴到需要图标的地方，一般会专门设置一个i标签。

5.在css里面声明字体：找到style.css文件，复制粘贴如下代码（记得改路径）

@font-face { /*字体声明*/
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?lnggsv');
    src:  url('../fonts/icomoon.eot?lnggsv#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?lnggsv') format('truetype'),
    url('../fonts/icomoon.woff?lnggsv') format('woff'),
    url('../fonts/icomoon.svg?lnggsv#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

6.写i标签的样式调用字体：如下

font-family: icomoon;

• 可以写一个浮动类、版心类公共样式。

• 给盒子加padding值会撑大盒子，有两种解决方法。第一，可以调整原本盒子的大小，让其适应。第二，加如下代码：

  box-sizing: border-box;/*这样就不会撑开盒子*/
  

• 精灵图做背景：

  background: url("../images/ico_footer.png")repeat 0 -150px;
  

  .service li:nth-child(2) h5{
      background-position: 0 -43px;
  }//表示的第二个li标签下的h5标签下的背景
  

• z-index: 990;/*表示盒子叠加时，值越大，越在上面。*/
  

• 做动画时：过渡

  transition: all 0.6s;/*过渡*/
  

• white-space: nowrap;/*强制一行内显示*/
  overflow: hidden;/*溢出隐藏*/
  text-overflow: ellipsis;/*超出部分显示省略号*/
  

• 轮播图图片两边的箭头是a标签，下面的圆点是ul标签

  top: 50%;
  transform: translateY(-50%);//垂直居中表示
  

  background-color:rgba(0,0,0,0.2);//背景透明度表示
  color: rgba(255,255,255,0.5);、、字体颜色透明度表示
  

  border-radius: 50%;//设置圆角
  border-radius: 10px;
  

• 当父盒子的宽度不够时，可以加宽父盒子中的ul标签的宽度，这样li标签浮动后就可以排到一行去了，然后再设置超出部分隐藏即可。