网页顶部是网站名称和LOGO，左侧是菜单导航，点击菜单，右侧显示内容。HTML+CSS代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的网页</title><style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}/* 顶部网站名称样式 */header {background-color: #333;color: white;text-align: center;padding: 20px;}/* 容器，包含左侧导航栏和右侧内容区域 */.container {display: flex;height: calc(100vh - 60px); /* 减去头部高度 */}/* 左侧导航栏样式 */nav {background-color: #f4f4f4;width: 200px;padding: 20px;}nav ul {list-style-type: none;padding: 0;margin: 0;}nav ul li {margin-bottom: 10px;}nav ul li a {text-decoration: none;color: #333;display: block;padding: 10px;border-radius: 5px;}nav ul li a:hover {background-color: #ddd;}/* 右侧内容区域样式 */.content {flex: 1;padding: 20px;}/* 初始隐藏各内容板块 */.content div {display: none;}/* 当对应的菜单项被点击时，显示相应内容板块 */.content div:target {display: block;}</style>
</head><body><!-- 顶部网站名称 --><header><h1>我的网站</h1></header><!-- 容器，包含导航栏和内容区域 --><div class="container"><!-- 左侧导航栏 --><nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于我们</a></li><li><a href="#services">菜单名称</a></li><li><a href="#contact">联系我们</a></li></ul></nav><!-- 右侧内容区域 --><div class="content"><div id="home"><h2>首页内容</h2><p>这里是首页的相关介绍内容，欢迎来到我们的网站。</p></div><div id="about"><h2>关于我们</h2><p>我们是XXX。</p></div><div id="services"><h2>菜单名称</h2><p>菜单内容</p></div><div id="contact"><h2>联系我们</h2><p>联系方式</p></div></div></div>
</body></html>代码直接复制粘贴可用。效果如图：
