| 京东快报汇集了特惠活动、促销活动,有的时候也会接受达人的投稿,今天开淘小编跟大家介绍一下这个版块的设置装修流程,其中还会分享一些方便操作的装修代码,赶紧去学习一下吧! 效果如图: 关于京东快报部分的构架分析: “京东快报”和“更多”在一个盒子里,“京东快报”是标题,“更多”可以点击。注意文字和盒子之间有间距。 HTML的京东店铺装修代码: /*右侧大盒子*/ /*京东快报盒子*/ /*上部盒子,包含标题和a链接*/ /*下面的列表盒子*/ [特惠]1元秒杀 [公告]母婴类APP【京东宝宝】上线 [特惠]美的品牌日 APP嗨购大放“价” [公告]京东深入蒙牛生产基地进行质检 [特惠]白条购家电 24期免息! 123456789101112131415161718192021 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标签里面左侧标题的样式*/ }12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 看到这里,大家就知道京东快报样式是怎么装修好的啦!希望你们的店铺会在众店铺更突出留住用户,让用户有更好的体验。还有什么不明白的地方,可以给小编留言咨询哦!更多精彩尽在开淘网~ 推荐阅读 京东手机店铺怎么装修? 京东店铺店招怎么装修? 2017京东微店装修规范最新版? 查看更多相似文章 |