京東快報(bào)匯集了特惠活動(dòng)、促銷活動(dòng)，有的時(shí)候也會(huì)接受達(dá)人的投稿，今天開(kāi)淘小編跟大家介紹一下這個(gè)版塊的設(shè)置裝修流程，其中還會(huì)分享一些方便操作的裝修代碼，趕緊去學(xué)習(xí)一下吧!

　　效果如圖：

　　關(guān)于京東快報(bào)部分的構(gòu)架分析：

　　“京東快報(bào)”和“更多”在一個(gè)盒子里，“京東快報(bào)”是標(biāo)題，“更多”可以點(diǎn)擊。注意文字和盒子之間有間距。

　　HTML的京東店鋪裝修代碼：

　　/*右側(cè)大盒子*/

　　/*京東快報(bào)盒子*/

　　/*上部盒子，包含標(biāo)題和a鏈接*/

　　/*下面的列表盒子*/

　　[特惠]1元秒殺

　　[公告]母嬰類APP【京東寶寶】上線

　　[特惠]美的品牌日 APP嗨購(gòu)大放“價(jià)”

　　[公告]京東深入蒙牛生產(chǎn)基地進(jìn)行質(zhì)檢

　　[特惠]白條購(gòu)家電 24期免息!

　　123456789101112131415161718192021

　　CSS代碼：

　　.news {

　　width: 248px;

　　height: 451px;

　　border: 1px solid #E4E4E4;

　　float: right;

　　margin-top: 12px;

　　/*設(shè)置大盒子樣式*/

　　}

　　.jd-news {

　　height: 200px;

　　/*設(shè)置大盒子的高度和下邊線*/

　　border-bottom: 1px dashed #E4E4E4; /*虛線*/

　　}

　　.jd-news .dt{

　　height: 43px;

　　/*設(shè)置大盒子上部小盒子的樣式*/

　　border-bottom: 1px dotted #E8E8E7; /*點(diǎn)線*/

　　line-height: 43px;

　　}

　　.jd-news .dt h3 {

　　/*設(shè)置大盒子上部小盒子里面h3的樣式*/

　　float: left;

　　/*“京東快報(bào)”幾個(gè)字靠左，所以左浮動(dòng)*/

　　font: 14px/43px "microsoft yahei";

　　color: #666;

　　padding-left: 15px;

　　/*擠開(kāi)文字和邊框的間距*/

　　}

　　.jd-news .dt a{

　　/*設(shè)置“更多”的樣式，右浮動(dòng)*/

　　float: right;

　　font: 13px/43px "宋體";

　　margin-right:15px;

　　/*擠開(kāi)文字與右邊框的間距*/

　　}

　　.jd-news .dd ul {

　　padding: 8px 0 0 15px;

　　/*擠開(kāi)列表與邊框的上和左間距*/

　　}

　　.jd-news .dd li {

　　line-height: 28px;

　　/*設(shè)置li的行高，使文字垂直居中*/

　　}

　　.jd-news .dd li span {

　　font-weight: 700;

　　margin-right: 5px;

　　/*li標(biāo)簽里面左側(cè)標(biāo)題的樣式*/

　　}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

　　看到這里，大家就知道京東快報(bào)樣式是怎么裝修好的啦!希望你們的店鋪會(huì)在眾店鋪更突出留住用戶，讓用戶有更好的體驗(yàn)。還有什么不明白的地方，可以給小編留言咨詢哦!更多精彩盡在~

　　推薦閱讀

　　京東手機(jī)店鋪怎么裝修?

　　京東店鋪店招怎么裝修？

　　2017京東微店裝修規(guī)范最新版?