改變html結構可以實現優先載入

2022-02-19 10:50:14 字數 1427 閱讀 7918

我們通過乙個例項來看一下：

本程式設計題目，完成乙個混合布局的編寫吧！最終效果如下圖：

任務1：完成頂部（top）、底部（foot）寬度自適應

任務2：中間分為2兩欄，其中，左側（left）寬度為200px， 右側（right）寬度自適應

任務3：要求右側（right）先載入，左側（left）後載入

任務4：編寫的**要相容ie6

css**：

混合布局程式設計挑戰
html**：

<


body


>


<


div 


class


="top"


>top


div>


<


div 


class


="main"


>


<


div 


class


="right"


>right


div>


<


div 


class


="left"


>left


div>


div>


<


div 


class


="foot"


>foot


div>


body


>
**中的背景顏色，沒有按照圖中的設定（因為懶哈 沒有用ps吸取顏色**）

做出來的效果圖

先說一下怎麼完成的任務二，1.先用絕對定位把固定寬度的左欄固定到左側，然後再用 margin-left值等於左欄的寬度200px(此處為了和題中的效果圖一樣所以多加了10px，即紅色部分)。從而達到了右欄寬度自適應的要求。

下面我們來說一下關於優先載入的問題：

這句話其實就是html結構中的：

<


div 


class


="main"


>


<


div 


class


="right"


>right


div>


<


div 


class


="left"


>left


div>


div>
上面的帶碼有沒有發現在 先寫的right後寫的 left，

因為**是順序執行的，所以也就是題目要求中的 右欄（right）先載入，左欄（left）後載入。因為實際應用中很明顯右欄（一般為網頁主要內容）的欄目比左欄（一半為導航內容什麼的）的欄目內容重要。

vue以及html加css實現吸頂效果

vue實現吸頂效果 頁面 頭部展示內容 自動粘滯固定頭部，需要一直展示的 中部展示內容，中部展示內容，中部展示內容 data data mounted mounted methods methods console.log 滾動的距離 scrolled,頭部的高度 header height thi...

優先順序佇列 和 改變結構體 的排序規則

參考了 能站在巨人的肩膀上，也是一種本事！a b c d 從這裡出去 自己瞎猜的，這個 釋了 雖然是用小於號 排序，但是大的先出來。接下來 定義4中情況的 優先順序佇列 1，int 型別，降序 include includeusing namespace std priority queue q i...

HTML加一般處理程式實現檔案上傳

html 後台程式 using system using system.collections.generic using system.linq using system.web using system.drawing using system.drawing.imaging namespace...