京东项目案例操作日志

2018/11/7

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

"shortcut icon" href&＃61;"facicon.ico">

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

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

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

font-family:&＃39;icomoon&＃39;;

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

2018/11/9

1.京东首页如下图&＃xff1a;

结构分析&＃xff1a;

头部广告&＃xff08;超级品类日&＃xff09;
快速导航栏&＃xff08;城市&＃xff0c;登录注册等&＃xff09;
中间头部分&＃xff08;logo,搜索框按钮&＃xff0c;购物车&＃xff0c;热点关键词&＃xff0c;小导航栏&＃xff0c;小广告共六块区域&＃xff09;
中间部分&＃xff08;左、中、右&＃xff09;
底部部分&＃xff08;上下两部分&＃xff0c;以灰色通栏横线分割&＃xff09; 2.头部广告制作注意点&＃xff1a;
新建一个通栏盒子横跨整个屏幕。广告只在版心区域点击有效&＃xff0c;所以内嵌a链接存放广告。
广告图片装在img标签使用&＃xff0c;图片会自动撑起a标签&＃xff0c;或者作为背景图片使用&＃xff0c;但需先将a标签设为块级元素&＃xff0c;设置宽高才可以使用背景图片。 3.灰色快速导航栏注意点&＃xff1a;
快速导航也有一个通栏的盒子横跨整个屏幕&＃xff0c;但主要内容在版心区域&＃xff0c;版心区域具有一个压线的logo&＃xff0c;左侧一个盒子显示城市左浮动&＃xff0c;右侧一个盒子显示登录注册等信息右浮动。快速导航栏底部线条可以对盒子设置border-bottom。
两个盒子采用ul盒子,用li盒子来存储内容&＃xff0c;做竖线&＃xff0c;并设置左浮动。并去除列头样式list-style:none;ul是块级元素&＃xff0c;默认有个内外边距&＃xff0c;也给清空。
查看原网页快速导航栏内的文字字体大小font-size颜色color&＃xff0c;并设置居中line-height。
由于第一个城市的ul盒子距离版心左侧有一定距离&＃xff0c;了可以通过给ul盒子设置左外边距margin-left实现。
对于a标签的颜色&＃xff0c;字体大小&＃xff0c;下划线等具有近乎统一的标准可以单独标记设置&＃xff0c;适用于所有的a标签。
对于右端二维码与手机京东这个li是在一起的&＃xff0c;所有在那个li里面再加一个img标签存放二维码。对这个二维码进行绝对定位&＃xff0c;在使用定位的时候写position属性&＃xff0c;要养成习惯连带写上top | bottom,left | right属性&＃xff0c;初始值设为0。 4.中间头部分注意点:
logo固定的写法&＃xff1a;div>h1>a.写h1是为了提高权重&＃xff0c;便于搜索引擎优化。使用a标签装logo时&＃xff0c;注意将a标签转换为block,且设置与logo同大小的宽高&＃xff0c;才可以撑起来&＃xff0c;且logo作为a标签的背景图片使用

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

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

box-shadow:2px 5px 5px rgba(0,0,0,.3);

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

input,button{border:0;outline:none; }

input与button标签之间并不是完全紧贴的&＃xff0c;之间存在缝隙&＃xff0c;即使宽度正好也会被从外部盒子里挤掉下来&＃xff0c;使用float使紧贴。
在input为placeholder添加padding-left时会增大宽度&＃xff0c;可以手动减小相应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&＃xff1a;0;padding:0;}

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

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

“多快好省”是呈现在一张图片上的精灵图&＃xff0c;需要根据需要显示。利用&＃xff1a;

background-position:-Xpx -Ypx | bottom;

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

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

text-indent:-999px;

脱离屏显区域。

2018/11/10

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