how2j网站前端项目——天猫前端（第一次）学习笔记1

 

　　首先是公共页面的学习，有页头、页脚和搜索框。

一、页头就是天猫网站的置顶导航栏：

　　看似简单，实际做起来也不容易。

　　写html还是比较简单的，撸起袖子就可以写完。可要想做到上图的样式就难了，难就难在CSS，有绝对定位、相对定位、浮动，背景颜色的选择，字体大小和颜色，这些我都是直接跟着站长的写。这里面用到了html5、jquery库、bootstrap框架、css。

写完纯html后，浏览器上的效果是这样的：

我自己尝试加上CSS后，效果是这样的：

（这个是看过站长的代码后，再自己写出来的，第一次自己写不出来(╥╯^╰╥)）

 

二、搜索栏

纯html写完后，是这样的：

开始用CSS布局和装饰，自己简单添加了一些CSS代码后，样子变得好看一些：

三、简单搜索栏

上面的搜索栏是首页用的，有一些界面搜索栏比较简单，因此有必要做一个简单搜索栏。和上面的搜索栏一样，左边的图片绝对定位，不同的是：搜索框这次右浮动，上面的搜索框是居中的。

 

四、页脚一

因为页脚内容多，所以分为两部分。

纯html时候的页面效果：

加上自己的CSS样式后的效果：

自己做的效果并不是很好，下面的购物指南没有居中。但是发现站长的也没有居中，后来自己加上一句text-align:center就可以居中了。

 

五、页脚2

自己编写的纯html页面：

自己尝试加上CSS后的页面效果：

这个页脚2很简单，自己做出来的效果也看得过去。

 

总结：

　　1.图中的两个图标是套用bootstrap框架的，进行class的套用

　　2.同样也是bootstrap，让div的class等于pull-left和pull-right就能实现左浮动和右浮动

　　3.天猫红：#C40000；字体颜色：#999；背景颜色：#f2f2f2；边框颜色：#e7e7e7

　　4.中的placeholder很有意思

 

转载于:https://www.cnblogs.com/czp2bconfident/p/8631726.html