HTML+CSS网页模板，左侧导航，右侧内容，顶部LOGO

原创已于 2024-11-23 22:54:12 修改 · 908 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#html #css #前端

于 2024-11-23 22:51:57 首次发布

网页顶部是网站名称和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>

代码直接复制粘贴可用。效果如图：