题目简介

本题是门户网站（门|门）的网页布局问题，需要程序员使用 HTML 和 CSS 技术实现一个特定的网页布局。

要求布局必须符合设计稿的要求，同时具有响应式设计（即能够在不同设备上自适应调整布局），并尽可能遵循 Web 标准以提高网站的可访问性和可维护性。

解题思路

根据设计稿，我们需要将网页分为左右两栏，左侧为菜单栏，右侧为内容区域。而菜单栏需要实现展开和收起功能，这说明我们需要使用 JavaScript 来实现交互效果。

由于需求中提到需要实现响应式设计，我们需要使用 CSS 中常用的 MediaQuery （媒体查询）功能，根据不同的设备尺寸选择不同的样式。

HTML 代码

<div class="menu-container">
  <button class="menu-toggle" onclick="toggleMenu()">☰</button>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

<div class="content">
  <h1>网页标题</h1>
  <p>网页内容</p>
</div>

CSS 代码

/* 全局样式 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* 菜单栏样式 */
.menu-container {
  background-color: #333;
  color: #fff;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.menu-toggle {
  background-color: transparent;
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.menu li {
  padding: 10px;
}

.menu li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.menu a {
  color: #fff;
  text-decoration: none;
}

/* 内容区域样式 */
.content {
  margin-top: 50px;
  margin-left: 200px;
  padding: 20px;
}

/* 媒体查询样式 */
@media screen and (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .menu {
    display: none;
    background-color: #555;
  }

  .menu li {
    text-align: center;
    border-bottom: 1px solid #ddd;
  }
}

JavaScript 代码

function toggleMenu() {
  var menu = document.querySelector('.menu');
  menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
}

参考资料

• HTML5 中文文档
• CSS 参考手册
• JavaScript 教程