HTML+CSS網(wǎng)頁設(shè)計(jì)，小米熱評(píng)產(chǎn)品布局樣式

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

樣式效果圖：

小米熱評(píng)產(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)品，真心不錯(cuò)，最主要的是性價(jià)比高。附圖，給客服妹子一個(gè)大...</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>包裝很讓人感動(dòng)，式樣也很可愛，做出的飯全家人都愛吃，超愛五星！手機(jī)控制還是不太熟練，最主要是沒有連接...</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>非常好用，孩子使用防止沉迷于電話影響學(xué)習(xí)。做工很好，定位基本準(zhǔn)確，通話清晰。如果加入時(shí)間顯示就更完美...</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="#">小米隨身藍(lán)牙音箱</a><span>69元</span></h2>
<p>超級(jí)喜歡！小巧玲瓏！音質(zhì)完美！不知道為什么！只要是小米出的東西我都喜歡！那倒是因?yàn)槟且痪洌浚啃∶诪榘l(fā)...</p>
</div>
</div>
</div>
</div>
</div>

部分CSS代碼分析：

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

body{
 background: #f4f4f4;
}

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

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

使布局分成四個(gè)相等的寬度，各占百分之二十五，并往左浮動(dòng)：

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

給圖片定義一個(gè)高度和寬度：

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

然后給標(biāo)題和簡介定義字體大小和顏色，主意價(jià)格需要往右浮動(dòng)：

.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;
}

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

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

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

1）制作頁面所需知識(shí)點(diǎn)

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

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

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

2）代碼實(shí)操演練

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

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

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

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

、認(rèn)識(shí)WEB

網(wǎng)頁主要是由文字、圖像和超鏈接等元素構(gòu)成，除了這些基本的元素以外，還包含一些多媒體元素等，比如音頻、視頻等。

比如我們常見的有小米商城、京東商城、以及淘寶等，都屬于我們的大型的購物平臺(tái)網(wǎng)站，而這些網(wǎng)站都包含了網(wǎng)頁中基本的元素。那么網(wǎng)頁是怎么形成的呢？

其實(shí)網(wǎng)頁的形參很簡單，當(dāng)我們前端小姐姐將頁面通過代碼構(gòu)建好以后，再通過瀏覽器（IE、谷歌等瀏覽器）將其渲染成為用戶眼中所能看得到的各種樣式的頁面。

既然我們的網(wǎng)頁是通過瀏覽器的渲染而顯示不同的頁面，那么常見的瀏覽器有哪一些呢？如常見的五大瀏覽器，分別是IE、火狐、谷歌、Safari以及Opera等。

五大瀏覽器

但是在開發(fā)過程中，谷歌和火狐用得比較多，可以更好地幫助開發(fā)人員進(jìn)行調(diào)試。IE瀏覽器相對(duì)來說存在兼容性問題，所以很少去使用。

為什么網(wǎng)頁代碼通過瀏覽器的渲染就能顯示出各種不同的樣式的頁面呢？此處就不得不提到瀏覽器的內(nèi)核，通常瀏覽器的內(nèi)核分為如下幾種：

排版引擎
解釋引擎
渲染引擎

而五大瀏覽器之間的內(nèi)核都是什么呢？如下圖所示：

五大瀏覽器的內(nèi)核

二、Web標(biāo)準(zhǔn)

什么是Web標(biāo)準(zhǔn)？Web標(biāo)準(zhǔn)是由W3C組織和其它標(biāo)準(zhǔn)化組織，制定的一系列標(biāo)準(zhǔn)的集合。

W3C萬維網(wǎng)聯(lián)盟是國際最著名的標(biāo)準(zhǔn)化組織。他是1994年成立后，至今已發(fā)布了近百項(xiàng)相關(guān)萬維網(wǎng)的標(biāo)準(zhǔn)。

w3c組織

那為什么要制定Web標(biāo)準(zhǔn)呢？

作用：由于市場(chǎng)上誕生了許多不同類型的瀏覽器，而這些瀏覽器都存在不同的內(nèi)核，導(dǎo)致前端小姐姐開發(fā)的頁面在不同的瀏覽器上顯示會(huì)存在不同的差異，這樣就會(huì)給前端開發(fā)者帶來了許多麻煩。而通過Web標(biāo)準(zhǔn)就會(huì)降低這種頁面之間的差異化，讓瀏覽器在解析前端代碼的時(shí)候，轉(zhuǎn)向W3C的標(biāo)準(zhǔn)，呈現(xiàn)出統(tǒng)一的效果。

優(yōu)點(diǎn)：

遵循Web標(biāo)準(zhǔn)，讓頁面更標(biāo)準(zhǔn)統(tǒng)一。
同時(shí)讓W(xué)eb的發(fā)展變得越來越好。
內(nèi)容更容易被多種設(shè)備訪問。
還容易被搜索引擎搜索。
降低網(wǎng)站流量費(fèi)用和提高頁面的加載速度。
也讓頁面變得易維護(hù)。

那么一個(gè)漂亮的頁面是怎樣構(gòu)成的呢？它的構(gòu)成分別是如下幾種類型：

結(jié)構(gòu)（Structure）：通常在頁面中HTML就是一個(gè)頁面的結(jié)構(gòu)，好比剛孵出來的小鳥寶寶。
表現(xiàn)（Presentation）：通常在頁面中CSS就是對(duì)一個(gè)頁面進(jìn)行美化的，好比小鳥寶寶慢慢地長出了漂亮的羽毛。
行文（Behavior）：通常在頁面中會(huì)使用JavaScript（或JQuery）來完成行文，好比小鳥寶寶長大了，可以進(jìn)行飛行、捕食等。

漂亮頁面的構(gòu)成

好啦！[微笑]本節(jié)就分享到這兒哦！對(duì)前端感興趣的小伙伴，可以關(guān)注我的，我會(huì)繼續(xù)給大家分享前端以及其它開發(fā)內(nèi)容的知識(shí)，也歡迎大家給我在評(píng)論區(qū)留言[作揖]。

在線咨詢

上一篇：元素出現(xiàn)在視圖中時(shí)觸發(fā)的js
下一篇：初識(shí)HTML，什么是HTML?

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML+CSS網(wǎng)頁設(shè)計(jì)，小米熱評(píng)產(chǎn)品布局樣式

1）制作頁面所需知識(shí)點(diǎn)

2）代碼實(shí)操演練

您的項(xiàng)目需求