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

2018/03/23 17:43
阅读数 120

 

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

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

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

  写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.<input type="text" placeholder="扫地机器人 夏装" />中的placeholder很有意思

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部