HTML入门：网页布局

你的网络首码项目网
你的网络首码项目网
你的网络首码项目网
686
文章
3
评论
网站建设评论275字数 3859阅读模式

高级网站布局可以使用HTML和CSS的组合来实现。下面是一个概述。

大多数现代网站和博客都由页眉，页脚，导航栏组成，也许是另一个侧边栏，我们不要忘记，主要内容区域。像这样：文章源自你的网络首码项目网-https://www.youranweb.com/105.html

HTML入门：网页布局文章源自你的网络首码项目网-https://www.youranweb.com/105.html

网站布局中最常见部分的示例。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

HTML有许多元素可用于定义每个区域。这些元素包括main eader元素、footer元素、nav元素、aside元素和article元素。此外，div 元素是一个通用块级元素，可用于对 HTML 元素进行分组。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

因此，可以按如下方式标记上述布局：文章源自你的网络首码项目网-https://www.youranweb.com/105.html

<header>Header</header>
<article>Article</article>
<nav>Nav</nav>
<div>Ads</div>
<footer>Footer</footer>

但这些元素只是提供了文件的结构。他们不处理演示。因此，我们最终会得到这个：文章源自你的网络首码项目网-https://www.youranweb.com/105.html

<!DOCTYPE html>
<title>My Example</title>
<header>Header</header>
<article>Article</article>
<nav>Nav</nav>
<div>Ads</div>
<footer>Footer</footer>

如本教程前面所述，CSS是定义HTML文档表示形式所需的内容。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

网格布局

CSS网格布局是专门为网站布局构建的。它适用于二维网格系统，您可以在其中指定哪些元素转到网格的哪些部分。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

因此，我们可以采用上面的HTML代码，然后使用CSS网格来定位每个元素：文章源自你的网络首码项目网-https://www.youranweb.com/105.html

<!DOCTYPE html>
<title>My Example</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
  }
#pageHeader {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }
header, footer, article, nav, div {
  padding: 20px;
  background: gold;
}
</style>
<body>
  <header id="pageHeader">Header</header>
  <article id="mainArticle">Article</article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>

如果您的浏览器支持网格布局，则该示例应类似于此页面顶部的示例。这里又是：文章源自你的网络首码项目网-https://www.youranweb.com/105.html

HTML入门：网页布局文章源自你的网络首码项目网-https://www.youranweb.com/105.html

在此示例中，我们使用具有一种“ASCIIart”语法的网格模板区域属性来指定每个元素的位置。这是看起来像这样的位：文章源自你的网络首码项目网-https://www.youranweb.com/105.html

grid-template-areas: 
  "header header header"
  "nav article ads"
  "footer footer footer";

然后，我们使用网格区域属性将每个元素绑定到每个网格区域。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

#pageHeader {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }

代码的其余部分涉及尺寸，排水沟，一般美学等。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

在本例中，我们确实通过向元素添加ID来稍微更改了标记。我们不需要这样做，但这是很好的做法。通过这样做，我们确保网格区域仅由具有正确ID的元素占用。如果我们不这样做，如果我们向页面添加另一个同名元素（例如，另一个header元素），我们可能会遇到重大问题。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

响应式布局

响应式布局根据用于查看网站的屏幕大小进行调整。这意味着您的网站在手机上可能看起来与平板电脑和台式电脑不同。网站会自行调整，为屏幕尺寸提供最佳布局。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

我们可以修改上面的示例，使其在小型设备（如移动电话）上使用不同的布局。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

为此，我们添加了一个媒体查询来测试屏幕的大小。如果它小于特定宽度，我们会向他们显示新的布局。文章源自你的网络首码项目网-https://www.youranweb.com/105.html

<!DOCTYPE html>
<title>My Example</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
  }
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "article"
      "ads"
      "nav"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}
#pageHeader {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }
header, footer, article, nav, div {
  padding: 20px;
  background: gold;
}
</style>
<body>
  <header id="pageHeader">Header</header>
  <article id="mainArticle">Article</article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>

上面的示例将使所有元素相互堆叠（除非您在非常宽的屏幕上查看此示例）。像这样堆叠元素非常适合移动电话等小型设备。单击该按钮可在新窗口中查看它（该窗口应显示原始布局-除非您已经在小型设备上查看此布局）。Preview文章源自你的网络首码项目网-https://www.youranweb.com/105.html

以下是我们用于该示例的媒体查询：文章源自你的网络首码项目网-https://www.youranweb.com/105.html

@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "article"
      "ads"
      "nav"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}

我们只需更改ASCII艺术以反映我们的新布局，在本例中，它只是将每个元素堆叠在一起（但按照我们指定的顺序）。我们还会根据需要更改行和列的值。

如果您有兴趣了解有关使用网格的详细信息，请查看网格教程。

非网格浏览器

网格布局仍然非常新，因此，浏览器支持是有限的。好消息是，大多数主流浏览器从2017年3月开始支持网格，因此车轮肯定在运动。但是仍然有很多网络用户使用非网格浏览器。

因此，在网格具有广泛的浏览器支持之前，为了支持非网格浏览器，您将需要为您的网站布局使用其他方法，例如CSS浮动（具有float属性）和/或flexbox（具有flex和相关属性）。

如果这感觉有点压倒性，不要绝望！您可以下载这些HTML模板中的任何一个供自己使用。您可以打开文件并查看每个文件的构建方式。您可以根据需要修改它们。

网站布局的演变

自网络诞生以来，Web技术已经发生了变化。HTML表格曾经是创建高级两列或三列布局的唯一方法，其中整个网站嵌套在一个大表格中。但是，表格不是为布局目的而设计的，它们被设计为保存表格数据。HTML不是为演示而设计的-它是为标记文档的结构而设计的。

CSS是为演示而设计的。因此，一旦浏览器最终（合理地）对CSS的一致支持，CSS浮点数就成为常态，其中CSS浮点数属性将应用于需要彼此相邻的块元素。这使开发人员能够继续使用其三列布局，同时将演示文稿与内容分开。

但是浮动并不是真正为二维布局而设计的，并且通常很难让所有页面元素正确排列，所有内容都处于正确的高度，并且没有任何东西被无意中推到下一行，等等。

flexbox的引入减轻了很多痛苦，因为它提供了一种更好的方法来并排排列元素，而没有浮子固有的许多问题。但是，弹性框是一个一维系统。它非常适合将元素彼此并排排列，或者堆叠在彼此之上，但不能同时堆叠在一起。

这就是CSS网格布局的用武之地。网格布局是专门为创建二维布局而设计的。使用网格，网站的整个布局是使用二维网格系统构建的。每个元件都可以精确定位，并且可以根据需要收缩或拉伸。最重要的是，网格非常易于使用。

相关文章
HTML入门：图像映射
HTML入门：实体的概念
HTML入门：教程摘要
HTML入门：HTML内联框架
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台，所有文章均来自网络和网友投稿，不代表本站任何立场，请勿盲目下载注册参与，以免为您带来不必要的损失。
广告也精彩

联系站长Taoka006，备注广告位获取报价

你的网络首码项目网
  • 声明：首码项目网所有文章均来自网络和投稿，不代表本站立场，请勿盲目下载注册，以免为您带来不必要的损失。《项目投诉》
  • 你的首码项目网

发表评论