網(wǎng)頁(yè)布局的常見(jiàn)8種類型

網(wǎng)頁(yè)布局的常見(jiàn)8種類型

1、卡片式布局

卡片式布局分為兩種，一種是每個(gè)卡片的尺寸都相同，排列整齊標(biāo)準(zhǔn)。一種是不同尺寸的卡片，卡片的排列沒(méi)有固定的排序。這兩種手法都很適合有大量?jī)?nèi)容需要展示的網(wǎng)頁(yè)。

應(yīng)用：新聞網(wǎng)站、博客類網(wǎng)站。

2、分屏布局

分屏布局是一種比較流行的布局手法，圖片和文字都一樣重要的時(shí)候，就可以選擇分屏布局。左邊可以是文字，右邊為圖片或者左邊為文字，右邊為圖片的布局手法，十分的簡(jiǎn)單好學(xué)!

應(yīng)用：電子商務(wù)網(wǎng)站。

3、純文字布局

純文字的布局沒(méi)有了圖片的輔助元素，整個(gè)網(wǎng)頁(yè)只有文字，我們可以將主要的文字進(jìn)行放大，大標(biāo)題來(lái)使用。其他文字作為輔助元素也可以是裝飾元素。純文字的布局就充滿了可讀性，并且有強(qiáng)大的視覺(jué)沖擊力!

應(yīng)用：極簡(jiǎn)風(fēng)格的主頁(yè)。

4、個(gè)性化推薦布局

個(gè)性化推薦布局就需要根據(jù)用戶的喜好來(lái)量身定制網(wǎng)頁(yè)的布局了，現(xiàn)在人工智能的發(fā)展，我們能根據(jù)用戶之前的訂閱習(xí)慣，來(lái)設(shè)計(jì)網(wǎng)頁(yè)布局，推薦出他們喜愛(ài)的網(wǎng)頁(yè)效果。精確的分析用戶的喜好，滿足用戶的需求。

應(yīng)用：訂閱類產(chǎn)品網(wǎng)頁(yè)。

5、網(wǎng)格式布局

如果有很多圖片，內(nèi)容細(xì)碎的網(wǎng)頁(yè)，可以選擇網(wǎng)格布局。網(wǎng)格布局可以使用不同大小網(wǎng)格來(lái)表達(dá)內(nèi)容，不同網(wǎng)格里所表達(dá)的內(nèi)容不同。網(wǎng)格會(huì)給人一種整齊的秩序感。網(wǎng)格設(shè)計(jì)可以提升整個(gè)網(wǎng)頁(yè)的整齊性，保持內(nèi)容的有序，并且很容易使用。

應(yīng)用：圖片，文字比較多的網(wǎng)站。

6、雜志版式布局

如果是每天都需要更新的網(wǎng)站，可以學(xué)習(xí)雜志和期刊的布局，運(yùn)用到網(wǎng)頁(yè)上。雜志版式的網(wǎng)頁(yè)布局就和我們平時(shí)看到的雜志上的布局一樣，根據(jù)種類的劃分，進(jìn)行排列。這樣的布局可以讓網(wǎng)頁(yè)是多樣化，也能讓用戶每天都有新鮮感!

應(yīng)用：內(nèi)容多，種類多的網(wǎng)站。

7、單頁(yè)布局

對(duì)于內(nèi)容稀疏的網(wǎng)站，單頁(yè)布局是一個(gè)很好的選擇。單頁(yè)布局是將網(wǎng)站中的所有的主要內(nèi)容放在一個(gè)網(wǎng)頁(yè)上，通過(guò)滾動(dòng)完成導(dǎo)航。單頁(yè)布局是內(nèi)容敘事的完美選擇，還可以使用視差滾動(dòng)的效果，讓畫面產(chǎn)生一種交互感，并且讓觀者沉浸在其中。

應(yīng)用：內(nèi)容稀疏，沉浸式敘事網(wǎng)站，交互式讀物。

8、F型布局

