摘要:主體內(nèi)容區(qū)域小米首頁(yè)下小米商城的主題內(nèi)容區(qū)域,也是整體網(wǎng)頁(yè)面積最廣的區(qū)塊實(shí)在不知道定主體內(nèi)容區(qū)塊時(shí)也可以根據(jù)面積比重來(lái)劃分,最大的那塊一定是主題中心,布局的重復(fù)性很高。
單就深入了解布局規(guī)范都足夠說(shuō)上一個(gè)月的,今天我就不論大范圍,挑選小米網(wǎng)站首頁(yè)的部分區(qū)塊布局來(lái)講解吧!
下面是小米官網(wǎng)的首頁(yè),很多人一看到這樣的網(wǎng)頁(yè)就傻眼,不知道咋弄,要么就隨性布局,要么就干看著,其實(shí)遇到問(wèn)題首先一點(diǎn)就是不要慌,先分析,將你認(rèn)為難的問(wèn)題拆分成多個(gè)問(wèn)題區(qū)塊,還解決不了就再拆分,直到變成能解決的小問(wèn)題,一個(gè)個(gè)解決那些小問(wèn)題最終大問(wèn)題也就搞定了。咱們布局網(wǎng)頁(yè)前也是一樣套路,先分析整體的架構(gòu),畫(huà)出布局圖將大塊拆分為小塊,這樣會(huì)更加直觀看到網(wǎng)頁(yè)的布局結(jié)構(gòu)。我大致上用線框?qū)⒕W(wǎng)頁(yè)內(nèi)容劃分為四個(gè)區(qū)塊:頂部導(dǎo)航條區(qū)域topnav(藍(lán)色線框)、頭部分類(lèi)導(dǎo)航區(qū)域header(綠色線框),主體內(nèi)容區(qū)域main(紫色線框)、網(wǎng)頁(yè)底部信息區(qū)域foot(橘色線框)。
(注意:在初學(xué)不知道如何布局時(shí)建議使用畫(huà)圖工具做輔助分析。且并非只有這一種區(qū)塊劃分方式,布局有很多種,我只從其中挑一種來(lái)寫(xiě),講不完=_=||)
這里我是按照整體網(wǎng)頁(yè)的內(nèi)容進(jìn)行區(qū)塊劃分的:(每個(gè)線框都為一個(gè)標(biāo)簽盒子)
topnav(頂部導(dǎo)航區(qū)域):從整體布局來(lái)看,topnav展示的內(nèi)容都是小米網(wǎng)站下所有類(lèi)別的子產(chǎn)品導(dǎo)航,而小米網(wǎng)站的首頁(yè)主題是商城(直接展示電子類(lèi)產(chǎn)品),它跟主題不符,所以這塊區(qū)域多帶帶劃分出來(lái)。整體區(qū)塊使用nav標(biāo)簽,考慮兼容性的話就使用div標(biāo)簽。
header(頭部分類(lèi)信息導(dǎo)航區(qū)域):這塊區(qū)域主要包含不同商品的分類(lèi)導(dǎo)航和其他的服務(wù)導(dǎo)航,和主題也不太相符。輪播和輪播下方圖片因?yàn)槲恢迷?,打開(kāi)該網(wǎng)頁(yè)第一眼看見(jiàn)的就是這部分區(qū)塊,即便其中也包含商品,但更多的是具有廣告位的性質(zhì),這里就多帶帶劃分出header區(qū)塊。整體區(qū)塊使用header標(biāo)簽,考慮兼容性的話就使用div標(biāo)簽。
main(主體內(nèi)容區(qū)域):小米首頁(yè)下小米商城的主題內(nèi)容區(qū)域,也是整體網(wǎng)頁(yè)面積最廣的區(qū)塊(實(shí)在不知道定主體內(nèi)容區(qū)塊時(shí)也可以根據(jù)面積比重來(lái)劃分,最大的那塊一定是主題中心),布局的重復(fù)性很高。整體區(qū)塊使用main標(biāo)簽,考慮兼容性的話就使用div標(biāo)簽。
footer(網(wǎng)頁(yè)底部信息區(qū)域):這部分幾乎沒(méi)啥好說(shuō)的,展示的都是網(wǎng)站特色、網(wǎng)站信息,也多帶帶劃分一個(gè)塊。整體區(qū)塊使用footer標(biāo)簽,考慮兼容性的話就使用div標(biāo)簽。
代碼如下:(考慮兼容IE)
這樣咱們就將網(wǎng)頁(yè)劃分為四大塊了,看起來(lái)難度是不是比之前要小一點(diǎn)了呢?那下一步就是將各個(gè)區(qū)塊看做單個(gè)的整體,對(duì)它進(jìn)行分析再拆分。
topnav布局分析紅色線框:頂部導(dǎo)航欄區(qū)域()
黃色線框:內(nèi)容盒子
藍(lán)綠色線框:左右兩塊列表區(qū)域
如下布局圖所示,頂部導(dǎo)航欄區(qū)域中,內(nèi)容盒子寬度在1226px,水平居中,其內(nèi)部又分為左右兩塊列表區(qū)域和一個(gè)div盒子(購(gòu)物車(chē)),都包含著文字鏈接。
對(duì)應(yīng)標(biāo)簽結(jié)構(gòu)代碼:
標(biāo)簽搭建好結(jié)構(gòu)還需要搭配css來(lái)使用,這里順便把相關(guān)的css技巧我也講幾個(gè)
.container(黃色線框)本身就是一個(gè)塊級(jí)元素,不改變?cè)仡?lèi)型的前提下實(shí)現(xiàn)水平居中有以下幾種方式:
第一種:(當(dāng)前場(chǎng)景下推薦使用這種居中方式)
page-topnav .container{
width:1226px; margin:0 auto;
}
使用margin:auto實(shí)現(xiàn)自動(dòng)計(jì)算達(dá)到水平居中,注意這種居中方式作用對(duì)象必須是塊級(jí)標(biāo)簽,且有固定的寬度才可以實(shí)現(xiàn)
第二種:
page-topnav .container{
position: relative; left: 50%; width: 1226px; margin-left: -613px;
}
使用相對(duì)定位,通過(guò)設(shè)置left讓.container向右移動(dòng)50%的相對(duì)距離,再利用負(fù)左外邊距向左移動(dòng)自身寬度的一半距離,達(dá)到水平居中的效果。參考下圖:
兩個(gè)左右ul分別添加左浮動(dòng)float:left;和右浮動(dòng)float:right;就能實(shí)現(xiàn)左右對(duì)齊
li中的文本實(shí)現(xiàn)水平垂直居中的幾種方式:
第一種:
.container .topbar li{
height: 40px; /*盒子高度*/ line-height: 40px; /*行高*/ font-size: 14px; /*文字大小*/ text-align: center; /*盒子內(nèi)的文本水平居中*/
}
將文本的行高與li盒子高度設(shè)為一致,達(dá)到文本垂直居中效果。
第二種:
.container .topbar li{
padding: 10px;
}
給li添加內(nèi)邊距,實(shí)現(xiàn)文本上下左右居中效果,但會(huì)造成li高度不固定。所以當(dāng)前場(chǎng)景下推薦第一種方式
--------臨時(shí)有事,明天接著補(bǔ),如果對(duì)文章有疑問(wèn)或基礎(chǔ)學(xué)習(xí)上有問(wèn)題可以和我交流----
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/53831.html
摘要:主體內(nèi)容區(qū)域小米首頁(yè)下小米商城的主題內(nèi)容區(qū)域,也是整體網(wǎng)頁(yè)面積最廣的區(qū)塊實(shí)在不知道定主體內(nèi)容區(qū)塊時(shí)也可以根據(jù)面積比重來(lái)劃分,最大的那塊一定是主題中心,布局的重復(fù)性很高。 單就深入了解布局規(guī)范都足夠說(shuō)上一個(gè)月的,今天我就不論大范圍,挑選小米網(wǎng)站首頁(yè)的部分區(qū)塊布局來(lái)講解吧! 下面是小米官網(wǎng)的首頁(yè),很多人一看到這樣的網(wǎng)頁(yè)就傻眼,不知道咋弄,要么就隨性布局,要么就干看著,其實(shí)遇到問(wèn)題首先一點(diǎn)就...
摘要:本周于上海閉幕,掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答,但會(huì)議的視頻目前都還沒(méi)放出來(lái),有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國(guó)外美女。 CSS 樣式書(shū)寫(xiě)規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書(shū)寫(xiě)規(guī)范,可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答,但會(huì)議的視頻目前都還沒(méi)放出來(lái),有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國(guó)外美女。 CSS 樣式書(shū)寫(xiě)規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書(shū)寫(xiě)規(guī)范,可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答,但會(huì)議的視頻目前都還沒(méi)放出來(lái),有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國(guó)外美女。 CSS 樣式書(shū)寫(xiě)規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書(shū)寫(xiě)規(guī)范,可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:我們都知道您是國(guó)內(nèi)知名的專(zhuān)家,是什么樣的情結(jié)使得您愿意將魔法作為自己的別名大家好,很榮幸接受圖靈的專(zhuān)訪。在這一堆書(shū)里,有一套上下冊(cè)教程叫作談是由圖靈引進(jìn)的哦。從偶像那里得來(lái)一個(gè)名字,很榮幸而且這其中也有圖靈的功勞,也是緣份。 非商業(yè)轉(zhuǎn)載請(qǐng)注明作譯者、出處,并保留本文的原始鏈接:http://www.ituring.com.cn/article/216538 showImg(https:...
閱讀 3605·2021-11-23 09:51
閱讀 2812·2021-11-23 09:51
閱讀 688·2021-10-11 10:59
閱讀 1685·2021-09-08 10:43
閱讀 3238·2021-09-08 09:36
閱讀 3299·2021-09-03 10:30
閱讀 3306·2021-08-21 14:08
閱讀 2212·2021-08-05 09:59