帮我做一个html的网页 实现如下内容: 1)包含两个网页,内容跟“国有技术”相关 (2)网页中要用到div标签,合理对网页的区域进行划分。 (3)每个网页都有导航栏,导航栏可以水平也可以垂直排列,可以通过导航栏在两个页面之 间跳转。 (4)网页有一级标题。 (5) 网页有正文段落。 (6)网页上用到1个图片,美化页面。
时间: 2024-02-18 12:06:33 浏览: 39
好的,我可以帮你完成这个任务。首先,我们需要创建两个 HTML 文件,一个是主页 index.html,另一个是关于页面 about.html。以下是代码示例:
index.html
```
<!DOCTYPE html>
<html>
<head>
<title>国有技术</title>
<meta charset="utf-8">
<style>
/* 定义导航栏样式 */
nav {
display: flex;
background-color: #333;
color: #fff;
padding: 10px;
font-size: 20px;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 20px;
}
nav a:hover {
color: #ccc;
}
/* 定义页面主体样式 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 50px;
}
.container h1 {
font-size: 48px;
margin-bottom: 20px;
}
.container p {
font-size: 24px;
line-height: 1.5;
margin: 20px 0;
}
.container img {
width: 400px;
height: 300px;
object-fit: cover;
margin-left: 50px;
}
</style>
</head>
<body>
<nav>
<a href="index.html">首页</a>
<a href="about.html">关于</a>
</nav>
<div class="container">
<h1>国有技术</h1>
<p>国有技术是指由国家控制或拥有的技术,它不仅包括国家自主研发的技术,还包括国外引进的技术,以及在国内使用的技术。</p>
<img src="https://picsum.photos/id/237/400/300" alt="美化图片">
</div>
</body>
</html>
```
about.html
```
<!DOCTYPE html>
<html>
<head>
<title>国有技术 - 关于</title>
<meta charset="utf-8">
<style>
/* 定义导航栏样式 */
nav {
display: flex;
flex-direction: column;
background-color: #333;
color: #fff;
padding: 10px;
font-size: 20px;
height: 100vh;
justify-content: center;
align-items: center;
}
nav a {
color: #fff;
text-decoration: none;
margin-bottom: 20px;
}
nav a:hover {
color: #ccc;
}
/* 定义页面主体样式 */
.container {
margin: 50px;
}
.container h1 {
font-size: 48px;
margin-bottom: 20px;
}
.container p {
font-size: 24px;
line-height: 1.5;
margin: 20px 0;
}
.container img {
width: 400px;
height: 300px;
object-fit: cover;
margin-left: 50px;
}
</style>
</head>
<body>
<nav>
<a href="index.html">首页</a>
<a href="about.html">关于</a>
</nav>
<div class="container">
<h1>关于国有技术</h1>
<p>国有技术是指由国家控制或拥有的技术,它不仅包括国家自主研发的技术,还包括国外引进的技术,以及在国内使用的技术。</p>
<img src="https://picsum.photos/id/1062/400/300" alt="美化图片">
</div>
</body>
</html>
```
这里我们简单解释一下代码:
1. 在头部设置页面标题和字符编码;
2. 在样式部分,设置导航栏和页面主体的样式;
3. 在导航栏中设置两个链接,分别是首页和关于页面;
4. 在页面主体中使用 div 标签划分区域,设置网页标题、正文段落和美化图片。
我们在浏览器中打开 index.html 或 about.html 文件,就可以看到两个网页的效果了。导航栏可以通过链接在两个页面之间跳转。