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