howto 在线编辑器 | howto代码测试

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

/* 使用 Flexbox 创建一个列布局 */
.row {
  display: flex;
}

/* 左栏（菜单） */
.left {
  flex: 35%;
  padding: 15px 0;
}

.left h2 {
  padding-left: 8px;
}

/* 右栏（页面内容） */
.right {
  flex: 65%;
  padding: 15px;
}

/* 搜索框样式 */
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 1px solid #ddd;
}

/* 在左栏中设置导航菜单的样式 */
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myMenu li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block
}

#myMenu li a:hover {
  background-color: #eee;
}
</style>
</head>
<body>

<h2>搜索菜单</h2>
<p>开始在搜索栏内输入特定类别以“过滤”搜索选项。</p>

<div class="row">
  <div class="left" style="background-color:#bbb;">
    <h2>菜单</h2>
    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="搜索.." title="Type in a category">
    <ul id="myMenu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">SQL</a></li>
      <li><a href="#">Bootstrap</a></li>
      <li><a href="#">Node.js</a></li>
    </ul>
  </div>
  
  <div class="right" style="background-color:#ddd;">
    <h2>页面内容</h2>
    <p>开始在搜索栏内输入特定类别以“过滤”搜索选项。</p>
    <p>一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..</p>
    <p>其他一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..</p>
    <p>一些文字..</p>
  </div>
</div>

</body>
</html>

报个问题: