博客专栏  >  前端   >  前端实战

前端实战

前端项目实战

关注
145 已关注
13篇博文
  • Javascript小案例(一):仿淘宝搜索框用户输入事件的实现

    淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示:(截图日期:2017年6月18日)大家可以看到,当页面一打开,搜索框中就可以看到灰色字体“少女高跟鞋”,还有闪烁的...

    2017-06-18 16:13
    755
  • 【京东商城首页实战12】右侧:“京东快报”和“生活服务”

    现在开始做右侧部分,效果图大致如下:分析: 1.整个右侧属于一个大盒子,又分为上下两个盒子。上下盒子右再分为上下两个盒子。 2.特惠部分和红色图标部分都是用li标签做。 1.“京东快报”之前已经布局了...

    2017-05-04 20:13
    1568
  • 【京东商城首页实战11】制作轮播图

    上一节咱们添加了通栏背景并了解了布局思路,下面就开始做轮播图啦!附上轮播图图片:分析: 1.轮播图左右切换按钮和轮播序号都显示在图片上,所以可以利用定位来做。 2.轮播序号是一个盒子里,左浮动对的li...

    2017-05-04 16:43
    1078
  • 【京东商城首页实战10】添加通栏背景图片及布局技巧

    上一解已经完成了京东页面的导航条和下拉列表,至此,京东首页上部分的公共部分已经做完了。首页特有部分今天开始做京东首页的轮播图。CSS代码要写在index.css文件里面了。效果样图如下:由于篇幅限制,...

    2017-05-04 14:06
    837
  • 【京东商城首页实战9】导航菜单栏和下拉列表

    接下来开始做下面的部分,包括红色背景部分、导航菜单栏、右边的图片,如图: 图1分析:1.构架:全部商品分类是一个盒子、导航菜单是一个盒子,图片是一个盒子。 2.点击红色部分会出现下拉列表,从语义上...

    2017-05-03 21:19
    1476
  • 【京东商城首页实战8】热词菜单

    接下来,做topbanner下面大盒子的最后一个小元素——热词菜单。分析: 1.logo、搜素框、购物车已经占满了父亲盒子的宽度,所以热词菜单盒子需要左浮动,会自动掉落一行,靠近logo盒子右边。 ...

    2017-05-03 11:46
    1056
  • 【京东商城首页实战7】制作购物车

    今天开始做右边的购物车。要点分析: 1.构架:一个盒子里面有一个a标签和3个小元件,可用span标签里做。 2.小车图标,可以作为背景图片,通过定位在大盒子的左padding部分显示出来。 3....

    2017-05-03 10:41
    876
  • 【京东商城首页实战6】制作搜索框

    接下来做第二部分:搜索框,即图1蓝色边框部分。 图1HTML: 搜索 css代码:.search { width: 538px; height: 35px; ...

    2017-05-02 19:55
    1009
  • 【京东商城首页实战5】给网页添加logo

    下面,接着做topbanner下面的部分,如图: 图1 要点分析: 1.图中5个元素都在一个大盒子。 2.大盒子内容不通栏,要设置版心。 3.搜索框下面的推荐列表既可以跟搜索框同在一个盒子,...

    2017-05-02 18:57
    862
  • 【京东商城首页实战4】topbanner制作

    接着做京东首页,上面已经做了导航条,接下来要做下面的部分,如图: 图1附上topbanner图片: 图2分析: 1.有一个通栏盒子,负责通栏背景,里面再有一个版心盒子,负责装内容。 2.top...

    2017-05-02 15:53
    997
  • 【京东商城首页实战3】导航条制作(2)

    下面做导航条右边部分。 图1分析: 1.用无序列表ul制作菜单导航条。 2.有些菜单后面有小三角标志 3.菜单之间有小竖线隔开。注意这里的小竖线高度不够,不能认为菜单的边框,它是一个微型盒...

    2017-05-02 10:23
    1119
  • 【京东商城首页实战2】导航条制作(1)

    接下来,开始制作京东的导航条。效果如下图: 图1业务分析: 1.通栏盒子,并且有背景颜色 2.有版心。 3.版心里面包含左右浮动的两个盒子。 4.有下拉效果的盒子后面,有三角形标志。 5....

    2017-05-01 18:03
    1346
  • 【京东商城首页实战1】建立站点及准备工作

    京东首页静态页面实战 首先建一个文件夹,里面包括:index.html文件、用来保存图片的images文件夹、样本图片。

    2017-04-30 17:27
    1635

img博客搬家
img撰写博客
img专家申请
img意见反馈
img返回顶部