我需要JavaScript+css实现的一个网站
时间: 2024-02-05 21:05:14 浏览: 14
好的,以下是一个简单的网站模板,使用 JavaScript 和 CSS 实现,你可以根据自己的需求进行修改和完善。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站标题</title>
<!-- CSS 样式 -->
<style type="text/css">
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav {
background-color: #eee;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline;
margin-right: 10px;
}
nav a {
color: #333;
text-decoration: none;
}
nav a:hover {
color: #666;
text-decoration: underline;
}
section {
padding: 10px;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<!-- 网站头部 -->
<header>
<h1>网站标题</h1>
</header>
<!-- 导航栏 -->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<!-- 网站内容 -->
<section>
<h2>欢迎来到我们的网站</h2>
<p>这是一个使用 JavaScript 和 CSS 实现的简单网站模板。</p>
<button onclick="alert('Hello, world!')">点击这里</button>
</section>
<!-- 网站底部 -->
<footer>
© 2021 网站版权所有
</footer>
</body>
</html>
```
以上是一个简单的网站模板,你可以根据自己的需求进行修改和完善。