【京东商城首页实战12】右侧：“京东快报”和“生活服务”

现在开始做右侧部分，效果图大致如下：

分析：

1.整个右侧属于一个大盒子，又分为上下两个盒子。上下盒子右再分为上下两个盒子。
2.特惠部分和红色图标部分都是用li标签做。

1.“京东快报”

之前已经布局了右侧的紫色大盒子，现在要去掉紫色的盒子的背景，在给加上1px的灰色实线边框。
关于京东快报部分的构架分析：
“京东快报”和“更多”在一个盒子里，“京东快报”是标题，“更多”可以点击。注意文字和盒子之间有间距。

HTML代码：

<div class="news">
/*右侧大盒子*/<div class="jd-news">/*京东快报盒子*/<div class="dt">/*京东快报上部盒子，包含标题和a链接*/<h3>京东快报</h3><a href="#">更多></a></div><div class="dd">/*下面的列表盒子*/<ul><li><a href="#"><span>[特惠]</span>1元秒杀</a></li><li><a href="#"><span>[公告]</span>母婴类APP【京东宝宝】上线</a></li><li><a href="#"><span>[特惠]</span>美的品牌日 APP嗨购大放“价”</a></li><li><a href="#"><span>[公告]</span>京东深入蒙牛生产基地进行质检</a></li><li><a href="#"><span>[特惠]</span>白条购家电 24期免息！</a></li></ul></div></div>
</div>

CSS代码：

.news {width: 248px;height: 451px;border: 1px solid #E4E4E4;float: right;margin-top: 12px;/*设置大盒子样式*/
}.jd-news {height: 200px;/*设置“京东快报”大盒子的高度和下边线*/border-bottom: 1px dashed #E4E4E4;  /*虚线*/
}
.jd-news .dt{height: 43px;/*设置“京东快报”大盒子上部小盒子的样式*/border-bottom: 1px dotted #E8E8E7; /*点线*/line-height: 43px;
}
.jd-news .dt h3 {
/*设置“京东快报”大盒子上部小盒子里面h3的样式*/float: left;/*“京东快报”几个字靠左，所以左浮动*/font: 14px/43px "microsoft yahei";color: #666;padding-left: 15px;/*挤开文字和边框的间距*/
}
.jd-news .dt a{
/*设置“更多”的样式，右浮动*/float: right;font: 13px/43px "宋体";margin-right:15px;/*挤开文字与右边框的间距*/
}
.jd-news .dd ul {padding: 8px 0 0 15px;/*挤开列表与边框的上和左间距*/
}
.jd-news .dd li {line-height: 28px;/*设置li的行高，使文字垂直居中*/
}
.jd-news .dd li span {font-weight: 700;margin-right: 5px;/*li标签里面左侧标题的样式*/
}

效果如图：

再做“生活服务”部分。

由样图可知，生活服务上部盒子跟“京东快报”很像，而且里面的字体和字号都一样，所以把两者可以共用这些样式。

构架分析：

附上精灵图：

生活服务版块html代码：

<div class="lifeservi"><div class="dt"><h3>生活服务</h3></div><div class="dd"><ul><li class="lifeservi-icon1"><a href="#"><i></i><span>话费</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>机票</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>彩票</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>游戏</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>话费</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>机票</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>彩票</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>游戏</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>话费</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>话费</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>话费</span></a></li><li class="lifeservi-icon1"><a href="#"><i></i><span>话费</span></a></li>              </ul>
</div>

CSS代码：

