随手记十——淘宝静态页面

　　用了一个多星期来学习淘宝布局，2/3的时间花在了自己摸索写出的淘宝1.0，勉强写完后用剩下1/3的时间学习并写了2.0，觉得还是记录一下学习进度比较好。

一、首先打开真正的淘宝页面，它长这样：

 二、我自己写的1.0，如下，多多少少有点儿丑了

 三、这是看了教学视频之后写出的淘宝2.0

 四、总结

　　写1.0的时候刚学完基础HTML和CSS，完全是毫无章法，想到怎么写就怎么写，最终写出来的，虽说雏形是有的，但一看就十分不美观，很多细节的东西都没有实现，比如说小图标，右侧固定导航栏之类的。在写完2.0之后我又重新看了原来的代码和后来的代码，做了反思：

　　1、1.0使用了太多的div，几乎每个结构都在使用div，嵌套的div太多，显得整篇代码下来十分繁冗。

　　2、1.0中没有做重置css文件，其实很多标签可以一开始就做好初始化，比如说<li></li>标签，一开始就该统一配置list-style:none;这样就不用一直反反复复写这个属性了。

　　3、1.0中一直用position:absolute;来规划各个模块，导致各个模块非常混乱，各种left:878px;之类的。

　　4、1.0中使用了float:left;后总是忘了清除浮动流，而且只用float:left;，完全忽略了float:right;

　　我也通过2.0学习到许多优秀的方法和习惯：

　　1、css文件不是必须一个的，可以写很多个，但是必须要有初始化重置文件呀，省了好多事

　　2、说到重置文件，可以写这个页面频繁使用的颜色、居中对齐的属性、清除浮动等，非常方便！

　　　比如说居中对齐可以写 .layer{ width:1800px;  margin:0 auto;}

　　　清除浮动可以写 .clearfix::after{ content: ' '; display:block; clear:both; }

　　　然后在需要使用的模块上添上一个class就可以了

　　3、说到清除浮动流，就要注意，一旦子级使用了浮动，一定要在给它的父级清除浮动，上个clearfix的buff

　　4、前面提到我的1.0没有做小图标，当时不知道怎么做，干脆搁置一边了，通过学习知道了小图标是可以用iconfont字体图标来完成的，使用这种方式，就是把小图标做成文字的形式，可以调整大小、颜色等等，具有文本属性噢

　　5、在动手写某个模块之前要做一个规划，把结构分好写好，再慢慢补充细节。

　　6、要写注释！！注释是良好的代码习惯！！每个模块之前都要标注到这是什么，不然修改的时候会找到哭qwq

　　7、 每一个主体模块都可以给一个id，在css文件写的时候加上对应模块的id，就像是做了标记一样，好找，而且可以更好地定位到某个结构

　　通过做淘宝静态页面我也学习到了很多新知识：

　　1、样式重置和模块化、上面提了。

　　2、line-height不同值的区别

　　　　我们常见line-height的值的形式有：px、数字(如1.5)、%、em、normal。

.body{ font-size:16px; line-height:_____;} .h3{ font-size:20px;}
设置方式	h3的line-height的值	备注
normal	具体看字体的值，比如说宋体、黑体之类的	默认
数字 （1.5）	20×1.5=30px	继承的是line-height:1.5这个值
px（14px）	14px	继承的是父元素计算后的line-height，父元素line-height多少我多少，除非自己重新设置。
em（5em）	16×5×=80px
%（200%）	16×200%=32px

　　　　一般来数，设置行高的值为 纯数字 是最推荐的方式，因为其会随着对应的 font-size 而缩放。

　　3、CSS@规则

　　　　@charset   设置样式表的编码

　　　　@import   导入其他样式文件，比如说@import 'reset.css';

　　　　@media　媒体查询

　　　　@font-face　自定义字体

　　4、favicon

　　　　favicon就是title前面的小图标，url图标/网页图标，一般都是.ico后缀的文件。使用格式为：<link rel="icon"  href="/url地址" >

　　　　记得ico文件要放在根目录噢。

　　5、base标签

　　　　<base>标签用于定义一个文档当中所有相对url的根目录(其实就是基础根地址)，还可以设置网页在新标签打开target=_"_blank"。记住一个页面只能有一个base标签。

　　6、自定义图标

　　　　就是前面提过的@font-face，

　　7、H标签的应用场景

　　　　很多时候爬虫软件就是通过爬取H标签来提取关键信息，所以在我们具有识别信息的地方最好都套上一个H标签，如淘宝网上的淘宝Logo，套上一个h1标签，而二级标题，比如说主题市场，可以用h2标签，某个小模块的标题可以用h3标签，小模块的内容可以用h4标签。h5和h6标签极少使用。

　　8、以图换字

　　　第一种，设置首行缩进大于等于容器宽度，这样可以把淘宝网三个字挤出容器，然后用white-space:nowrap;强制不能换行，这样淘宝网三个字就都在一行上而且都在容器外面了，接着再用overflow:hidden;将容器外面的几个字隐藏。

　　　{background: url(xxxxxxxxxxxxxxx) no-repeat;

　　　 text-indent:-9999px;

　　　 white-space:nowrap;

　　　 overflow:hidden;　　　

　　　 }

　　　第二种，利用padding能放置背景图片且不能放置内容的特点，用padding支撑起容器的高度，这个时候其实淘宝网三个字已经在容器外面了，然后图片覆盖padding，接着用overfloat:hidden;隐藏淘宝网这几个字，实现同样的内容。

　　　{height:0px;

　　　background:url(xxxxxxx) no-repeat;

　　　padding-top:60px;

　　　overflow:hidden;

　　　}

　　9、怪异盒模型(IE盒模型)

　　　

　　10、CSS3（圆角、渐变、过渡）

　　　　圆角：border-radius：20px;可以设置各个角的弧度

　　　　渐变：淘宝2.0用了线性渐变，即background-image:linear-gradient(to right,#ff9000,#ff5000); 从左到右

　　　　　　　　　　　　　　　　　　  background-image:linear-gradient(135dge,#ff9000,#ff5000); 从左上到右下，135°到315°，也可以写作to bottom right。

　　11、IE滤镜  

　　　　CSS3很多功能非常强大，但是IE却不兼容，这时候可以使用相应的IE滤镜来实现兼容。

　　12、CSS HACK（另外总结）

　　13、图片垂直居中对齐（另外总结）

　　14、CSS Sprites

　　　　又称雪碧图、精灵图，我理解为将多个矢量小图标放在一张图里，通过调整xy值来定位某个小图标。雪碧图的好处就是减少图片请求的次数，避免造成资源浪费、访问速度降低的问题。

　　15、图片格式webp

　　　　这是谷歌浏览器在14年推出的一种图片格式，优点是同样的图片，webp的大小比别的格式小十倍甚至数十倍，还不影响清晰度。

　　16、词换行

　　　　参考淘宝右侧固定导航栏里的每个单元格，比如说“品质推荐”需要将这个词分成上下两行，可以<a href="#" class="c4 active">品质 好货</a>中间用一个空格间隔开，再在css文件中使用word-break:keep all;换行即可。

原文地址：https://www.cnblogs.com/zherleon/p/13828891.html