用html5和css和JavaScript优化该代码
时间: 2024-03-22 14:42:55 浏览: 14
以下是使用HTML5、CSS和JavaScript进行优化的代码:
HTML5:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>南昌航空大学科技学院</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>南昌航空大学科技学院</h1>
</header>
<nav>
<a href="#" class="active">首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
<section>
<figure>
<img src="https://picsum.photos/200/300" alt="图片1">
<figcaption>这是一张美丽的图片</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/200/300" alt="图片2">
<figcaption>这是另一张美丽的图片</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/200/300" alt="图片3">
<figcaption>这是第三张美丽的图片</figcaption>
</figure>
</section>
<footer>
<p>2021我的网页</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global styles */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
color: #333;
font-size: 16px;
}
h1 {
font-size: 36px;
text-align: center;
margin: 20px 0;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #87CEEB;
}
/* Header */
header {
background-color: #87CEEB;
color: white;
padding: 20px;
}
/* Navigation */
nav {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
margin-bottom: 20px;
}
nav a {
display: inline-block;
padding: 14px 16px;
font-weight: bold;
font-size: 18px;
}
nav a.active {
background-color: #87CEEB;
color: white;
}
nav a:hover {
background-color: #ddd;
}
/* Content */
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 20px;
}
figure {
margin: 10px;
box-shadow: 0 0 5px #ccc;
}
img {
max-width: 100%;
height: auto;
}
figcaption {
font-size: 18px;
line-height: 1.5;
text-align: center;
margin: 10px;
}
/* JavaScript */
figure:hover {
transform: scale(1.1);
box-shadow: 0 0 10px #CCCCCC;
}
```
JavaScript:
```javascript
// Show welcome message
function showMsg() {
alert("南昌航空大学科技学院 欢迎您!");
}
// Toggle active class on navigation links
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach(link => {
link.addEventListener("click", function() {
navLinks.forEach(link => link.classList.remove("active"));
this.classList.add("active");
});
});
```
在这个优化版本中,我们采用了更加简洁的HTML5标签和样式,使用了更加规范化的CSS和JavaScript编写方式。同时,我们也将JavaScript代码放到了一个单独的文件中,这样可以更加方便地维护。