頁面布局思路

2021-09-28 20:39:18 字數 566 閱讀 3335

頁面是由html構成的;熟悉html本身預設特點【很重要】。

布局重要:盡量通過結構;利用流逝布局

##### 如何構建結構

1: 只要看到從上往下的布局;就在這幾個子元素外部加乙個【父容器】------原理: 子元素在父容器中從上往下;並且可以撐起父容器的高度

2: 只要看到從左往右的布局方式 

---> 原理:   子元素一定變為inline元素  inline  inline-block

3: 將元素變為 inline inline-block 方式有?

-顯示轉化  display:inline  ||  inline-block

-隱示轉化  給子元素新增  position float 給父容器新增display:flex

4: 確定元素特點後: 

-左右對齊方式有規律  首選 float

-所有子元素從左往右: 間距相同: 排列有過濾 : 公司要求不相容ie10以下---> flex布局

-特殊情況  position: absolute;

-只要看到螢幕上固定不變的: 只能使用position:fixed;

頁面布局整體思路

為了提高網頁製作的效率,布局時通常有以下的整體思路 1.必須確定頁面的版心 可視區 我們測量可得知。2.分析頁面中的行模組,以及每個行模組中的列模組。即頁面布局第一準則。3.一行中的列模組經常浮動布局,先確定每個列的大小,之後確定列的位置。即頁面布局第二準則。4.製作 html 結構。我們還是遵循,...

自適應布局思路

最近在做乙個自適應布局的專案,所以學了下自適應,下面是總結。此總結只做效果,不關注效率和 優化。html中新增 viewport content width device width,target densitydpi high dpi,initial scale 1.0,minimum scale...

頁面布局 兩列布局

left right right css left right簡單的布局方法,左側設定浮動,右側設定margin left 避免環繞左側 的布局方法 left right right css left right fix right通過在html檔案的right上套上一層right fix,然後對r...