使用 CSS 和 html 构建网页

Question

我想构建以下网页，同时将每个部分的文本和图像居中并保持网页响应。现在，我尝试了从 Flex 框到 Bootstrap 的行和列的所有方法，但要么是我的网页失去了响应能力，要么是我无法将内容集中在我正在创建的扇区内。

您建议我如何在满足这两个条件的情况下进行下图所示的设计？

想要的网页结构

Answer 1

要设计这样的东西，您需要将其分解成多个部分。

在这种情况下，我们可以有左侧、中心内容、右侧 . 我将它分解成列，因为布局似乎是由这 3 个部分的宽度定义的。然后一旦我们拥有了每一个。把它拼凑起来。

nav {
  width: 100%;
}

nav:after {
  content: '';
  display: table;
  clear: both;
}

.side-body {
  padding: 5px;
}

.header {
  height: 100px;
  flex-shrink: 0;
  padding: 5px;
  background-color: #feeeee;
}

.header img {
  max-width: 100%;
  max-height: 100%;
}

a {
  float: left;
  display: block;
  padding: 5px;
  background: #eeeeee;
  width: 20%;
}

* {
  box-sizing: border-box;
}

.center-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background-color: #dddddd;
}

.layout {
 display: flex;
}

.left-layout {
  width: 200px;
  flex-shrink: 0;
}

.right-layout {
  width: 150px;
  flex-shrink: 0;
}

<div class="layout">
  <div class="left-layout">
    <div class="header">
      <img src="http://via.placeholder.com/200x100" />
    </div>
    <div class="side-body">
      <h2>List</h2>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div class="center-layout">
    <div class="header">
      <h1>Title</h1>
    </div>
    <nav>
      <a>Home</a>
      <a>About</a>
      <a>Shop</a>
      <a>Contact</a>
      <a>Terms</a>
    </nav>
    <div class="body">
      <img src="https://via.placeholder.com/200x200" />
    </div>
  </div>
  <div class="right-layout">
    <div class="header">
      <h2>Info</h2>
    </div>
    <div class="side-body">
      <h2>List</h2>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>

Flexbox 让一切变得简单。希望对您有所帮助。

使用 CSS 和 html 构建网页

Structuring a web page using CSS and html

html

css

webpage

web