网页布局的常见8种类型

1、卡片式布局 2、分屏布局 3、纯文字布局 4、个性化推荐布局 5、网格式布局 6、杂志版式布局 7、单页布局 8、F型布局

• 目录

• 1网页布局的常见8种类型

• 2网页布局的三大核心

• 3网页设计类型有哪些

网页布局的常见8种类型

1、卡片式布局

卡片式布局分为两种，一种是每个卡片的尺寸都相同，排列整齐标准。一种是不同尺寸的卡片，卡片的排列没有固定的排序。这两种手法都很适合有大量内容需要展示的网页。

应用：新闻网站、博客类网站。

2、分屏布局

分屏布局是一种比较流行的布局手法，图片和文字都一样重要的时候，就可以选择分屏布局。左边可以是文字，右边为图片或者左边为文字，右边为图片的布局手法，十分的简单好学!

应用：电子商务网站。

3、纯文字布局

纯文字的布局没有了图片的辅助元素，整个网页只有文字，我们可以将主要的文字进行放大，大标题来使用。其他文字作为辅助元素也可以是装饰元素。纯文字的布局就充满了可读性，并且有强大的视觉冲击力!

应用：极简风格的主页。

4、个性化推荐布局

个性化推荐布局就需要根据用户的喜好来量身定制网页的布局了，现在人工智能的发展，我们能根据用户之前的订阅习惯，来设计网页布局，推荐出他们喜爱的网页效果。精确的分析用户的喜好，满足用户的需求。

应用：订阅类产品网页。

5、网格式布局

如果有很多图片，内容细碎的网页，可以选择网格布局。网格布局可以使用不同大小网格来表达内容，不同网格里所表达的内容不同。网格会给人一种整齐的秩序感。网格设计可以提升整个网页的整齐性，保持内容的有序，并且很容易使用。

应用：图片，文字比较多的网站。

6、杂志版式布局

如果是每天都需要更新的网站，可以学习杂志和期刊的布局，运用到网页上。杂志版式的网页布局就和我们平时看到的杂志上的布局一样，根据种类的划分，进行排列。这样的布局可以让网页是多样化，也能让用户每天都有新鲜感!

应用：内容多，种类多的网站。

7、单页布局

对于内容稀疏的网站，单页布局是一个很好的选择。单页布局是将网站中的所有的主要内容放在一个网页上，通过滚动完成导航。单页布局是内容叙事的完美选择，还可以使用视差滚动的效果，让画面产生一种交互感，并且让观者沉浸在其中。

应用：内容稀疏，沉浸式叙事网站，交互式读物。

8、F型布局

F型的布局是适合很多的页面，有研究表明，用户在浏览网页的时候，会习惯于沿着F式的阅读轨迹来浏览信息。从左到右的阅读是用户阅读的习惯，用户通过从左到右的阅读然后向下阅读，继续从左到右。F型的布局有很明确的视觉层次结构。

应用：以文字为主，大部分网站都适用。

9、Z型布局

Z型布局是将用户的视线吸引到顶部，遵循着从左到右的规律，用户会从左到右，从上到下的习惯来进行阅读网页，这样的布局比较简单，合理的运用从左到右看的规律，将元素合理整齐的排布好就行了。

应用：以图片为主的网站，大部分网站都适用。

网页布局的三大核心

网页布局三大核心：盒子模型、浮动、定位

盒子有 m b p c

清除内外边距：

不同浏览器带有默认的内外边距，因此我们在布局前，首先要清除下网页元素的内外边距。

方式：

* {

padding：0;

margin:0;

}

浮动

1 首先了解把块元素放在一行内?

使用行内块元素会产生 空隙

2 如何实现两个盒子左右对齐?

总结：有很多布局效果，标准流没有办法完成，此时利用浮动完成布局

浮动能改变标签的默认排列方式

网页布局准则：

纵向排列-标准流;横向排列-浮动

语法：

选择器 { float : 属性值 ; }

浮动会贴着浮动

浮动特性(重难点)

1.浮动的元素不再保留原先位置，(会像我们迎面扑来)，原来的位置会被别的占有

2.如果都设置浮动，则会以一行排列，直到位置不够，才落到第二行

3.添加了浮动都会有行内块元素的特点，不管什么元素

实际应用：

浮动元素经常搭配父级标准流，目的是限制浮动元素位置

先用标准流的父元素排列上下，之后内部子元素采取浮动排列左右

清除浮动?

也不是真正意义上的清除，而是限制浮动子元素

原因：

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

2 父元素高度设置为0的话，会被其他标准流父元素挤上去

前提：前提是父盒子本身没有高度，如果有高度就不用清除!!!

清除浮动后，父级会根据浮动的盒子自动检测高度

操作：给父级添加overflow属性，值设置为hidden.

