简单html静态网页代码
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单静态网页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #666;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
}
nav a:hover {
background-color: #999;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>简单静态网页</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">服务</a>
<a href="#">联系我们</a>
</nav>
<section>
<h2>欢迎访问我们的网站</h2>
<p>这是一个简单的静态网页示例，用于演示 HTML 和 CSS 的基本结构。</p>
</section>
<footer>
<p>© 2024 简单静态网页. All Rights Reserved.</p>
</footer>
</body>
</html>
这个 HTML 页面包含了一个简单的结构：
一个标题 <header> 包含网页的标题一个导航栏 <nav> 包含了几个链接一个内容区域 <section> 包含了简单的欢迎信息一个页脚 <footer> 包含版权信息
该示例还包含了一些简单的 CSS 样式，用于布局和样式化页面的不同部分。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单静态网页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #666;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
margin: 0 5px;
}
nav a:hover {
background-color: #999;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>简单静态网页</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">服务</a>
<a href="#">联系我们</a>
</nav>
<section>
<h2>欢迎访问我们的网站</h2>
<p>这是一个简单的静态网页示例，用于演示 HTML 和 CSS 的基本结构。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae feugiat magna. Aliquam erat volutpat. In in tellus et ante ullamcorper consequat. Donec interdum tincidunt justo, nec pellentesque turpis luctus ac. Phasellus nec venenatis lectus.</p>
</section>
<footer>
<p>© 2024 简单静态网页. All Rights Reserved.</p>
</footer>
</body>
</html>
这个 HTML 页面包含了一个简单的结构：
一个标题 <header> 包含网页的标题一个导航栏 <nav> 包含了几个链接一个内容区域 <section> 包含了简单的欢迎信息和一些文本段落一个页脚 <footer> 包含版权信息
该示例还包含了一些简单的 CSS 样式，用于布局和样式化页面的不同部分。
