使用html css 和js语言制作科技文化强国论坛界面的代码
时间: 2023-11-22 16:56:56 浏览: 42
很抱歉,我是一个文本聊天机器人,无法为您提供完整的网站代码。但是,我可以为您提供一些基本的HTML、CSS和JS代码示例,以帮助您开始构建您的论坛界面。
HTML 代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>科技文化强国论坛</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>科技文化强国论坛</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">讨论</a></li>
<li><a href="#">资源</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新讨论</h2>
<ul>
<li><a href="#">如何提高科技创新能力?</a></li>
<li><a href="#">人工智能的发展前景如何?</a></li>
<li><a href="#">科技与文化的融合</a></li>
</ul>
</section>
<section>
<h2>热门资源</h2>
<ul>
<li><a href="#">《科技创新月刊》2021年第一期</a></li>
<li><a href="#">《人工智能白皮书》最新版</a></li>
<li><a href="#">《科技文化与未来社会》研究报告</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2021 科技文化强国论坛</p>
</footer>
</body>
</html>
```
CSS 代码示例:
```
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 30px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 5px;
}
a {
color: #333;
text-decoration: none;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
JS 代码示例:
```
// 添加“返回顶部”按钮
var btn = document.createElement("button");
btn.innerHTML = "返回顶部";
btn.onclick = function() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
document.body.appendChild(btn);
```