实战网页构建header部分

前我们的主页的部分搞好了

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属性时,有几个需要注意的最佳实践:

类名要具有描述性,方便理解和维护
避免过多的类名,保持CSS规则的简洁性
利用CSS预处理器如SASS/LESS来管理类名和样式规则
结合BEM或OOCSS等命名方法论,提高代码的可读性和可维护性

总之,HTML Class属性是一个非常强大的工具,它可以帮助您定制化网页设计,打造出独一无二的视觉效果和交互体验。只要掌握好它的用法,相信您一定能创造出令人惊叹的网页作品。

在线咨询

上一篇：这18个网站能让你的页面背景炫酷起来
下一篇：利用一行代码下载网页视频

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商