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

开始我的订单页面

  学着学着,会觉得我这是在干啥呢?我要学的是Java不是吗?怎么要学这么久的前端啊?说实话,我很迷茫,不知道以后的工作具体是做什么?学的这些能用到吗?

不过,还是要把这个项目跟着走完!加油。。。

一、我的订单页面——简单的标题部分

自己模仿站长的样子做的,用了站长推荐的工具:屏幕标尺,好测量各个部分的宽度

二、我的订单页面——复杂的产品列表部分

根据站长的思路,自己先写了一份HTML5+CSS的,效果如下,大部分还是很满意的

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

旺旺的图片,站长是将一个大图片作为背景图片,然后进行裁剪,并且将其作为一个链接,看一下站长是怎么弄的:

 1  <td colspan="1"> //一个单元格
 2        <a href="#nowhere" class="wangwanglink"> 
 3             <div class="orderItemWangWangGif">div>
 4        a>
 5  td>
 6 
 7 
 8 
 9 div.orderItemWangWangGif{
10     display: inline-block;
11     width: 67px; //通过指定div的宽度和高度,来决定显示背景图片
12     height: 22px;
13     background-image: url(wangwang.gif); //指定背景图片
14     background-repeat: no-repeat;
15     background-color: transparent;
16     background-attachment: scroll; //设置背景图像是否固定或者随着页面的其余部分滚动:fixed(固定) scroll(跟随其他元素滚动)
17     background-position: -0px -0px; //设置背景图片的x坐标和y坐标,来决定图片开屏幕上哪个位置显示(基于父元素)
18     position: relative;
19     top: 0px;
20     left: 2px;
21 }        

三、交互

这个部分的交互比较简单,就是点击标题部分的5中分类,分别显示不同的订单。通过$()获取对象的按钮单击事件,再通过$()获取相对应的表格,利用hide()函数和show()函数就行了!

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

你可能感兴趣的:(how2j网站前端项目——天猫前端(第一次)学习笔记6)