整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML+CSS網(wǎng)頁設計,小米熱評產(chǎn)品布局樣式

          家好,本篇文章分享小米商城熱評產(chǎn)品板塊的基礎布局樣式設計,這種樣式設計通常用于商城網(wǎng)站首頁產(chǎn)品熱門評論或者產(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)站源碼】即可。

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

          、認識WEB

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

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

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

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

          五大瀏覽器

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

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

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

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

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

          二、Web標準

          什么是Web標準?Web標準是由W3C組織和其它標準化組織,制定的一系列標準的集合。

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

          w3c組織

          那為什么要制定Web標準呢?

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

          優(yōu)點:

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

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

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

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

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


          主站蜘蛛池模板: 91视频国产一区| 久久一本一区二区三区| 内射一区二区精品视频在线观看| 果冻传媒一区二区天美传媒| 波多野结衣一区视频在线| 国产成人精品无码一区二区三区 | 午夜福利一区二区三区高清视频| 精品视频在线观看一区二区三区| 全国精品一区二区在线观看 | 极品少妇伦理一区二区| 亚洲国产系列一区二区三区 | 亚洲色婷婷一区二区三区| 一区二区三区四区在线播放| 国产一区二区三区亚洲综合| 国产精品99精品一区二区三区| 亚洲熟妇AV一区二区三区浪潮| 麻豆AV一区二区三区| 麻豆AV一区二区三区| 日韩精品一区二区三区色欲AV| 精品亚洲综合在线第一区| 国产在线一区二区三区| 国模精品一区二区三区| 国产综合精品一区二区三区| 夜夜嗨AV一区二区三区| 国产精品无码一区二区三区电影 | 亚洲AV无码一区二区三区系列 | 麻豆果冻传媒2021精品传媒一区下载| 午夜福利一区二区三区在线观看 | 在线精品一区二区三区电影| 国产未成女一区二区三区| 成人免费一区二区三区在线观看| 国产成人欧美一区二区三区 | jizz免费一区二区三区| 久久久人妻精品无码一区| 国产亚洲日韩一区二区三区| 久久精品免费一区二区三区| 精品人妻AV一区二区三区| 国产精品第一区揄拍无码| 久夜色精品国产一区二区三区| 色狠狠一区二区三区香蕉蜜桃| 无码人妻精品一区二区三|