使用 CSS 和 html 构建网页 [关闭]

Posted 2023-03-06

【中文标题】使用 CSS 和 html 构建网页 [关闭]

【英文标题】：Structuring a web page using CSS and html [closed]

【发布时间】：2018-12-03 22:57:07

【问题描述】：

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

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

所需的网页结构

【问题讨论】：

欢迎来到 Stack Overflow！这个问题要么太宽泛，要么基于意见，要么需要讨论，因此对于 Stack Overflow 来说是题外话。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

尝试使用 CSS 网格。这是最好的

@Paulie_D 我的简而言之，我的问题是如何划分响应式网页，同时允许内容居中等功能。如果你真的认为这个问题有很多答案，那么请与我分享。

@Akshay L 感谢您的回答，但恐怕我已经尝试过了，无法控制每个跨度内的内容位置和功能。

【参考方案1】：

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

在这种情况下，我们可以有 LEFT SIDE、CENTER CONTENT、RIGHT SIDE。 我将其分解为列，因为布局似乎是由这 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 让一切变得简单。 希望对您有所帮助。