專注搜索競價代運營

成長之選 ,效果之道!

免費咨詢熱線:17636682598

網(wǎng)頁布局的常見8種類型

1、卡片式布局 2、分屏布局 3、純文字布局 4、個性化推薦布局 5、網(wǎng)格式布局 6、雜志版式布局 7、單頁布局 8、F型布局

網(wǎng)頁布局的常見8種類型

1、卡片式布局

卡片式布局分為兩種,一種是每個卡片的尺寸都相同,排列整齊標準。一種是不同尺寸的卡片,卡片的排列沒有固定的排序。這兩種手法都很適合有大量內(nèi)容需要展示的網(wǎng)頁。

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

2、分屏布局

分屏布局是一種比較流行的布局手法,圖片和文字都一樣重要的時候,就可以選擇分屏布局。左邊可以是文字,右邊為圖片或者左邊為文字,右邊為圖片的布局手法,十分的簡單好學!

應用:電子商務網(wǎng)站。

3、純文字布局

純文字的布局沒有了圖片的輔助元素,整個網(wǎng)頁只有文字,我們可以將主要的文字進行放大,大標題來使用。其他文字作為輔助元素也可以是裝飾元素。純文字的布局就充滿了可讀性,并且有強大的視覺沖擊力!

應用:極簡風格的主頁。

4、個性化推薦布局

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

應用:訂閱類產(chǎn)品網(wǎng)頁。

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

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

應用:圖片,文字比較多的網(wǎng)站。

6、雜志版式布局

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

應用:內(nèi)容多,種類多的網(wǎng)站。

7、單頁布局

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

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

8、F型布局

F型的布局是適合很多的頁面,有研究表明,用戶在瀏覽網(wǎng)頁的時候,會習慣于沿著F式的閱讀軌跡來瀏覽信息。從左到右的閱讀是用戶閱讀的習慣,用戶通過從左到右的閱讀然后向下閱讀,繼續(xù)從左到右。F型的布局有很明確的視覺層次結構。

應用:以文字為主,大部分網(wǎng)站都適用。

9、Z型布局

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

應用:以圖片為主的網(wǎng)站,大部分網(wǎng)站都適用。

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

網(wǎng)頁布局三大核心:盒子模型、浮動、定位

盒子有 m b p c

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

不同瀏覽器帶有默認的內(nèi)外邊距,因此我們在布局前,首先要清除下網(wǎng)頁元素的內(nèi)外邊距。

方式:

* {

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

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

}

浮動

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

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

2 如何實現(xiàn)兩個盒子左右對齊?

總結:有很多布局效果,標準流沒有辦法完成,此時利用浮動完成布局

浮動能改變標簽的默認排列方式

網(wǎng)頁布局準則:

縱向排列-標準流;橫向排列-浮動

語法:

選擇器 { float : 屬性值 ; }

浮動會貼著浮動

浮動特性(重難點)

1.浮動的元素不再保留原先位置,(會像我們迎面撲來),原來的位置會被別的占有

2.如果都設置浮動,則會以一行排列,直到位置不夠,才落到第二行

3.添加了浮動都會有行內(nèi)塊元素的特點,不管什么元素

實際應用:

浮動元素經(jīng)常搭配父級標準流,目的是限制浮動元素位置

先用標準流的父元素排列上下,之后內(nèi)部子元素采取浮動排列左右

清除浮動?

也不是真正意義上的清除,而是限制浮動子元素

原因:

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

2 父元素高度設置為0的話,會被其他標準流父元素擠上去

前提:前提是父盒子本身沒有高度,如果有高度就不用清除!!!

清除浮動后,父級會根據(jù)浮動的盒子自動檢測高度

操作:給父級添加overflow屬性,值設置為hidden.

CSS定位

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

這種情況下,使用標準流或浮動能實現(xiàn)嗎?

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

作用:

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

組成:

定位=定位模式+邊偏移

1)定位模式由CSS的position屬性來設置,4個值:

static 靜態(tài)定位,

靜態(tài)定位就是標準流,很少用

relative 相對定位,(自戀型)

1 相對自己原來的位置; 2 原來在標準流的位置繼續(xù)占有

例:position:relative;

top:100px;

最典型應用就是給絕對定位當?shù)?。。?!?/p>

absolute 絕對定位,(拼爹型)

是相對它的祖先來說的

語法:

選擇器 { position : absolute ;}

注意:

1 沒有父元素或父元素沒有定位,則以瀏覽器為準

2 父元素有定位 ,則以父元素為準。爺爺有定位爸爸沒定位,就以爺爺為準

3 絕對定位不占有標準流位置,典型輪播圖

實際開發(fā)中:子絕父相,絕對定位使用,父必須要有定位

fixed 固定定位

語法:

選擇器 { position : fixed; }

以瀏覽器可視窗口做為 參照點,固定定位也不占有標準流位置,是特殊的絕對定位

2)邊偏移就是盒子最終位置,4個屬性:

top,bottom,left,right

網(wǎng)頁設計類型有哪些

一、扁平化設計

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

二、3d設計風格

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

三、簡約風格

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

四、無框設計風格

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

五、插畫風格

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

六、教室黑板設計風格

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

七、豎向切分

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

八、非常頭版頭條

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

九、相片與白字配搭

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

本文分類:營銷學院

瀏覽次數(shù):47次瀏覽

發(fā)布日期:2022-11-20 16:33:19

本文鏈接:http://24hourphotoeditor.com/edu/2490.html