F型的布局是適合很多的頁(yè)面，有研究表明，用戶在瀏覽網(wǎng)頁(yè)的時(shí)候，會(huì)習(xí)慣于沿著F式的閱讀軌跡來(lái)瀏覽信息。從左到右的閱讀是用戶閱讀的習(xí)慣，用戶通過(guò)從左到右的閱讀然后向下閱讀，繼續(xù)從左到右。F型的布局有很明確的視覺(jué)層次結(jié)構(gòu)。

應(yīng)用：以文字為主，大部分網(wǎng)站都適用。

9、Z型布局

Z型布局是將用戶的視線吸引到頂部，遵循著從左到右的規(guī)律，用戶會(huì)從左到右，從上到下的習(xí)慣來(lái)進(jìn)行閱讀網(wǎng)頁(yè)，這樣的布局比較簡(jiǎn)單，合理的運(yùn)用從左到右看的規(guī)律，將元素合理整齊的排布好就行了。

應(yīng)用：以圖片為主的網(wǎng)站，大部分網(wǎng)站都適用。

網(wǎng)頁(yè)布局的三大核心

網(wǎng)頁(yè)布局三大核心：盒子模型、浮動(dòng)、定位

盒子有 m b p c

清除內(nèi)外邊距：

不同瀏覽器帶有默認(rèn)的內(nèi)外邊距，因此我們?cè)诓季智埃紫纫宄戮W(wǎng)頁(yè)元素的內(nèi)外邊距。

方式：

* {

padding：0;/*清除內(nèi)邊距*/

margin:0; /*清除外邊距*/

}

浮動(dòng)

1 首先了解把塊元素放在一行內(nèi)?

使用行內(nèi)塊元素會(huì)產(chǎn)生 空隙

2 如何實(shí)現(xiàn)兩個(gè)盒子左右對(duì)齊?

總結(jié)：有很多布局效果，標(biāo)準(zhǔn)流沒(méi)有辦法完成，此時(shí)利用浮動(dòng)完成布局

浮動(dòng)能改變標(biāo)簽的默認(rèn)排列方式

網(wǎng)頁(yè)布局準(zhǔn)則：

縱向排列-標(biāo)準(zhǔn)流;橫向排列-浮動(dòng)

語(yǔ)法：

選擇器 { float : 屬性值 ; }

浮動(dòng)會(huì)貼著浮動(dòng)

浮動(dòng)特性(重難點(diǎn))

1.浮動(dòng)的元素不再保留原先位置，(會(huì)像我們迎面撲來(lái))，原來(lái)的位置會(huì)被別的占有

2.如果都設(shè)置浮動(dòng)，則會(huì)以一行排列，直到位置不夠，才落到第二行

3.添加了浮動(dòng)都會(huì)有行內(nèi)塊元素的特點(diǎn)，不管什么元素

實(shí)際應(yīng)用：

浮動(dòng)元素經(jīng)常搭配父級(jí)標(biāo)準(zhǔn)流，目的是限制浮動(dòng)元素位置

先用標(biāo)準(zhǔn)流的父元素排列上下，之后內(nèi)部子元素采取浮動(dòng)排列左右

清除浮動(dòng)?

也不是真正意義上的清除，而是限制浮動(dòng)子元素

原因：

1 父元素不方便給高度(不知道子元素多少)

2 父元素高度設(shè)置為0的話，會(huì)被其他標(biāo)準(zhǔn)流父元素?cái)D上去

前提：前提是父盒子本身沒(méi)有高度，如果有高度就不用清除!!!

清除浮動(dòng)后，父級(jí)會(huì)根據(jù)浮動(dòng)的盒子自動(dòng)檢測(cè)高度

操作：給父級(jí)添加overflow屬性，值設(shè)置為hidden.

CSS定位

1 如果要實(shí)現(xiàn)某個(gè)元素可以自由的在一個(gè)盒子內(nèi)移動(dòng)位置，并且壓住其他盒子

這種情況下，使用標(biāo)準(zhǔn)流或浮動(dòng)能實(shí)現(xiàn)嗎?

