一个简单的页头通用代码
以下是一个简单的页头通用代码示例，包括一个Logo、一个标题、一个搜索框和一个导航栏。你可以根据自己的需求进行修改和扩展。
<!DOCTYPE html>
<html>
<head>
<title>页头通用代码</title>
<style>
/* 页头背景渐变黄绿色 */
body {
background: linear-gradient(to right, #ffcc00, #008000);
background-size: 100%;
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Logo样式 */
.logo {
float: left;
margin-top: 10px;
max-width: 100px;
}
/* 标题样式 */
h1 {
margin: 0;
padding: 20px 0;
text-align: center;
}
/* 搜索框样式 */
.search-box {
margin: 10px 0;
text-align: center;
}
/* 导航栏样式 */
nav {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
margin-top: 20px; /* 增加一些上边距，使导航栏与Logo和标题有一些间距 */
}
</style>
</head>
<body>
<!-- Logo -->
<div class="logo">
<!-- 可以上传图片或者使用文字 -->
<img src="logo.png" alt="Logo">
</div>
<!-- 标题 -->
<h1>我的网站</h1>
<!-- 搜索框 -->
<div class="search-box">
<form action="/search" method="GET">
<input type="text" name="q" placeholder="输入关键词">
<input type="submit" value="搜索">
</form>
</div>
<!-- 导航栏 -->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</body>
</html>这是一个简单的HTML页头代码示例。让我来解释一下它的意思：
<!DOCTYPE html>: 这是一个文档类型声明，告诉浏览器这是一个HTML5文档。
<html>: 这是HTML文档的根元素，所有其他的HTML元素都会被包含在这个元素里面。
<head>: 这个元素包含了文档的元信息，比如字符集、样式表、脚本等。
<title>: 这个元素定义了在浏览器标签页上显示的文档标题。
<style>: 这个元素包含了文档的样式信息，比如CSS样式规则。
接下来是样式部分，这部分定义了页头的样式：
body 选择器设置了页面的背景颜色和背景图片，以及文字的颜色和字体。
.logo 选择器设置了Logo的样式，包括浮动方式和最大宽度。
h1 选择器设置了标题的样式，包括上下边距和居中对齐。
.search-box 选择器设置了搜索框的样式，包括上下边距和居中对齐。
nav 选择器设置了导航栏的样式，包括背景颜色、文字颜色、内边距和上边距。
最后是页头的实际内容部分：
div.logo 是Logo元素的代码，你可以在这里放置上传的图片或者文字。
h1 是标题元素的代码，你可以在这里放置你的标题。
.search-box 是搜索框元素的代码，这是一个表单，包含了搜索关键词输入框和搜索按钮。
nav 是导航栏元素的代码，这里包含了三个链接元素（<a>），分别链接到首页、博客和关于页面。
以上就是这段代码的意思。你可以根据自己的需求修改和扩展它。
截图效果：
