實(shí)戰(zhàn)網(wǎng)頁構(gòu)建header部分

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

header中包含logo和導(dǎo)航，先在HTML中生成這些

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

很顯然LOGO太大了，我們來修復(fù)它

.logo {
    height: 2.4rem;
}

logo在左邊，導(dǎo)航在右邊，這個(gè)很熟悉了吧，直接flexbox大法

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

接著我們修復(fù)我們的背景和間距

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

這樣，我們標(biāo)題的部分也就完成了

言

在日常的php的開發(fā)中，我們常常需要使用到header函數(shù)頭來進(jìn)行做標(biāo)記。

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

返回HTTP狀態(tài)碼

如果你對(duì)http狀態(tài)碼比較感興趣，可以參考我之前的文章：

HTTP狀態(tài)碼超詳細(xì)說明

常見HTTP狀態(tài)碼匯總說明

200 正常訪問

header('HTTP/1.1 200 OK');

301 設(shè)置地址被永久的重定向，進(jìn)行相應(yīng)跳轉(zhuǎn)

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

304 告訴瀏覽器文檔內(nèi)容沒有發(fā)生改變

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

403 設(shè)置當(dāng)前頁面禁止訪問

header('HTTP/1.1 403 Forbidden');

404 通知瀏覽器頁面不存在

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

500 服務(wù)器錯(cuò)誤

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

網(wǎng)頁重定向

跳轉(zhuǎn)到一個(gè)新的地址，如頭條的網(wǎng)站

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

延遲轉(zhuǎn)向也就是隔幾秒跳轉(zhuǎn)，也常用于頁面刷新

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

修改頭信息

修改 X-Powered-By信息（這個(gè)一般是Apache/Nginx等自己相應(yīng)返回的）

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

指定文檔語言

header('Content-language: en');

設(shè)置內(nèi)容長(zhǎng)度

header('Content-Length: 5566');

通知瀏覽器最后一次修改時(shí)間

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

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

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

設(shè)置此頁面的最后更新日期(用格林威治時(shí)間表示)為當(dāng)天，可以強(qiáng)制瀏覽器獲取最新內(nèi)容

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

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

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

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

header("Pragma: no-cache");

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

內(nèi)容類型

設(shè)置網(wǎng)頁編碼

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

設(shè)置純文本格式

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

其他常見內(nèi)容類型

 // 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動(dòng)畫
header('Content-Type: application/x-shockw**e-flash');

聲明一個(gè)下載的文件

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

對(duì)當(dāng)前文檔禁用緩存

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

顯示一個(gè)需要驗(yàn)證的登陸對(duì)話框

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

聲明一個(gè)需要下載的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');

總結(jié)

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

lass屬性 - 定制化網(wǎng)頁設(shè)計(jì)的強(qiáng)大武器

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

1. Class屬性的基本用法

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

<div class="header">
  <h1 class="title">歡迎來到我的網(wǎng)站</h1>
  <p class="description">這里是網(wǎng)站的簡(jiǎn)介信息</p>
</div>

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

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

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

2. Class屬性的進(jìn)階用法

除了基本的樣式定制,Class屬性還可以用于更復(fù)雜的場(chǎng)景。您可以為同一個(gè)元素指定多個(gè)類名,實(shí)現(xiàn)更細(xì)致的樣式控制。

<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的結(jié)合

Class屬性不僅可以用于樣式定制,還可以與JavaScript進(jìn)行聯(lián)動(dòng),實(shí)現(xiàn)各種交互效果。您可以通過JavaScript動(dòng)態(tài)地添加、修改或刪除元素的類名,從而改變它們的外觀和行為。

<div id="box" class="box">這是一個(gè)盒子</div>

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

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

4. Class屬性的最佳實(shí)踐

在使用Class屬性時(shí),有幾個(gè)需要注意的最佳實(shí)踐:

類名要具有描述性,方便理解和維護(hù)
避免過多的類名,保持CSS規(guī)則的簡(jiǎn)潔性
利用CSS預(yù)處理器如SASS/LESS來管理類名和樣式規(guī)則
結(jié)合BEM或OOCSS等命名方法論,提高代碼的可讀性和可維護(hù)性

總之,HTML Class屬性是一個(gè)非常強(qiáng)大的工具,它可以幫助您定制化網(wǎng)頁設(shè)計(jì),打造出獨(dú)一無二的視覺效果和交互體驗(yàn)。只要掌握好它的用法,相信您一定能創(chuàng)造出令人驚嘆的網(wǎng)頁作品。

在線咨詢

上一篇：這18個(gè)網(wǎng)站能讓你的頁面背景炫酷起來
下一篇：利用一行代碼下載網(wǎng)頁視頻

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商