当然可以，下面是一个详细的HTML5网站模板示例，这个模板包含了基本的页面结构，包括头部、导航栏、主内容区和底部，你可以根据需要进行修改和扩展。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" defer></script>
</head>
<body>
<!-头部区域 -->
<header class="site-header">
<div class="container">
<h1 class="logo">我的网页</h1>
<nav class="main-nav">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</div>
</header>
<!-主内容区域 -->
<main class="site-content">
<section id="home" class="home">
<div class="container">
<h2>欢迎来到我们的网站</h2>
<p>这是一段简短的欢迎信息。</p>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h2>关于我们</h2>
<p>这里是关于我们的详细信息。</p>
</div>
</section>
<section id="services" class="services">
<div class="container">
<h2>我们的服务</h2>
<p>我们提供各种优质服务。</p>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2>联系我们</h2>
<form action="#" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">消息:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<br>
<button type="submit">提交</button>
</form>
</div>
</section>
</main>
<!-底部区域 -->
<footer class="site-footer">
<div class="container">
<p>© 2023 我的网站. 版权所有.</p>
</div>
</footer>
</body>
</html>
CSS (styles.css)
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 容器类 */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
/* 头部样式 */
.site-header {
background: #333;
color: #fff;
padding: 1em 0;
}
.site-header .logo {
float: left;
margin: 0;
}
.main-nav {
float: right;
}
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-nav ul li {
display: inline;
margin-left: 1em;
}
.main-nav ul li a {
color: #fff;
text-decoration: none;
}
/* 主内容区域 */
.site-content section {
padding: 2em 0;
}
.site-content h2 {
border-bottom: 2px solid #333;
display: inline-block;
padding-bottom: 0.5em;
}
/* 表单样式 */
form label {
display: block;
margin-top: 1em;
}
form input, form textarea {
width: 100%;
padding: 0.5em;
margin-top: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
}
form button {
padding: 0.7em 1.5em;
background: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
form button:hover {
background: #555;
}
/* 底部样式 */
.site-footer {
background: #333;
color: #fff;
text-align: center;
padding: 1em 0;
position: fixed;
width: 100%;
bottom: 0;
}
JavaScript (scripts.js)
// 简单的JavaScript代码示例：显示当前年份
document.addEventListener('DOMContentLoaded', () => {
const currentYear = new Date().getFullYear();
document.querySelector('.site-footer p').textContent =© ${currentYear} 我的网站. 版权所有.;
});
这个模板涵盖了一个基本的网站结构，包括头部、导航栏、多个内容部分以及底部，你可以根据自己的需求进一步定制和扩展这个模板。
小伙伴们，上文介绍了“app html5网站模板”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/707642.html
微信扫一扫 