前端实战
关注
分享
扫一扫
文章平均质量分 52
前端项目实战
编程大学姐远春儿
全栈码农，专注java毕设手把手带敲教程分享、毕设实战项目开发讲解。
展开
-
Javascript小案例（一）：仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台，打开淘宝网首页，找到淘宝首页的搜索框，如下如所示：（截图日期：2017年6月18日）大家可以看到，当页面一打开，搜索框中就可以看到灰色字体“少女高跟鞋”，还有闪烁的光标。当用户点击输入的时候，灰色字消失。当用户清空文本框的所有内容的时候，灰色字自动恢复。接下来，这个小案例就是要介绍如何实现这种效果，即用户输入事件。判断用户输入的事件有 oninput 和onpro原创 2017-06-18 16:13:50 · 6097 阅读 · 6 评论 -
【京东商城首页实战12】右侧：“京东快报”和“生活服务”
现在开始做右侧部分，效果图大致如下：分析：1.整个右侧属于一个大盒子，又分为上下两个盒子。上下盒子右再分为上下两个盒子。2.特惠部分和红色图标部分都是用li标签做。1.“京东快报”之前已经布局了右侧的紫色大盒子，现在要去掉紫色的盒子的背景，在给加上1px的灰色实线边框。 关于京东快报部分的构架分析： “京东快报”和“更多”在一个盒子里，“京东快报”是标题，“更多”可以点击。注意文字和盒子之原创 2017-05-04 20:13:43 · 6267 阅读 · 5 评论 -
【京东商城首页实战11】制作轮播图
上一节咱们添加了通栏背景并了解了布局思路，下面就开始做轮播图啦！附上轮播图图片：分析：1.轮播图左右切换按钮和轮播序号都显示在图片上，所以可以利用定位来做。2.轮播序号是一个盒子里，左浮动对的li标签。相当于是微型菜单栏。先看一下HTML代码：<div class="banner clearfix"><!--banner是通栏大盒子--> <a href="#" class="bg"><原创 2017-05-04 16:43:36 · 8189 阅读 · 6 评论 -
【京东商城首页实战10】添加通栏背景图片及布局技巧
上一解已经完成了京东页面的导航条和下拉列表，至此，京东首页上部分的公共部分已经做完了。首页特有部分今天开始做京东首页的轮播图。CSS代码要写在index.css文件里面了。效果样图如下：由于篇幅限制，本文就先说说如何添加可点击通栏背景及相应的页面布局技巧吧。需要完成的业务有以下几点：1.给添加通栏背景，点击背景可进入活动页面，所以背景由a标签包裹。2.重点：通栏背景及里面的内容的布局思路附上背原创 2017-05-04 14:06:09 · 4516 阅读 · 1 评论 -
【京东商城首页实战9】导航菜单栏和下拉列表
接下来开始做下面的部分，包括红色背景部分、导航菜单栏、右边的图片，如图： 图1分析：1.构架：全部商品分类是一个盒子、导航菜单是一个盒子，图片是一个盒子。 2.点击红色部分会出现下拉列表，从语义上讲它是定义列表。 3.导航菜单栏上有绿色小图标1.左边下拉列表上部分先做全部商品分类部分：HTML代码：<div class="jd-nav clearfix"><!--最外层盒子负责通栏，要清除浮原创 2017-05-03 21:19:05 · 11946 阅读 · 14 评论 -
【京东商城首页实战8】热词菜单
接下来，做topbanner下面大盒子的最后一个小元素——热词菜单。分析： 1.logo、搜素框、购物车已经占满了父亲盒子的宽度，所以热词菜单盒子需要左浮动，会自动掉落一行，靠近logo盒子右边。 2.每个文字都是链接，所以用a标签做就可以了。li标签一般用于比较大的导航菜单。HTML代码：<div class="hotwords"> <a href="#" class="col-red原创 2017-05-03 11:46:52 · 2368 阅读 · 4 评论 -
【京东商城首页实战7】制作购物车
今天开始做右边的购物车。要点分析： 1.构架：一个盒子里面有一个a标签和3个小元件，可用span标签里做。 2.小车图标，可以作为背景图片，通过定位在大盒子的左padding部分显示出来。 3.带数字的红色圆角图形，可以先做一个小正方形，利用boder-raduis做圆角。微型盒子，ie6不兼容，所以要叫上_font-size：0；。 4.箭头图标可以利用定位做，也可以margin或padd原创 2017-05-03 10:41:02 · 2627 阅读 · 1 评论 -
【京东商城首页实战6】制作搜索框
接下来做第二部分：搜索框，即图1蓝色边框部分。 图1HTML：<div class="search"> <input type="text" name="" id="" value="图书开抢"/> <button>搜索</button></div>css代码：.search { width: 538px; height: 35px; backgrou原创 2017-05-02 19:55:00 · 6015 阅读 · 2 评论 -
【京东商城首页实战5】给网页添加logo
下面，接着做topbanner下面的部分，如图： 图1 要点分析： 1.图中5个元素都在一个大盒子。 2.大盒子内容不通栏，要设置版心。 3.搜索框下面的推荐列表既可以跟搜索框同在一个盒子，也可以单独一个盒子。由于两者没有语义的关联，这里让它是个独立的盒子。logo和动图紧密连接，把他们归到一个盒子。所以这个大盒子可分为4个盒子来做。分析完之后就按照思路动手敲代码了。为了避免篇幅过长，看着原创 2017-05-02 18:57:33 · 4117 阅读 · 1 评论 -
【京东商城首页实战4】topbanner制作
接着做京东首页，上面已经做了导航条，接下来要做下面的部分，如图： 图1附上topbanner图片： 图2分析： 1.有一个通栏盒子，负责通栏背景，里面再有一个版心盒子，负责装内容。 2.topbanner图片不是个链接，所以可以直接插入图片。 3.关闭按钮可点击，是个a链接。当鼠标放到上面时，颜色改变。关闭按钮在盒子的右上角，用定位来做。1.插入图片和通栏背景HTML代码：<div cla原创 2017-05-02 15:53:56 · 3626 阅读 · 4 评论 -
【京东商城首页实战3】导航条制作（2）
下面做导航条右边部分。 图1分析： 1.用无序列表ul制作菜单导航条。 2.有些菜单后面有小三角标志 3.菜单之间有小竖线隔开。注意这里的小竖线高度不够，不能认为菜单的边框，它是一个微型盒子。1.导航菜单栏基本结构HTML代码： <div class="fr"> <!--右盒子--> <ul> <li> <a href="#">你好原创 2017-05-02 10:23:03 · 5540 阅读 · 10 评论 -
【京东商城首页实战2】导航条制作（1）
接下来，开始制作京东的导航条。效果如下图： 图1业务分析： 1.通栏盒子，并且有背景颜色 2.有版心。 3.版心里面包含左右浮动的两个盒子。 4.有下拉效果的盒子后面，有三角形标志。 5.右边的盒子里面包含几个li标签。分析完之后，对整个头部的构架和要实现的功能都有简单的了解，下面就是开始一步一步实现这些业务。1.制作一个通栏的盒子，并设置背景颜色。html代码：<body> <原创 2017-05-01 18:03:58 · 10317 阅读 · 8 评论 -
【京东商城首页实战1】建立站点及准备工作
京东首页静态页面实战首先建一个文件夹，里面包括：index.html文件、用来保存图片的images文件夹、样本图片。原创 2017-04-30 17:27:47 · 5936 阅读 · 8 评论