.jd-news .dt h3 ,.fw .dt h3{/*生活服务共用样式*/float: left;font: 14px/43px "microsoft yahei";color: #666;padding-left: 15px;
}
.fw ul li {width: 61px;height: 68px;/*设置li盒子的大小*/border: 1px solid #e4e4e4;/* 这里比较难理解。注意：li盒子的上边借用了上部分盒子的虚线下边框li盒子还可以借用右侧大盒子的左右和下边框。所以，只需要给li盒子设置下边框和右边框就可以满足需要。思路：先给每个li盒子4个边框，这样肯定有重合，只要再减去不需要的边框就可以了。*/border-top: 0;/*去除每个盒子的上边框*//**/float: left;margin-left: -1px;/*减去每个盒子的左边框*/
}
.fw ul li.fw-icon4,.fw ul li.fw-icon8,.fw ul li.fw-icon12{border-right:0;/*右边的边框多出1px，所以把位于右侧的盒子的右边框设置为0*/
}
.fw ul li a{display: block;width: 61px;/*height: 68px;*/padding-top: 42px;/*a盒子往下挤文字到合适的位置。把图片定位在padding里显示*/text-align: center;position: relative;/*i盒子的父亲相对定位*/
}
.fw li i{position: absolute;/*i盒子绝对定位*/top:12px;left:18px;width: 25px;height: 25px;background: url(../images/icon_lifeserv.png) no-repeat right top;/*添加背景图片，所以的i都一样的背景图片*/
}
.fw-icon2 a i{background-position: right -25px;/*通过修改坐标，来修改图片*/
}
.fw-icon3 a i{background-position: right -50px;
}
.fw-icon4 a i{background-position: right -75px;
}
.fw-icon5 a i{background-position: right -100px;
}
.fw-icon6 a i{background-position: right -125px;
}
.fw-icon7 a i{background-position: right -150px;
}
.fw-icon8 a i{background-position: right -175px;
}
.fw-icon9 a i{background-position: right -200px;
}
.fw-icon10 a i{background-position: right -225px;
}
.fw-icon11 a i{background-position: right -250px;
}
.fw-icon12 a i{background-position: right -275px;
}
.fw .song{background: url(../images/song.png) no-repeat right top;/* 设置绿色图标的类*/
}

效果如图：

好了，右侧部分已经完工啦！欢迎指正！谢谢！

【京东商城首页实战12】右侧：“京东快报”和“生活服务”相关推荐

【京东商城首页实战2】导航条制作（1）
接下来,开始制作京东的导航条.效果如下图: 图1 业务分析: 1.通栏盒子,并且有背景颜色 2.有版心. 3.版心里面包含左右浮动的两个盒子. 4.有下拉效果的盒子后面,有三角形标志. 5.右边的盒子 ...
【京东商城首页实战9】导航菜单栏和下拉列表
接下来开始做下面的部分,包括红色背景部分.导航菜单栏.右边的图片,如图: 图1 分析: 1.构架:全部商品分类是一个盒子.导航菜单是一个盒子,图片是一个盒子. 2.点击红色部分会出现下拉列表,从语义上 ...
【京东商城首页实战3】导航条制作（2）
下面做导航条右边部分. 图1 分析: 1.用无序列表ul制作菜单导航条. 2.有些菜单后面有小三角标志 3.菜单之间有小竖线隔开.注意这里的小竖线高度不够,不能认为菜单的边框,它是一个微型盒子. 1. ...
京东商城项目实战（1）------京东商城首页
项目实战:京东商城(1)----京东商城首页京东商城(2)----京东商城登录页面京东商城(3)----京东商城注册页面效果图: 首页源代码(如需页面其余源码请在下方评论留言): <!DO ...
京东商城项目实战（2）------京东商城登录页面
项目实战:京东商城(1)----京东商城首页京东商城(2)----京东商城登录页面京东商城(3)----京东商城注册页面效果图: 点击账户登录的效果: 源代码(如需其余源码,请在下方评论留言): ...
京东商城项目实战（3）------京东商城注册页面
项目实战:京东商城(1)----京东商城首页京东商城(2)----京东商城登录页面京东商城(3)----京东商城注册页面网页效果: 网页源代码(入需其他源代码,请在评论下方留言): <!D ...
html5怎么做京东表格,HTML+CSS+PS 编写京东商城首页
仅供学习,转载请注明出处需求前面铺垫写了不少HTML.CSS.Photoshop的文章,那么本篇章就是要结合起来挑战写写京东的商城首页了. 好了,本次的目标就是实现这样的大概页面,让我们一步步来开 ...
HTML+CSS+PS 编写京东商城首页
仅供学习,转载请注明出处需求前面铺垫写了不少HTML.CSS.Photoshop的文章,那么本篇章就是要结合起来挑战写写京东的商城首页了. 好了,本次的目标就是实现这样的大概页面,让我们一步步来开 ...
React-Native-版高仿淘宝、京东商城首页、商品分类页面，android快速开发框架
滚动条监听事件 @param event */ onScrollFunc = (event) => { // 将滚动的值绑定到渐变动画 Animated.event([{nativeEvent: ...

【京东商城首页实战12】右侧：“京东快报”和“生活服务”

1.“京东快报”

【京东商城首页实战12】右侧：“京东快报”和“生活服务”相关推荐

最新文章

热门文章