2 實(shí)現(xiàn)某個(gè)盒子固定在屏幕

作用：

讓盒子自由在某個(gè)盒子內(nèi)移動(dòng)或者固定在屏幕某個(gè)位置

組成：

定位=定位模式+邊偏移

1)定位模式由CSS的position屬性來(lái)設(shè)置，4個(gè)值：

static 靜態(tài)定位,

靜態(tài)定位就是標(biāo)準(zhǔn)流，很少用

relative 相對(duì)定位,(自戀型)

1 相對(duì)自己原來(lái)的位置; 2 原來(lái)在標(biāo)準(zhǔn)流的位置繼續(xù)占有

例：position:relative;

top:100px;

最典型應(yīng)用就是給絕對(duì)定位當(dāng)?shù)?。?！?/p>

absolute 絕對(duì)定位,(拼爹型)

是相對(duì)它的祖先來(lái)說(shuō)的

語(yǔ)法：

選擇器 { position : absolute ;}

注意：

1 沒(méi)有父元素或父元素沒(méi)有定位，則以瀏覽器為準(zhǔn)

2 父元素有定位 ，則以父元素為準(zhǔn)。爺爺有定位爸爸沒(méi)定位，就以爺爺為準(zhǔn)

3 絕對(duì)定位不占有標(biāo)準(zhǔn)流位置，典型輪播圖

實(shí)際開(kāi)發(fā)中：子絕父相，絕對(duì)定位使用，父必須要有定位

fixed 固定定位

語(yǔ)法：

選擇器 { position : fixed; }

以瀏覽器可視窗口做為 參照點(diǎn)，固定定位也不占有標(biāo)準(zhǔn)流位置，是特殊的絕對(duì)定位

2)邊偏移就是盒子最終位置，4個(gè)屬性：

top,bottom,left,right

網(wǎng)頁(yè)設(shè)計(jì)類型有哪些

一、扁平化設(shè)計(jì)

扁平化設(shè)計(jì)設(shè)計(jì)能夠說(shuō)成當(dāng)下常見(jiàn)的網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)設(shè)計(jì)風(fēng)格了，它減弱了材料、漸變色、黑影，去除開(kāi)數(shù)據(jù)冗余信息內(nèi)容的圖型原素、排版設(shè)計(jì)。這類設(shè)計(jì)風(fēng)格設(shè)計(jì)能夠使界面看起來(lái)更為光滑，提高了網(wǎng)站內(nèi)容信息內(nèi)容的視覺(jué)效果等級(jí)，更為便捷客戶迅速尋找必須的內(nèi)容。另外扁平化設(shè)計(jì)的頁(yè)面能更強(qiáng)完成不一樣規(guī)格的轉(zhuǎn)換。

二、3d設(shè)計(jì)風(fēng)格

這兒常說(shuō)的三d設(shè)計(jì)風(fēng)格并不是純碎的讓人覺(jué)得身臨其境的三d環(huán)境，只是這些應(yīng)用小量三d實(shí)際效果使全部網(wǎng)頁(yè)頁(yè)面看起來(lái)更為動(dòng)感，根據(jù)扁平化設(shè)計(jì)的基本上，加上一些栩栩如生的非平扁原素，給網(wǎng)站產(chǎn)生了本來(lái)欠缺的空間感，另外提高行為主體視覺(jué)效果誘惑力。

三、簡(jiǎn)約風(fēng)格

知名工業(yè)生產(chǎn)設(shè)計(jì)高手迪特拉姆斯的一個(gè)設(shè)計(jì)標(biāo)準(zhǔn)便是“好的設(shè)計(jì)是盡量少的設(shè)計(jì)”，這條標(biāo)準(zhǔn)也一樣適用網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中，在網(wǎng)頁(yè)頁(yè)面中去除非是必需的信息內(nèi)容，網(wǎng)頁(yè)頁(yè)面中每提升一個(gè)原素，都是造成客戶過(guò)多的小，乃至變成客戶進(jìn)行目標(biāo)任務(wù)的阻攔。簡(jiǎn)約設(shè)計(jì)的益處就取決于它能利潤(rùn)較大化節(jié)省客戶的經(jīng)濟(jì)成本。

