前我們的主頁的部分搞好了

• header中包含logo和導航，先在HTML中生成這些

 <header class="header">
        <img src="img/omnifood-logo.png" alt="LOGO">
        <nav class="main-nav">Navigation</nav>
    </header>

• 很顯然LOGO太大了，我們來修復它

.logo {
    height: 2.4rem;
}

• logo在左邊，導航在右邊，這個很熟悉了吧，直接flexbox大法

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

• 接著我們修復我們的背景和間距

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fdf2e9;
    height: 9.6rem;
    padding: 0 4.8rem;
}
.logo {
    height: 2.2rem;
}

這樣，我們標題的部分也就完成了

言

在日常的php的開發中，我們常常需要使用到header函數頭來進行做標記。

這里好奇心就帶大家一起列出我們常用的header頭，供大家參考。

返回HTTP狀態碼

如果你對http狀態碼比較感興趣，可以參考我之前的文章：

HTTP狀態碼超詳細說明

常見HTTP狀態碼匯總說明

200 正常訪問

header('HTTP/1.1 200 OK'); 

301 設置地址被永久的重定向，進行相應跳轉

header('HTTP/1.1 301 Moved Permanently');

304 告訴瀏覽器文檔內容沒有發生改變

header('HTTP/1.1 304 Not Modified'); 

403 設置當前頁面禁止訪問

header('HTTP/1.1 403 Forbidden');

404 通知瀏覽器 頁面不存在

header('HTTP/1.1 404 Not Found'); 

500 服務器錯誤

header('HTTP/1.1 500 Internal Server Error');

網頁重定向

跳轉到一個新的地址，如頭條的網站

header('Location: http://www.toutiao.com/'); 

延遲轉向 也就是隔幾秒跳轉，也常用于頁面刷新

header('Refresh: 10; url=http://www.toutiao.com/'); 

修改頭信息

修改 X-Powered-By信息（這個一般是Apache/Nginx等自己相應返回的）

header('X-Powered-By: PHP/8.0.0'); 

指定文檔語言

header('Content-language: en'); 

設置內容長度

header('Content-Length: 5566'); 

通知瀏覽器最后一次修改時間

header('Last-Modified: '.gmdate('D, d M Y H:i:s', $time).' GMT'); 

設置此頁面的過期時間(用格林威治時間表示)，只要是已經過去的日期即可。

 header("Expires: Mon, 12 Jul 2020 01:03:04 GMT");      

設置此頁面的最后更新日期(用格林威治時間表示)為當天，可以強制瀏覽器獲取最新內容

 header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");      

告訴客戶端瀏覽器不使用緩存，適用于HTTP 1.1 協議

header("Cache-Control: no-cache, must-revalidate");      

告訴客戶端瀏覽器不使用緩存，兼容HTTP 1.0 協議

header("Pragma: no-cache");    

HTTP緩存我之前也有詳細講過，可以參考：一文了解HTTP緩存

內容類型

設置網頁編碼

header('Content-Type: text/html; charset=utf-8'); 

設置純文本格式

header('Content-Type: text/plain'); 

其他常見內容類型

 // jpg jpeg文件
header('Content-Type: image/jpeg');
// zip壓縮文件
header('Content-Type: application/zip');  
// PDF文件
header('Content-Type: application/pdf'); 
// 音頻文件
header('Content-Type: audio/mpeg'); 
//css文件
header('Content-type: text/css'); 
//js文件
header('Content-type: text/javascript'); 
//json
header('Content-type: application/json'); 
//pdf
header('Content-type: application/pdf'); 
//xml格式文件
header('Content-type: text/xml'); 
//Flash動畫
header('Content-Type: application/x-shockw**e-flash'); 

聲明一個下載的文件

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="haoqixin.zip"'); // 這里以haoqixin.zip為演示
header('Content-Transfer-Encoding: binary');
readfile('haoqixin.zip');

對當前文檔禁用緩存

header('Cache-Control: no-cache, no-store, max-age=0, must-revalidate');
header('Expires: Mon, 16 Jul 2021 09:30:00 GMT');

顯示一個需要驗證的登陸對話框

header('HTTP/1.1 401 Unauthorized');
header('WWW-Authenticate: Basic realm="Top Secret"');

聲明一個需要下載的xls文件

header('Content-Disposition: attachment; filename=toutiao.xlsx');
header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Length: '.filesize('./haoqixin.xls'));
header('Content-Transfer-Encoding: binary');
header('Cache-Control: must-revalidate');
header('Pragma: public');
readfile('./haoqixin.xls');

總結

好了，在PHP中我們常用的Header頭基本就這些了，希望對你有幫助。

lass屬性 - 定制化網頁設計的強大武器

在HTML中,Class屬性是一個非常強大而又靈活的工具。它可以讓您為網頁中的各種元素賦予獨特的樣式和功能,從而打造出與眾不同的視覺效果和交互體驗。本文將為您解密Class屬性的魔力,教您如何利用它來實現個性化的網頁設計。

1. Class屬性的基本用法

Class屬性允許您為HTML元素指定一個或多個類名。這些類名可以在CSS中定義樣式規則,從而影響元素的外觀。

<div class="header">
  <h1 class="title">歡迎來到我的網站</h1>
  <p class="description">這里是網站的簡介信息</p>
</div>

.header {
  background-color: #f2f2f2;
  padding: 20px;
}

.title {
  color: #333;
  font-size: 24px;
}

.description {
  color: #666;
  font-size: 16px;
}

2. Class屬性的進階用法

除了基本的樣式定制,Class屬性還可以用于更復雜的場景。您可以為同一個元素指定多個類名,實現更細致的樣式控制。

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

3. Class屬性與JavaScript的結合

Class屬性不僅可以用于樣式定制,還可以與JavaScript進行聯動,實現各種交互效果。您可以通過JavaScript動態地添加、修改或刪除元素的類名,從而改變它們的外觀和行為。

<div id="box" class="box">這是一個盒子</div>

const box=document.getElementById('box');

box.classList.add('active'); // 添加類名
box.classList.remove('box'); // 刪除類名
box.classList.toggle('hidden'); // 切換類名

4. Class屬性的最佳實踐

在使用Class屬性時,有幾個需要注意的最佳實踐:

1. 類名要具有描述性,方便理解和維護
2. 避免過多的類名,保持CSS規則的簡潔性
3. 利用CSS預處理器如SASS/LESS來管理類名和樣式規則
4. 結合BEM或OOCSS等命名方法論,提高代碼的可讀性和可維護性

總之,HTML Class屬性是一個非常強大的工具,它可以幫助您定制化網頁設計,打造出獨一無二的視覺效果和交互體驗。只要掌握好它的用法,相信您一定能創造出令人驚嘆的網頁作品。