htmlcss头部简单

HTML & CSS 头部简单介绍

基础概念

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）则用于描述网页的外观和格式。头部（Header）通常指的是网页顶部包含网站标题、导航菜单等重要元素的区域。

类型

静态头部：固定不变的头部，通常包含网站Logo、导航菜单等。
动态头部：根据用户行为或数据变化而动态调整的头部，如用户登录状态显示等。

应用场景

网站导航：提供网站的主要导航链接，方便用户快速访问各个页面。
品牌展示：展示网站的Logo和名称，增强品牌识别度。
搜索功能：集成搜索框，方便用户快速查找所需内容。

示例代码

以下是一个简单的HTML & CSS头部示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例网站</title>
    <style>
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }
        nav ul li {
            margin: 0 10px;
        }
        nav ul li a {
            color: #fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <header>
        <h1>示例网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>