简单美观的HTML模板：左侧导航，右侧内容
<!DOCTYPE html>
<html>
<head>
<title>简单美观的HTML模板：左侧导航，右侧内容</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
height: 100vh;
}
.nav {
background-color: #333;
color: #fff;
flex-basis: 20%;
padding: 20px;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
margin-bottom: 10px;
}
.nav a {
color: #fff;
text-decoration: none;
font-size: 16px;
}
.nav a:hover {
color: #ff0;
}
.content {
flex-basis: 80%;
padding: 20px;
}
.content h1 {
font-size: 32px;
margin-bottom: 20px;
}
.content p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<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>
<div class="content">
<h1>欢迎来到我的网站</h1>
<p>请在左侧导航中选择一个页面查看</p>
</div>
</div>
</body>
</html>
<p>你可以将其保存为一个HTML文件并在浏览器中打开，然后将页面1、页面2和页面3的链接指向你的实际内容HTML页面即可。</p>
原文地址: https://www.cveoy.top/t/topic/na7e 著作权归作者所有。请勿转载和采集!