HTML的布局的小秘密

一． 頭部與輪播

頭部頁面整潔，各個功能部分要求不能靜態(tài)，其中頭部中的首頁、華為官網等等文字，當鼠標移入就要字體顏色發(fā)生變化，而且搜索欄當鼠標點擊，文字要自動消失。

輪播：不但要自動輪動，而且當鼠標移入，滾動就停止，右下角也要有五個小點選擇，左右也要

上下按鈕，滿足上下切換，頁面的切換。

圖1 頭部 以及 輪播

圖1 輪播代碼

• 1

點擊 圖1中的頭部中Select Region 彈出遮罩層

當彈出遮罩層后，中間有一個白色文本框，文本框里面可以選擇各種選擇，而且鼠標移入選擇項中也需要發(fā)生顏色的變化，作為顯示給用戶當前的鼠標位置，讓人看起舒服而清晰。

• 1

二． 中間?
圖二 商品

中間作為商品信息，一張圖片內不止要求可以顯示價格的提示，而且也要簡單描述功能的提示，每一張圖也是有聯(lián)系的，位置與空隙要保持優(yōu)美的一致。

功能：每一張圖片點擊都要有跳到相應的頁面，鼠標移入時，要有一個動漫效果。

圖二 html的代碼

• 1

三. 尾部

圖三 信息相關

圖三 布置代碼

• 1

尾部不止要求排布一目了然 ，而且可以用來顯示相關服務信息，和相關合作信息,和客服詢問等等…

每一個文字都跳轉鏈接與鼠標移入可以出現(xiàn)顏色發(fā)生變化。

四、 開發(fā)總結

圖1

圖1代碼

第一次代碼都是靠自己打的，我發(fā)現(xiàn)原來每一個項目之中的每一部分，可以多種代碼方式來實現(xiàn)的，這無疑提高了我的實現(xiàn)每一個代碼功能探索，比如圖1中的五段文字要有高亮效果以及下劃線高亮效果，首先我用的是js方式來實現(xiàn)，但是才發(fā)現(xiàn)下劃線不可完美的實現(xiàn)效果，下劃線的大小不好，文字與下劃線距離不好，從而我想到用hover偽類實現(xiàn)這一效果，如圖1代碼：一開始我把每一個文字用span標簽來，每一個span標簽外面我都要用一個p標簽來包裹著，為什么我要如此布局呢？因為這樣方便我五個中只有后三個才有高亮效果的功能，雖然復雜，但是也讓我對每一層代碼布局的深入認識的了解哦。
用另外一種代碼方式來做同一種的功能也不錯哦！我覺得可以探索每一種代碼實現(xiàn)方式，加深的了解，整體來我學習到了布局的多種方式。

總結

以上是生活随笔為你收集整理的HTML的布局的小秘密的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。