HTML代码怎么布局_HTML代码页面布局基础与常用结构设计

<div class="navbar">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">关于我们</a>
</div>

.navbar {
  display: flex;
  justify-content: space-around; /* 均匀分布 */
  align-items: center; /* 垂直居中 */
  background-color: #f0f0f0;
  padding: 10px;
}

<div class="page-layout">
  <header>页头</header>
  <nav>导航</nav>
  <main>主要内容</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div>

.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左侧200px，右侧自适应 */
  grid-template-rows: auto 1fr auto; /* header, main/nav/aside, footer */
  grid-template-areas:
    "header header"
    "nav    main"
    "nav    aside" /* 这里假设aside也在nav下面 */
    "footer footer";
  min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

<div class="header-wrapper">
  <div class="logo">...</div>
  <div class="menu">...</div>
</div>
<div class="content-area">
  <div class="main-article">...</div>
  <div class="sidebar-info">...</div>
</div>
<div class="footer-wrapper">
  <div class="copyright">...</div>
</div>

<header>
  @@##@@
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">分类</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容...</p>
    <section>
      <h2>评论区</h2>
      <!-- 评论内容 -->
    </section>
  </article>
  <aside>
    <h3>相关推荐</h3>
    <ul>
      <li><a href="#">文章A</a></li>
      <li><a href="#">文章B</a></li>
    </ul>
  </aside>
</main>
<footer>
  <p>&copy; 2023 版权所有</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1176">
                            <img src="https://img.php.cn/upload/ai_manual/001/431/639/68b7b00a91a23666.png" alt="AI Room Planner">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1176">AI Room Planner</a>
                            <p>AI 室内设计工具，免费为您的房间提供上百种设计方案</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AI Room Planner">
                                <span>136</span>
                            </div>
                        </div>
                        <a href="/ai/1176" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AI Room Planner">
                        </a>
                    </div>
                
</footer>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 默认样式，通常是针对移动设备的（Mobile First） */
body {
  font-size: 16px;
  padding: 10px;
}

/* 当屏幕宽度大于等于 768px 时应用 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
  .container {
    max-width: 960px;
    margin: 0 auto; /* 居中 */
  }
}

/* 当屏幕宽度大于等于 1200px 时应用 */
@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
  .container {
    max-width: 1140px;
  }
}

img, video, iframe {
  max-width: 100%; /* 图片最大宽度为其父容器的100% */
  height: auto;    /* 高度自动调整，保持图片比例 */
  display: block;  /* 避免图片底部出现多余空间 */
}

/* 手机端默认一列布局 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr; /* 一列 */
  gap: 15px;
}

/* 平板端两列布局 */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 两列 */
  }
}

/* 桌面端三列布局 */
@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr); /* 三列 */
  }
}