CSS定位

1 如果要实现某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子

这种情况下，使用标准流或浮动能实现吗?

2 实现某个盒子固定在屏幕

作用：

让盒子自由在某个盒子内移动或者固定在屏幕某个位置

组成：

定位=定位模式+边偏移

1)定位模式由CSS的position属性来设置，4个值：

static 静态定位,

静态定位就是标准流，很少用

relative 相对定位,(自恋型)

1 相对自己原来的位置; 2 原来在标准流的位置继续占有

例：position:relative;

top:100px;

最典型应用就是给绝对定位当爹。。。。

absolute 绝对定位,(拼爹型)

是相对它的祖先来说的

语法：

选择器 { position : absolute ;}

注意：

1 没有父元素或父元素没有定位，则以浏览器为准

2 父元素有定位 ，则以父元素为准。爷爷有定位爸爸没定位，就以爷爷为准

3 绝对定位不占有标准流位置，典型轮播图

实际开发中：子绝父相，绝对定位使用，父必须要有定位

fixed 固定定位

语法：

选择器 { position : fixed; }

以浏览器可视窗口做为 参照点，固定定位也不占有标准流位置，是特殊的绝对定位

2)边偏移就是盒子最终位置，4个属性：

top,bottom,left,right

网页设计类型有哪些

一、扁平化设计

扁平化设计设计能够说成当下常见的网页页面设计设计风格了，它减弱了材料、渐变色、黑影，去除开数据冗余信息内容的图型原素、排版设计。这类设计风格设计能够使界面看起来更为光滑，提高了网站內容信息内容的视觉效果等级，更为便捷客户迅速寻找必须的內容。另外扁平化设计的页面能更强完成不一样规格的转换。

二、3d设计风格

这儿常说的三d设计风格并不是纯碎的让人觉得身临其境的三d环境，只是这些应用小量三d实际效果使全部网页页面看起来更为动感，根据扁平化设计的基本上，加上一些栩栩如生的非平扁原素，给网站产生了本来欠缺的空间感，另外提高行为主体视觉效果诱惑力。

三、简约风格

知名工业生产设计高手迪特拉姆斯的一个设计标准便是“好的设计是尽量少的设计”，这条标准也一样适用网页页面设计中，在网页页面中去除非是必需的信息内容，网页页面中每提升一个原素，都是造成客户过多的小，乃至变成客户进行目标任务的阻拦。简约设计的益处就取决于它能利润较大化节省客户的经济成本。

四、无框设计风格

无框设计风格就是指这些防止应用各种外框的网页页面设计，这儿的外框就是指一切种类的装饰艺术器皿，根据除掉这种装饰艺术器皿，提升基础內容的设计感，例如照片品质和排版设计合理布局，进而提高总体因无装饰艺术器皿的视觉效果主要表现。

五、插画风格

在网页页面设计中，除开应用很多的照片做为情况或行为主体原素外，图型插图的应用也是一种非常好的方法，网页页面Banner能够应用插图来表述网站主题风格，另外再加插画图标底装点，促使网页页面看上去清爽趣味，提升网站自身的特有性。

六、教室黑板设计风格

尽管教室黑板设计风格并不是一个普遍的设计风格，可是其經典的应用方法和拓宽实际效果一样能够做为网页页面设计设计风格的一项挑选。普遍的应用方法便是将教室黑板做为情况原素，另外教室黑板自身的装饰设计实际效果使网站展现十分时尚潮流。很多經典的特色美食网站设计都选用了这类设计风格，除开应用教室黑板之外，将实际情景中的桌面上应用到情况中也分外出色。

七、竖向切分

习惯一栏式的设计，将频幕一分为二乃至是多栏式的网页页面设计方法遭受了诸多客户的钟爱，在网页页面设计中应用新鮮的分屏功能式设计能够便捷展现不一样的信息内容，造就比照。另外区划合理地区，便捷客户开展迅速挑选和视觉效果聚焦点。

八、非常头版头条

过去的网页页面设计中，滚屏ppt的实际效果应用弥漫着各种各样网站，尽管这类设计方法在很多主页上依然可用名，但却已经丧失诱惑力，取代它的的是选用的关键地区原素，也就是主题风格的主题风格图换句话说是非常头版头条，在主页上应用规格超大型、美丽动人的精致Banner，而这一非常头版头条聚集了对商品的精粹小结，进而将网站重要的內容展现给客户。

九、相片与白字配搭

严苛实际意义上，这算不上一种设计设计风格，可是这类方式能够协助大家迅速制做优异的Banner或是网站，根据对相片开展一些颜色累加，另外配搭乳白色创意文案，进而产生比照，使文本更为清楚便于传递。你能把它像公式计算一样记在脑中，遇到适合的机遇就可以应用。