Question

我想构建一个带有两列布局的语义html页面。这是构建页面的正确方法。请注意放在一边的位置。

选项1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header></header>
  <main>
    <section class="col-1"></section>
    <aside class="col-2"></aside>
  </main>
  <footer></footer>
</body>
</html>

选项2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header></header>
  <main class="col-1">
    <section></section>
    <aside></aside>
  </main>
  <aside class="col-2"></aside>
  <footer></footer>
</body>
</html>

哪个选项正确？

Answer 1

我看到您不是在谈论结构中的CSS，如果您对CSS不满意，建议您使用引导程序来创建列。您只需提供Bootstrap CDN或库，然后通过类名开始使用它即可。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <header></header>
 <main class='row'>
  <div class='col-6></div>
  <div class='col-6></div>
 </main>
 <footer></footer>
</body>
</html>

语义html页面结构

1 个答案: