HTML的布局的小秘密

一． 頭部與輪播

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

輪播：不但要自動(dòng)輪動(dòng)，而且當(dāng)鼠標(biāo)移入，滾動(dòng)就停止，右下角也要有五個(gè)小點(diǎn)選擇，左右也要

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

圖1 頭部 以及 輪播

圖1 輪播代碼

• 1

點(diǎn)擊 圖1中的頭部中Select Region 彈出遮罩層

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

• 1

二． 中間?
圖二 商品

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

功能：每一張圖片點(diǎn)擊都要有跳到相應(yīng)的頁面，鼠標(biāo)移入時(shí)，要有一個(gè)動(dòng)漫效果。

圖二 html的代碼

• 1

三. 尾部

圖三 信息相關(guān)

圖三 布置代碼

• 1

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

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

四、 開發(fā)總結(jié)

圖1

圖1代碼

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。