文章/答案/技术大牛

发布

社区首页 >问答首页 >在html和css中思考过程，大小结构？

问在html和css中思考过程，大小结构？
EN

Stack Overflow用户

提问于 2020-06-17 03:33:44

回答 1查看 39关注 0票数 0

我正在试着提出我的问题。我想知道如何在设计CSS时决定页边距和填充值。有没有什么特定的规则来管理这些值，或者它是随机的，看起来很好吗？

如何将页面拆分成行和列？我们应该先将页面垂直拆分成列还是水平拆分(在行中)？

我的问题是关于HTML架构的。对于HTML架构，有什么特别的指导原则吗？

html

css

layout

architecture

回答 1

Stack Overflow用户

发布于 2020-06-17 04:46:16

关于页边距和填充，我的一般goto指南-取自chakra ui

  "0": "0",
  "1": "0.25rem",
  "2": "0.5rem",
  "3": "0.75rem",
  "4": "1rem",
  "5": "1.25rem",
  "6": "1.5rem",
  "8": "2rem",
  "10": "2.5rem",
  "12": "3rem",
  "16": "4rem",
  "20": "5rem",
  "24": "6rem",
  "32": "8rem",
  "40": "10rem",
  "48": "12rem",
  "56": "14rem",
  "64": "16rem"

对于结构化，从上到下开始制作垂直部分，制作行

<body>
  <header></header>

  <section class="banner-section"></section>

  <section class="work-section"></section>

  <section class="contact-section"></section>

  <footer></footer>
</body>;

现在我已经决定了总体结构，是时候开始处理各个部分了。

<header>
  <div class="important-msg">
    <p>Share this page with everyone</p>
  </div>
  <nav>
    <img src="logo.png" width="">Logo</h1>
    <ul>
      <li>
        <a href="home">Home</a>
      </li>
      <li>
        <a href="about">About</a>
      </li>
      <li>
        <a href="contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

在标题中，我创建了2行，

在<div>中，我插入了带有<p>标记的消息。

在nav中，有两个元素<img>和<ul>，现在我需要将它们排列在列中，以便它们保持在一行中。当然，这意味着<ul>中的<li>和<a>必须以内联方式排列。

我就是这样分配的。从行开始，深入到行中，然后如果元素并排，则创建列。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62416250

复制

相似问题

问在html和css中思考过程，大小结构？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html和css中思考过程，大小结构？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html和css中思考过程，大小结构？
EN