1.頁(yè)面結(jié)構(gòu)：

<div class="seckill-goods"><ul><li></li><li></li><li></li><li></li></ul></div> .seckill-goods li {width: 400px;height: 190px;background-color: #fff; }

在瀏覽器中的顯示效果！

?

1.1.

<div class="seckill-goods"><ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div>

?

.seckill-goods ul {border: 1px solid black; } .seckill-goods li {float: left;width: 400px;height: 190px;background-color: #fff; } /*為了實(shí)現(xiàn)效果自己加的樣式*/ .clearfix{overflow:auto;_height:1% }

在瀏覽器中的顯示效果！

1.2.顯示空出來(lái)的間隙

.seckill-goods li {float: left;width: 400px;height: 190px;background-color: #fff;/*border: 1px solid black;*//*顯示空出來(lái)的間隙,右 下 */margin-right: 13px;margin-bottom: 13px; }.clearfix{overflow:auto;_height:1% }

在瀏覽器中的顯示效果！?

1.2.1去邊框：

.seckill-goods ul {margin-right: -13px;/*border: 1px solid black;*/ } .seckill-goods li {float: left;width: 400px;height: 190px;background-color: #fff;/* border: 1px solid black;*//*顯示空出來(lái)的間隙,右 下 */margin-right: 13px;margin-bottom: 13px; }.clearfix{overflow:auto;_height:1% }

在瀏覽器中的顯示效果！?

2.做文字提示：

<div class="seckill-goods"><ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div><p>*小米閃購(gòu)活動(dòng)規(guī)則：小米閃購(gòu)商品不享受該商品在小米商城其它優(yōu)惠政策（包括但不限于優(yōu)惠券、贈(zèng)品、滿減等）<br>溫馨提示：因可能存在系統(tǒng)緩存、頁(yè)面更新導(dǎo)致價(jià)格變動(dòng)異常等不確定情況出現(xiàn)，如果您發(fā)現(xiàn)活動(dòng)商品價(jià)格或促銷(xiāo)商品有異常，請(qǐng)您立刻聯(lián)系小米客服，以便我們及時(shí)補(bǔ)正。</p>

在瀏覽器中的顯示效果！?

?

2.1.調(diào)整距離：

<ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div><p class="seckill-notice">*小米閃購(gòu)活動(dòng)規(guī)則：小米閃購(gòu)商品不享受該商品在小米商城其它優(yōu)惠政策（包括但不限于優(yōu)惠券、贈(zèng)品、滿減等）<br>溫馨提示：因可能存在系統(tǒng)緩存、頁(yè)面更新導(dǎo)致價(jià)格變動(dòng)異常等不確定情況出現(xiàn)，如果您發(fā)現(xiàn)活動(dòng)商品價(jià)格或促銷(xiāo)商品有異常，請(qǐng)您立刻聯(lián)系小米客服，以便我們及時(shí)補(bǔ)正。</p> .seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底邊的距離*/padding-bottom: 35px; } .clearfix{overflow:auto;_height:1%}

在瀏覽器中的顯示效果！?

3.框的樣式：

<div class="seckill-goods"><ul class="clearfix"><li><div class="bg"></div><div class="info"></div></li></ul></div> .seckill-goods .bg {float: left;width: 190px;height: 190px;border: 1px solid red; } .seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底邊的距離*/padding-bottom: 35px; }

在瀏覽器中的顯示效果！?

3.1.

.seckill-goods .bg {float: left;width: 190px;height: 190px;border: 1px solid red; } .seckill-goods .info {margin-left: 210px;width: 190px;height: 190px;border: 1px solid black; }

?在瀏覽器中的顯示效果！

總結(jié)

以上是生活随笔為你收集整理的xx闪购-商品列表布局设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。