Html 简明教程
HTML - Layouts
HTML Layouts 指定 HTML 网页上组件的排列。良好的网页布局结构对于在我们的网站上提供用户友好的体验非常重要。设计一个外观精美的网站布局需要花费大量时间。
HTML Layouts specifies the arrangement of components on an HTML web page. A good layout structure of the webpage is important to provide a user-friendly experience on our website. It takes considerable time to design a website’s layout with a great look and feel.
HTML Layout Elements
下面列出的元素用于创建 HTML 布局的结构。
Below listed elements are used to create HTML layout’s structure.
Elements |
Description |
The header tag is used to add a header section in HTML web page. All the content inside this tag will be on top of the webpage. |
|
It represents a section of a page within the webpage, where it has hyperlinks to other pages or parts within the page (just like the menu bar). |
|
It defines a major part of the web page where all the important content will be displayed. |
|
The footer tag defines the footer section of the webpage. This section contains copyright information and other important details. It will be always at the bottom of the webpage. |
|
It specifies an independent self-containing content such as a forum post, magazine, any blog post and so on. |
|
It specifies a section of content that is directly or indirectly related to the main content (like a sidebar). |
|
It specifies a caption for the <details> element. |
|
It specifies a tag for additional information. It requires the <summary> element. |
Examples of HTML Layout
以下是一些说明 HTML 布局设计的示例。CSS 和 CSS 框架用于设计布局。上面提到的元素用于创建布局结构。
Here are some examples that illustrates HTML layout designs. CSS and CSS framework are used to design the layout. Above mentioned elements are used to create layout structure.
Define a HTML Layout
我们只需使用 <header>, <footer> 和 <nav> 之类的标签即可实现 HTML 布局。以下代码显示了如何进行 HTML 布局
We can achieve HTML layout by simply using tags like <header>, <footer> and <nav>. The following code shows how to make a HTML layout
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.header {
background-color: #b3e0f2;
text-align: center;
padding: 20px;
font-size: 2em;
font-weight: bold;
}
.container {
display: flex;
}
.sidebar {
width: 20%;
background-color: #f4f4f4;
padding: 20px;
}
.content {
width: 80%;
background-color: #f9f9f9;
padding: 20px;
}
.footer {
background-color: #b3e0f2;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div class="header">
Title
</div>
<div class="container">
<div class="sidebar">
<a href="#">Home</a>
<a href="#">Learn HTML</a>
<a href="#">About Us</a>
</div>
<div class="content">
<h1>Home</h1>
<p>This is a home page.</p>
</div>
</div>
<div class="footer">
Footer
</div>
</body>
</html>Ways to create HTML Layouts
有四种方法可以在 HTML 中创建多栏布局并对其进行设计。
There are four ways to create multicolumn layouts in HTML and design them.
-
* CSS Float Property: *A classic way to controlling position and formatting in webpage.
-
CSS Flexbox Property: Used for dynamic layout and to position elements in different screen sizes
-
CSS Grid Property: Create complex grid like layout
-
CSS frameworks: The framework like bootstrap allows to create dynamic layouts
要了解如何使用 CSS 进行 HTML 布局，请访问文章 * layouts using CSS *
To learn how to use CSS for making HTML layout, visit the article * layouts using CSS*
Define Layout using Bootstrap
CSS bootstrap 库可用于在 HTML 中进行布局。以下代码显示了如何进行。
The CSS bootstrap library can be used to make layouts in HTML. Following code shows how it’s done.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap CDN Link -->
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="bg-info text-white text-center py-4">
<h1>Title</h1>
</header>
<!-- Main Container -->
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Learn HTML
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
About Us
</a>
</li>
</ul>
</div>
</nav>
<!-- Content -->
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<h2>Home</h2>
<p>This is a home page.</p>
</main>
</div>
</div>
<!-- Footer -->
<footer class="bg-info text-white text-center py-3">
Footer
</footer>
</body>
</html>