写一个精美网页
时间: 2023-07-04 19:17:35 浏览: 50
好的,以下是一个更加精美的网页示例:
```
<!DOCTYPE html>
<html>
<head>
<title>精美网页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<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>
</div>
</header>
<section class="hero">
<div class="container">
<h2>欢迎来到精美网页</h2>
<p>这是一个漂亮的网页示例,它包含一个页眉、一个主要内容部分和一个页脚。</p>
<a href="#" class="btn">了解更多</a>
</div>
</section>
<section class="features">
<div class="container">
<h2>我们的特点</h2>
<div class="feature">
<img src="icon-1.png" alt="特点图标">
<h3>响应式设计</h3>
<p>我们的网站设计采用响应式布局,可以在各种设备上完美显示。</p>
</div>
<div class="feature">
<img src="icon-2.png" alt="特点图标">
<h3>优秀的用户体验</h3>
<p>我们注重用户体验,努力使用户在我们的网站上浏览和购买商品变得更加轻松和愉快。</p>
</div>
<div class="feature">
<img src="icon-3.png" alt="特点图标">
<h3>高质量的产品</h3>
<p>我们提供高质量的产品,所有产品都经过严格的质量控制和检测。</p>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© 2021 精美网页</p>
</div>
</footer>
</body>
</html>
```
这个网页使用了一个外部 CSS 文件(style.css),其中包含了网页的所有样式。网页包括一个漂亮的页眉和页脚,以及一个主要内容区域,其中包括一个漂亮的英雄区域和一个特点区域。此外,网页还使用了 Google 字体,以及一些图像来增加视觉效果。
你可以将上述代码复制到一个文本编辑器中,然后将文件保存为 “index.html”(或其他任何文件名),同时需要将 style.css、icon-1.png、icon-2.png 和 icon-3.png 这些文件都保存在同一个文件夹下。然后,用任何现代浏览器打开这个文件,就可以看到这个精美的网页了。