用html css js做一个大学网页
时间: 2023-09-25 20:11:11 浏览: 79
好的,以下是一个简单的大学网页示例,使用 HTML、CSS 和 JavaScript 进行制作:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大学网页</title>
<link rel="stylesheet" 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>
<li><a href="#">新闻动态</a></li>
</ul>
</nav>
</header>
<section id="banner">
<h2>欢迎来到大学名字</h2>
<p>成为未来的精英</p>
<button>查看更多</button>
</section>
<section id="about">
<h2>学校简介</h2>
<p>大学名字成立于xxxx年,是一所综合性高等学府。学校拥有xxx名教师和xxx名学生,包括本科生、硕士研究生和博士研究生。学校致力于培养创新人才,推动科学研究和社会服务。</p>
</section>
<section id="programs">
<h2>教学科研</h2>
<div class="program">
<img src="program1.jpg" alt="计算机科学">
<h3>计算机科学</h3>
<p>该专业致力于培养具有计算机基础知识和技术能力的高级人才,包括软件开发、网络技术、数据库管理等方面。</p>
</div>
<div class="program">
<img src="program2.jpg" alt="化学">
<h3>化学</h3>
<p>该专业致力于培养具有化学基础知识和实验技能的高级人才,包括分析化学、有机化学、无机化学等方面。</p>
</div>
<div class="program">
<img src="program3.jpg" alt="金融">
<h3>金融</h3>
<p>该专业致力于培养具有金融基础知识和实践能力的高级人才,包括投资分析、风险管理、国际金融等方面。</p>
</div>
</section>
<section id="contact">
<h2>联系我们</h2>
<p>欢迎来到大学名字。如果您有任何问题,可以通过以下方式联系我们:</p>
<ul>
<li>电话:xxx-xxxx-xxxx</li>
<li>邮箱:xxxx@university.com</li>
<li>地址:xxxx市xxxx区xxxx路xxxx号</li>
</ul>
</section>
<footer>
<p>版权所有 © 2021 大学名字</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
}
nav ul {
list-style: none;
display: flex;
}
nav li {
margin-right: 20px;
}
nav li:last-child {
margin-right: 0;
}
nav a {
color: #fff;
}
section {
padding: 60px 40px;
}
#banner {
background-image: url(banner.jpg);
height: 500px;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
}
#banner h2 {
font-size: 60px;
margin-bottom: 20px;
}
#banner p {
font-size: 24px;
margin-bottom: 40px;
}
#banner button {
background-color: #fff;
color: #333;
border: none;
padding: 20px 40px;
font-size: 20px;
cursor: pointer;
}
#about h2,
#programs h2,
#contact h2 {
text-align: center;
margin-bottom: 40px;
}
.program {
margin-bottom: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.program img {
width: 300px;
height: 200px;
object-fit: cover;
margin-right: 40px;
}
.program h3 {
font-size: 30px;
margin-bottom: 20px;
}
.program p {
font-size: 18px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
```
JavaScript 代码:
```javascript
// 在此处添加 JavaScript 代码
// 可以实现页面交互效果,如点击按钮弹出提示框等
```
这只是一个简单的大学网页示例,你可以根据自己的需求进行修改和完善。