web頁面與多頁應用(布局之浮動)

2021-10-08 01:38:26 字數 930 閱讀 6013

1.使用浮動來設定二列布局

利用浮動和塊級元素實現的左側寬度固定,右側自適應寬度的布局方式

left

right

/* css */

.left

.right

2.使用浮動

著名的有「聖杯布局」和「雙飛翼布局」,他們都是左側,右側寬度固定。中間自適應的三列布局。

聖杯布局:「聖杯布局」中每列都用了浮動,不同的是元素順序並沒有與布局順序一致(先寫中間列而不是左邊列),同時左側元素還借助了標準文件流的相對定位。元素順序與我們直覺不一致的目的在於讓瀏覽器優先解析和顯示中間部分內容,但帶來的問題就是左側元素的偏移值無法很好的計算

左側元素距離左邊的偏移量 = 左側元素寬度 + 中間元素寬度

左側元素寬度是固定的,這裡是200px,中間元素是撐滿父容器內容區域的,是相對值100%,所以無法使用單純地做外邊距來實現,需要應用相容性更好的解決方案——相對定位

center

left

right

/*css*/

.container .column

.container

.left

.center

.right

雙飛翼布局」就是針對以上問題提出的,該布局不使用相對定位的方式來使左邊的元素進行偏移,而是在中間的元素上加了一層父容器,並留出相應的邊距讓左右兩邊元素能順利填充進來

center

left

right

/*css*/

.container

.column

.center-wrap

.center-wrap .center

.left

.right

6 4 多頁應用與單頁應用

每一次頁面的跳轉,後端都會返回乙個新的html檔案 首屏 頁面首個螢幕的內容展現出來的時間,因為訪問頁面的時候,伺服器返回html,然後頁面就會被展示出來,這個過程只經歷了乙個http請求,所以頁面展示的速度非常快 搜尋引擎是可以識別html中的內容的,而我們每乙個頁面,所有的內容都放在html中 ...

SPA 單頁面應用 單頁Web應用

正常網頁url的組成,可以請看location 物件 包含有關當前 url 的資訊。例如 如上的 url 由以下部分組成 1 https 規定了頁面採用的協議 2 mp.csdn.net 為頁面所屬的網域名稱 3 postedit index.html為讀取的檔名稱 也可以叫做入口檔案 4 name...

SharePoint頁面布局與母板頁

相信使用sharepoint07來進行應用開發的人都不會對masterpage 母板頁 陌生。在sharepoint07中,母板頁大致可以分為站點母板頁 個人理解是全域性 和頁面母板頁。而這二類母板頁都有其預設的名字,分別為 default.master和custom.master 如果我們在web...