当点作品1调转到a.html,
时间: 2024-02-13 21:02:19 浏览: 22
好的,可以在作品1的链接中添加 `href="a.html"`,并且在当前目录下创建一个名为 `a.html` 的文件,里面写上你想要展示的内容。下面是修改后的代码示例:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
nav {
background-color: #ddd;
display: flex;
justify-content: center;
padding: 10px;
}
nav a {
color: #333;
margin: 0 10px;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #666;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
article {
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
margin: 20px;
padding: 20px;
width: 300px;
}
article h2 {
margin: 0;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>个人主页</h1>
<p>欢迎来访</p>
</header>
<nav>
<a href="#">首页</a>
<a href="#">个人介绍</a>
<a href="a.html">我的作品</a>
<a href="#">联系我</a>
</nav>
<section>
<article>
<h2>个人介绍</h2>
<p>我叫张三,是一名前端工程师。</p>
<p>我热爱编程,喜欢研究新技术。</p>
</article>
<article>
<h2>我的作品</h2>
<ul>
<li><a href="a.html">作品1</a></li>
<li><a href="#">作品2</a></li>
<li><a href="#">作品3</a></li>
</ul>
</article>
<article>
<h2>联系我</h2>
<p>邮箱:zhangsan@example.com</p>
<p>电话:1234567890</p>
</article>
</section>
<footer>
<p>版权所有 ©2021 张三</p>
</footer>
</body>
</html>
```
你可以在 `a.html` 文件中添加你想要展示的内容,例如:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作品1</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
article {
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
margin: 20px;
padding: 20px;
width: 300px;
}
article h2 {
margin: 0;
}
</style>
</head>
<body>
<header>
<h1>作品1</h1>
</header>
<section>
<article>
<h2>作品1内容</h2>
<p>这里是作品1的内容。</p>
</article>
</section>
</body>
</html>
```