Html 简明教程
HTML - Layout using CSS
使用 CSS 布局 HTML 涉及创建网页的结构性内容，然后使用 CSS 属性对其进行样式化以创建视觉上吸引人的页面设计。
HTML Layout using CSS involve creating structural content for a webpage and then styling it with CSS properties to create a visual appealing design for the page.
为了正确理解本章节，你必须对 CSS 有一个基本的了解。请查看我们的免费 * CSS Tutorial.*
To understand this chapter properly, You must have a basic understanding of CSS. Please check out our free CSS Tutorial.
HTML Layout Using CSS Properties
用于设计 HTML 布局的 CSS 属性有：
The following properties of CSS are used to design an HTML layout:
-
* CSS float:* This specifies whether a elements should float left, right etc
-
* CSS display:* This specifies the display behavior of HTML elements, it has following values. * Flex:* The flex value of display property specifies a layout model for easy alignment and distribution of space among container.* Grid:* The grid value of display property specify a 2 dimensional layout model for alignment of elements.
HTML Layout using CSS float Property
CSS 的浮动属性允许控制网页组件的位置。当一个元素浮动时，它将从文档的正常流中取出，并移动到指定的位置，如左或右。
The float property of CSS allows to control the positioning of the web page components. When an element is floated, it is taken out of the normal flow of the document and shifted to the specified position such as left or right.
在下面的示例中，* <nav> 和 * <article> 标记已使用 CSS 的 * float: left* 属性向左浮动。
In the following example, the * <nav>* and <article> tags have been floated to the left using the float: left property of CSS.
<!DOCTYPE html>
<html>
<head>
<title>The float Property</title>
<style>
* {
box-sizing: border-box;
}
header {
font-size: 25px;
color: whitesmoke;
padding: 1px;
text-align: center;
background-color: lightslategray;
}
nav {
float: left;
width: 20%;
height: 250px;
background: lightgray;
padding: 20px;
}
nav ul {
padding: 1px;
}
article {
float: left;
padding: 20px;
width: 80%;
background-color: lightyellow;
height: 250px;
}
footer {
background-color: lightslategray;
padding: 10px;
text-align: center;
color: white;
padding-top: 20px;
padding-bottom: 10px;
}
footer a {
margin: 10px;
}
footer p {
margin-top: 30px;
}
</style>
</head>
<body>
<!--header segment-->
<header>
<div>
<p>Tutorialspoint</p>
</div>
</header>
<section>
<!--Menu Navigation segment-->
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">Library</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Certification</a>
</li>
</ul>
</nav>
<!--Content segment-->
<article>
<h1>Welcome to Tutorials point</h1>
<p>
Tutorialspoint.com is a dedicated website
to provide quality online education in
domains of Computer Science, Information
Technology, Programming Languages,
and other Engineering as well as Management
subjects.
</p>
</article>
</section>
<!--Footer segment-->
<footer>
<div>
<p>
Copyrights © TUTORIALS POINT (INDIA)
PRIVATE LIMITED. All rights reserved.
</p>
</div>
</footer>
</body>
</html>HTML Layout using CSS flex box Property
CSS flexbox （也称为弹性布局）是一种更有效的设计布局的方式。它允许开发者排列和分配网页多个组件之间的空间。若要使用 Flexbox 的功能，我们需要将 * display property* 设置为 flex 或 inline-flex。
The CSS flexbox (also known as Flexible Box Layout) is a more efficient way of designing a layout. It allows developers to arrange and distribute spaces among multiple components of a web page. To use the features of Flexbox, we need to set the display property to flex or inline-flex.
Note ：我们在网站上有一个专门的 * Flexbox tutorial* 。请参考该教程以获得更好的理解。
Note: We have a dedicated Flexbox tutorial on our website. Kindly refer to that tutorial for better understanding.
以下示例演示如何使用 CSS 的 display: flex 属性设计网页布局。
The following example illustrates how to use the display: flex property of CSS to design a layout of a web page.
<!DOCTYPE html>
<html>
<head>
<style>
header {
text-align: center;
background-color: lightslategray;
font-size: 50px;
color: whitesmoke;
}
.contain {
display: flex;
background: lightgray;
height: 250px;
width: 100%;
}
.flex-item1 {
flex-basis: 25%;
background-color: lightslategray;
color: whitesmoke;
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
.flex-item2 {
flex-basis: 75%;
background-color: lightslategray;
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
footer {
background-color: lightslategray;
text-align: center;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<header>
<div>Tutorialspoint</div>
</header>
<div class = "contain">
<div class = "flex-item1">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">Library</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Certification</a>
</li>
</ul>
</div>
<div class = "flex-item2">
<h2>Welcome to Tutorials point</h2>
<p>
Tutorialspoint.com is a dedicated website
to provide quality online education in
the domains of Computer Science,
Information Technology, Programming
Languages, and other Engineering as
well as Management subjects.
</p>
</div>
</div>
<footer>
<div>
Copyrights © TUTORIALS POINT (INDIA)
PRIVATE LIMITED. All rights reserved.
</div>
</footer>
</body>
</html>HTML Layout using CSS Grid Property
CSS grid 布局是 HTML 布局设计技术的另一项补充，用于定义行和列的网格。它还提供了控制网页内容大小和位置的能力。
The CSS grid layout is another addition to the HTML layout designing techniques that define a grid of rows and columns. It also provides abilities to control the sizing as well as positioning of web page contents.
在此示例中，我们将使用 CSS 的显示：网格属性来设计相同的网页布局。
In this example, we are going to design the same web page layout by using the display: grid property of CSS.
<!DOCTYPE html>
<html>
<head>
<style>
header {
text-align: center;
background-color: lightslategray;
font-size: 50px;
color: whitesmoke;
}
.contain {
display: grid;
background-color: lightgray;
grid-template-columns: auto auto;
padding: 5px;
grid-gap: 5px;
height: 250px;
}
.item1 {
background-color: lightslategray;
margin: 5px;
padding: 5px;
letter-spacing: 1px;
}
.item2 {
background-color: lightslategray;
margin: 5px;
padding: 5px;
letter-spacing: 1px;
}
footer {
background-color: lightslategray;
text-align: center;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<header>
<div>Tutorialspoint</div>
</header>
<div class="contain">
<div class="item1">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">Library</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Certification</a>
</li>
</ul>
</div>
<div class="item2">
<h2>Welcome to Tutorials point</h2>
<p>
Tutorialspoint.com is a dedicated website
to provide quality online education in
the domains of Computer Science, Information
Technology, Programming Languages, and other
Engineering as well as Management subjects.
</p>
</div>
</div>
<footer>
<div>
Copyrights © TUTORIALS POINT (INDIA)
PRIVATE LIMITED. All rights reserved.
</div>
</footer>
</body>
</html>