四、無(wú)框設(shè)計(jì)風(fēng)格

無(wú)框設(shè)計(jì)風(fēng)格就是指這些防止應(yīng)用各種外框的網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)，這兒的外框就是指一切種類的裝飾藝術(shù)器皿，根據(jù)除掉這種裝飾藝術(shù)器皿，提升基礎(chǔ)內(nèi)容的設(shè)計(jì)感，例如照片品質(zhì)和排版設(shè)計(jì)合理布局，進(jìn)而提高總體因無(wú)裝飾藝術(shù)器皿的視覺(jué)效果主要表現(xiàn)。

五、插畫風(fēng)格

在網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中，除開(kāi)應(yīng)用很多的照片做為情況或行為主體原素外，圖型插圖的應(yīng)用也是一種非常好的方法，網(wǎng)頁(yè)頁(yè)面Banner能夠應(yīng)用插圖來(lái)表述網(wǎng)站主題風(fēng)格，另外再加插畫圖標(biāo)底裝點(diǎn)，促使網(wǎng)頁(yè)頁(yè)面看上去清爽趣味，提升網(wǎng)站自身的特有性。

六、教室黑板設(shè)計(jì)風(fēng)格

盡管教室黑板設(shè)計(jì)風(fēng)格并不是一個(gè)普遍的設(shè)計(jì)風(fēng)格，可是其經(jīng)典的應(yīng)用方法和拓寬實(shí)際效果一樣能夠做為網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)設(shè)計(jì)風(fēng)格的一項(xiàng)挑選。普遍的應(yīng)用方法便是將教室黑板做為情況原素，另外教室黑板自身的裝飾設(shè)計(jì)實(shí)際效果使網(wǎng)站展現(xiàn)十分時(shí)尚潮流。很多經(jīng)典的特色美食網(wǎng)站設(shè)計(jì)都選用了這類設(shè)計(jì)風(fēng)格，除開(kāi)應(yīng)用教室黑板之外，將實(shí)際情景中的桌面上應(yīng)用到情況中也分外出色。

七、豎向切分

習(xí)慣一欄式的設(shè)計(jì)，將頻幕一分為二乃至是多欄式的網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)方法遭受了諸多客戶的鐘愛(ài)，在網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中應(yīng)用新鮮的分屏功能式設(shè)計(jì)能夠便捷展現(xiàn)不一樣的信息內(nèi)容，造就比照。另外區(qū)劃合理地區(qū)，便捷客戶開(kāi)展迅速挑選和視覺(jué)效果聚焦點(diǎn)。

八、非常頭版頭條

過(guò)去的網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中，滾屏ppt的實(shí)際效果應(yīng)用彌漫著各種各樣網(wǎng)站，盡管這類設(shè)計(jì)方法在很多主頁(yè)上依然可用名，但卻已經(jīng)喪失誘惑力，取代它的的是選用的關(guān)鍵地區(qū)原素，也就是主題風(fēng)格的主題風(fēng)格圖換句話說(shuō)是非常頭版頭條，在主頁(yè)上應(yīng)用規(guī)格超大型、美麗動(dòng)人的精致Banner，而這一非常頭版頭條聚集了對(duì)商品的精粹小結(jié)，進(jìn)而將網(wǎng)站重要的內(nèi)容展現(xiàn)給客戶。

九、相片與白字配搭

嚴(yán)苛實(shí)際意義上，這算不上一種設(shè)計(jì)設(shè)計(jì)風(fēng)格，可是這類方式能夠協(xié)助大家迅速制做優(yōu)異的Banner或是網(wǎng)站，根據(jù)對(duì)相片開(kāi)展一些顏色累加，另外配搭乳白色創(chuàng)意文案，進(jìn)而產(chǎn)生比照，使文本更為清楚便于傳遞。你能把它像公式計(jì)算一樣記在腦中，遇到適合的機(jī)遇就可以應(yīng)用。