京东项目案例操作日志

2018/11/7

1.电商类网页布局分析，文件部署，以及favicon.ico图标的使用：放在站点根目录下，通过

<link rel="shortcut icon" href="facicon.ico">
复制代码

引入，位置无定义。自制png图片可以利用bitbug.net转换为favicon.ico图标。

2.网站优化（SEO）三大标签：title（28）,description（128）,keyword（6-8）.必须要写且遵循一定原则。
3.网页版型尺寸确定并定义基本宽度：利用ps或者fw工具辅助线量取并设置在base.css。
4.精灵图的使用：

• 可以在icomoon.io网址获取。
• 解压拷贝fonts文件夹下的文到项目根目录下的fonts文件夹下（原解压文件有用不要删除）。
• 使用时在需要使用的地方添加i标签。并在原始下载文件中的demo.html文件将拷贝内容粘贴到里面。
• 声明字体，打开原始解压文件中的style.css文件，粘贴最上面的声明代码@font-face{}放在base.css上面并且记得根据需要修改引用路径。
• 在需要使用该精灵图的i标签中设置字体类型

font-family:'icomoon';
复制代码

• 追加精灵图，打开原网址，点击左上角Import Icons按钮选择原下载文件中的selection.json导入即可重新添加下载，解压，用新的fonts文件夹覆盖之前的fonts文件夹。并且在使用的地方添加font-family:"icomoon";

2018/11/9

1.京东首页如下图：

结构分析：

• 头部广告（超级品类日）

• 快速导航栏（城市，登录注册等）

• 中间头部分（logo,搜索框按钮，购物车，热点关键词，小导航栏，小广告共六块区域）

• 中间部分（左、中、右）

• 底部部分（上下两部分，以灰色通栏横线分割） 2.头部广告制作注意点：

• 新建一个通栏盒子横跨整个屏幕。广告只在版心区域点击有效，所以内嵌a链接存放广告。

• 广告图片装在img标签使用，图片会自动撑起a标签，或者作为背景图片使用，但需先将a标签设为块级元素，设置宽高才可以使用背景图片。 3.灰色快速导航栏注意点：

• 快速导航也有一个通栏的盒子横跨整个屏幕，但主要内容在版心区域，版心区域具有一个压线的logo，左侧一个盒子显示城市左浮动，右侧一个盒子显示登录注册等信息右浮动。快速导航栏底部线条可以对盒子设置border-bottom。

• 两个盒子采用ul盒子,用li盒子来存储内容，做竖线，并设置左浮动。并去除列头样式list-style:none;ul是块级元素，默认有个内外边距，也给清空。

• 查看原网页快速导航栏内的文字字体大小font-size颜色color，并设置居中line-height。

• 由于第一个城市的ul盒子距离版心左侧有一定距离，了可以通过给ul盒子设置左外边距margin-left实现。

• 对于a标签的颜色，字体大小，下划线等具有近乎统一的标准可以单独标记设置，适用于所有的a标签。

• 对于右端二维码与手机京东这个li是在一起的，所有在那个li里面再加一个img标签存放二维码。对这个二维码进行绝对定位，在使用定位的时候写position属性，要养成习惯连带写上top | bottom,left | right属性，初始值设为0。 4.中间头部分注意点:

• logo固定的写法：div>h1>a.写h1是为了提高权重，便于搜索引擎优化。使用a标签装logo时，注意将a标签转换为block,且设置与logo同大小的宽高，才可以撑起来，且logo作为a标签的背景图片使用

background: #fff url(../images/logo.png) no-repeat;
复制代码

同时h1作为块级元素具有外边距，也需要清除外边距。再者，为logo或其他图片添加阴影效果

box-shadow:2px 5px 5px rgba(0,0,0,.3);
复制代码

• 搜索框：button标签与input标签中的text的button属性值效果相同，但前者是双标签可以根据需要在里面添加新的标签如i，而后者为单标签无法实现。input和button要清除border和outline轮廓边框。

input,button{
    border:0;
    outline:none;
}
复制代码

input与button标签之间并不是完全紧贴的，之间存在缝隙，即使宽度正好也会被从外部盒子里挤掉下来，使用float使紧贴。
在input为placeholder添加padding-left时会增大宽度，可以手动减小相应width值或者修改box-sizing为border-box。
对于一些需要清除内外边框和边距的可以复制粘贴

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin：0;padding:0;}
复制代码

加了绝对定位，固定定位和浮动的行内元素可直接设置宽高。

• 对于font-weight的值最好用数字，700代替bold，margin-right支持负值。 5.底部部分制作注意点：

• “多快好省”是呈现在一张图片上的精灵图，需要根据需要显示。利用：

background-position:-Xpx -Ypx | bottom;
复制代码

X,Y为部分图片左上角在图片中的位置。

• 精灵图存放在h5标签内，对于h5标签如果存在文字，除了删除，还可以采用首行缩进的方式隐藏，

text-indent:-999px;
复制代码

脱离屏显区域。

2018/11/10

1.对于单列或单行的列表，要想到ul>li或者段落p(text-align,line-height);对于多行多列要想到用dl>dt>dd。 2.京东首页的上面头部分和下面的尾部部分是公共一致的，但中间部分不一致，这时候就要新建一个css样式文件，以此分开实现，不要混在一起。 3.对于ul>li>a结构，若需要通li的格为一种颜色且文字有边距，需要对li设内边距产生距离使文字不靠边（在hover效果下会看到），同时使用ul的padding-top使上下有距离。可以对li设置高度height（文字高加单行间距）啊,配套使用line-hight使文字居中啊。

2018/11/12

1.对于img标签，在外面嵌套div的话，img的边缘只能到达border部分，边缘会留有空隙，可以采用display:block;或者vertical-align:top;解决。 2.多练多敲多记。

成品展示：

转载于:https://juejin.im/post/5be2de6b51882516e153ff35