HTML代码怎么布局_HTML代码页面布局基础与常用结构设计-html教程-PHP中文网

<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>© 2023 版权所有</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8616" title="SEO Companion"><img
														src="https://img.php.cn/upload/skill/000/000/081/179214140630725.jpg" alt="SEO Companion" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill8616" title="SEO Companion" class="overflowclass">SEO Companion</a>
													<p class="overflowclass">深度 SEO 分析与执行，涵盖页面内 SEO、技术 SEO、内容策略、本地 SEO、关键词研究，以及反向链接风险评估与优化建议。适用于……</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill8616" title="SEO Companion" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</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); /* 三列 */
  }
}

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！