制作一个4页一个主页3个子页,主页可以连接其他三页的老君山景点介绍HTML代码,加强CSS结构和图片
时间: 2024-03-18 22:40:37 浏览: 17
好的,以下是一个简单的 HTML 代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>老君山景点介绍</title>
<style>
/* 主页样式 */
#main {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
/* 子页样式 */
.page {
background-color: #fff;
padding: 20px;
margin: 20px;
}
/* 图片样式 */
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
</style>
</head>
<body>
<!-- 主页 -->
<div id="main">
<h1>老君山景点介绍</h1>
<p>欢迎来到老君山,这里有许多美丽的景点等着你来发现。</p>
<ul>
<li><a href="page1.html">景点1</a></li>
<li><a href="page2.html">景点2</a></li>
<li><a href="page3.html">景点3</a></li>
</ul>
</div>
<!-- 子页1 -->
<div class="page">
<h2>景点1</h2>
<p>这里是景点1的介绍。</p>
<img src="page1.jpg" alt="景点1">
</div>
<!-- 子页2 -->
<div class="page">
<h2>景点2</h2>
<p>这里是景点2的介绍。</p>
<img src="page2.jpg" alt="景点2">
</div>
<!-- 子页3 -->
<div class="page">
<h2>景点3</h2>
<p>这里是景点3的介绍。</p>
<img src="page3.jpg" alt="景点3">
</div>
</body>
</html>
```
注意,这只是一个简单的实现,实际的 HTML 和 CSS 代码可能需要更复杂的结构和样式来实现更好的效果。