HTML入门:网页布局

你的网络首码项目网 网站建设评论108字数 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网格布局的用武之地。网格布局是专门为创建二维布局而设计的。使用网格,网站的整个布局是使用二维网格系统构建的。每个元件都可以精确定位,并且可以根据需要收缩或拉伸。最重要的是,网格非常易于使用。

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网
  • 声明:首码项目网所有文章均来自网络和投稿,不代表本站立场,请勿盲目下载注册,以免为您带来不必要的损失。《项目投诉》
  • 你的首码项目网

发表评论