How2j仿写天猫前端学习笔记

今天在学习How2j上的项目仿写天猫前端时，遇到的一些问题特此记录下来。

置顶栏

今天主要学习了如何写上图的置顶栏，用css和html写的。天猫首页和购物车前面图标用的是以及最右边 的用的是BootStrap框架。因为用这个框架图标丰富，不用自己去找。

开始没看答案时，把购物车移到最右边，我想的是用css的 text-align:rigth; .但不成功，想了很久都 不知道错在哪。后来用了浮动样式
float: right !impotyant
移动弄成功，但去掉！import就失败，这句代码的意思是优先级最高。
后来我想，都是移动的代码。为什么上面不行，下面就行呢。 text-align:right; 只对块级元素起作用，对内联元素不支持。

这是实验出来的，不太严谨。
还可以用BootStrap框架，用class = "pull-rigth" 达到一样的效果。

用一个nav列表包裹这些链接.我还不知道nav标签。百度后，就是链接总标签。单链接很多时，就可以用这个标签，告诉浏览器这个标签的具体意义。

---

5 27日更新
做一个简单的搜索框，如下图

搜索栏

这个搜索栏实现思路如下：
天猫图片设置为绝对定位，放到最左边。输入搜索栏和下面的文字用div包裹,下面的文字又用一小div包裹。
首先把一个大div背景色填充为天猫红，颜色十六进制为#40000。

再分别设置输入框和按钮框样式。首先把他们边框设置为透明，再用
outline:none; 设置边框轮廓为隐藏，不用这句代码，当鼠标点击输入框时会有别的颜色和红色重合。
再把按钮背景色改为天猫红，颜色改为白色。字体加粗，增大为20px.

在设置下面小div上面外边距为5px,左边外边距为-20px。设左外边距是等会下面的文字设外边距时能让
首文字链接和输入框左边框对其。在设置每个链接左右外边距为20px.

然后把整个div使用 margin: 50px auto 居中，并且上外边距为50px, auto数据中的意思.只有图片设置了绝对定位，才会生效。

---

23:20更新 页脚上半部

页脚上半部

思路还是上面图片套div，下面每个购物指南，天猫保障等分别套div。再用div把这两个套进去。
主要对购物指南，天猫保障平衡排列以及和他们下面文字排列卡着了。

把他们每个都用浮动 float: left 就能实现平衡排列了，因为使用浮动会先把他们转换为
display: inline-block 内联元素，内联元素是不换行的，在之后使 line boxes高度坍塌，也就是没有高度，就实现水平排列了。
下面的文字链接使用的是标签，是内联元素，不换行。就需要用 display: block 转换为块级元素可。

---

5.28 11:38更新
页脚下半部

页脚下半部

这个制作没什么难度，但还是被我大意单词写错一些小毛病。找了半天才找出来，以后要注意了！

不过还是对margin 和padding 内边距和外边距理解加深乐意一些。外边距下面是对他底下的元素而言，而内边距下面是对自己而言