家好，本篇文章分享小米商城热评产品板块的基础布局样式设计，这种样式设计通常用于商城网站首页产品热门评论或者产品简介的布局，可以更好的突出产品的价格和基本详情。

样式效果图：

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>外形简洁大方，大爱小米！全家人都在用小米的产品，真心不错，最主要的是性价比高。附图，给客服妹子一个大...</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>超级喜欢！小巧玲珑！音质完美！不知道为什么！只要是小米出的东西我都喜欢！那倒是因为那一句？？小米为发...</p>
</div>
</div>
</div>
</div>
</div>

部分CSS代码分析：

首先我们给网页定义一个灰色背景：

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来模仿制作小米官方网站右侧的浮动框。我们来看下边的这个浮动框，位于小米官网的右侧并且随着页面的滚动，一直浮动在右侧不变；

我们通过上边的图片可以看出图片有5个单独的块元素组成，每个块元素鼠标经过都有一个单独的颜色变为黄色的效果，然后第一个块元素鼠标经过还会在左侧弹出更多内容。接下来我们简单说一下制作所用到的核心知识。

1）制作页面所需知识点

1、列表标签（dl dd dt）的使用，使用dl和dd来完成前边5个相同模块的制作

2、鼠标经过（hover）的使用，第一个元素鼠标经过左侧显示，这个跟我们之前将的导航菜单类似，还有鼠标经过文字以及图片改变颜色，这里可以使用hover之后改变背景图片来实现；

3、浮动（fixed）的使用，该内容一直浮动在网页右侧，跟随页面一起滚动，我们可以使用position:fixed来实现；

2）代码实操演练

大体了解了我们所要使用的知识点之后，我们就可以开始根据图片上的内容来制作我们所需要的页面了，具体的实现代码就如下方所示：（首先写一个div盒子，看到列表形式，直接使用dl和dd，然后每个元素内部有文字和图片，使用h4标签和span标签来存放图片和文字内容，就这么搞定了哈哈），来看代码吧。

html代码挺简单的，我们啪啪敲完之后呢，剩下的就是书写css代码，来完成图片所示的布局样式的制作了。那么我们的css代码就如下图所示：（最外层box直接来个fixed和right、bottom配合，让其浮动在右侧，然后写写dl和dd的宽高，控制控制span的背景，随便写写hover事件，ok完成了）。不多说了，看代码吧。

好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信【网站源码】即可。

每日金句：只有知道别人心里在想什么，你才能得到你想要的。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。