家好，本篇文章分享小米商城熱評產(chǎn)品板塊的基礎布局樣式設計，這種樣式設計通常用于商城網(wǎng)站首頁產(chǎn)品熱門評論或者產(chǎn)品簡介的布局，可以更好的突出產(chǎn)品的價格和基本詳情。

樣式效果圖：

HTML代碼：

<div class="tpt-a">
<div class="tpt-wp">
<div class="tpt-md-4">
<div class="a">
<div class="b">
<a href="#"><img src="1.jpg"></a>
</div>
<div class="c">
<h2><a href="#">米家車載空氣凈化器</a><span>449元</span></h2>
<p>外形簡潔大方，大愛小米！全家人都在用小米的產(chǎn)品，真心不錯，最主要的是性價比高。附圖，給客服妹子一個大...</p>
</div>
</div>
</div>
<div class="tpt-md-4">
<div class="a">
<div class="b">
<a href="#"><img src="2.jpg"></a>
</div>
<div class="c">
<h2><a href="#">米家壓力IH電飯煲</a><span>999元</span></h2>
<p>包裝很讓人感動，式樣也很可愛，做出的飯全家人都愛吃，超愛五星！手機控制還是不太熟練，最主要是沒有連接...</p>
</div>
</div>
</div>
<div class="tpt-md-4">
<div class="a">
<div class="b">
<a href="#"><img src="3.jpg"></a>
</div>
<div class="c">
<h2><a href="#">米兔定位電話</a><span>169元</span></h2>
<p>非常好用，孩子使用防止沉迷于電話影響學習。做工很好，定位基本準確，通話清晰。如果加入時間顯示就更完美...</p>
</div>
</div>
</div>
<div class="tpt-md-4">
<div class="a">
<div class="b">
<a href="#"><img src="4.jpg"></a>
</div>
<div class="c">
<h2><a href="#">小米隨身藍牙音箱</a><span>69元</span></h2>
<p>超級喜歡！小巧玲瓏！音質(zhì)完美！不知道為什么！只要是小米出的東西我都喜歡！那倒是因為那一句？？小米為發(fā)...</p>
</div>
</div>
</div>
</div>
</div>

部分CSS代碼分析：

首先我們給網(wǎng)頁定義一個灰色背景：

body{
 background: #f4f4f4;
}

定義整個布局的寬度為1200像素，并居中顯示：

.tpt-wp {
 margin: 0 auto;
 width: 1200px;
}

使布局分成四個相等的寬度，各占百分之二十五，并往左浮動：

.tpt-md-4 {
 width: 25%;
	float: left;
}

給圖片定義一個高度和寬度：

.tpt-a .b img {
 width: 100%;
 height: 220px;
}

然后給標題和簡介定義字體大小和顏色，主意價格需要往右浮動：

.tpt-a .c h2{
 height: 24px;
 line-height: 24px;
	font-size: 14px;
}
.tpt-a .c h2 a {
 color: #333;
}
.tpt-a .c h2 span {
 color: #FF5722;
	float: right;
}
.tpt-a .c p {
 color: #666;
 font-size: 14px;
 line-height: 24px;
 padding: 10px 0 0 0;
}

基本的代碼設計就是這些，也歡迎大家留言分享一下其他的布局方式，點擊下面了解更多獲取全部HTML+CSS代碼。

篇文章主要給大家介紹一下使用html+css來模仿制作小米官方網(wǎng)站右側(cè)的浮動框。我們來看下邊的這個浮動框，位于小米官網(wǎng)的右側(cè)并且隨著頁面的滾動，一直浮動在右側(cè)不變；

我們通過上邊的圖片可以看出圖片有5個單獨的塊元素組成，每個塊元素鼠標經(jīng)過都有一個單獨的顏色變?yōu)辄S色的效果，然后第一個塊元素鼠標經(jīng)過還會在左側(cè)彈出更多內(nèi)容。接下來我們簡單說一下制作所用到的核心知識。

1）制作頁面所需知識點

1、列表標簽（dl dd dt）的使用，使用dl和dd來完成前邊5個相同模塊的制作

2、鼠標經(jīng)過（hover）的使用，第一個元素鼠標經(jīng)過左側(cè)顯示，這個跟我們之前將的導航菜單類似，還有鼠標經(jīng)過文字以及圖片改變顏色，這里可以使用hover之后改變背景圖片來實現(xiàn)；

3、浮動（fixed）的使用，該內(nèi)容一直浮動在網(wǎng)頁右側(cè)，跟隨頁面一起滾動，我們可以使用position:fixed來實現(xiàn)；

2）代碼實操演練

大體了解了我們所要使用的知識點之后，我們就可以開始根據(jù)圖片上的內(nèi)容來制作我們所需要的頁面了，具體的實現(xiàn)代碼就如下方所示：（首先寫一個div盒子，看到列表形式，直接使用dl和dd，然后每個元素內(nèi)部有文字和圖片，使用h4標簽和span標簽來存放圖片和文字內(nèi)容，就這么搞定了哈哈），來看代碼吧。

html代碼挺簡單的，我們啪啪敲完之后呢，剩下的就是書寫css代碼，來完成圖片所示的布局樣式的制作了。那么我們的css代碼就如下圖所示：（最外層box直接來個fixed和right、bottom配合，讓其浮動在右側(cè)，然后寫寫dl和dd的寬高，控制控制span的背景，隨便寫寫hover事件，ok完成了）。不多說了，看代碼吧。

好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信【網(wǎng)站源碼】即可。

每日金句：只有知道別人心里在想什么，你才能得到你想要的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。