Html 简明教程
HTML - Layout using CSS
使用 CSS 布局 HTML 涉及创建网页的结构性内容，然后使用 CSS 属性对其进行样式化以创建视觉上吸引人的页面设计。
为了正确理解本章节，你必须对 CSS 有一个基本的了解。请查看我们的免费 * CSS Tutorial.*
HTML Layout Using CSS Properties
用于设计 HTML 布局的 CSS 属性有：
-
* 浮动 CSS：*此属性指定元素是向左浮动、向右浮动等
-
* 显示 CSS：*此属性指定 HTML 元素的显示行为，它有以下值。*弹性：*显示属性的弹性值指定布局模型，以便轻松地在容器中对齐和分配空间。*网格：*显示属性的网格值指定用于对齐元素的 2D 布局模型。
HTML Layout using CSS float Property
CSS 的浮动属性允许控制网页组件的位置。当一个元素浮动时，它将从文档的正常流中取出，并移动到指定的位置，如左或右。
在下面的示例中，* <nav> 和 * <article> 标记已使用 CSS 的 * float: left* 属性向左浮动。
<!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。
Note ：我们在网站上有一个专门的 * Flexbox tutorial* 。请参考该教程以获得更好的理解。
以下示例演示如何使用 CSS 的 display: flex 属性设计网页布局。
<!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 布局设计技术的另一项补充，用于定义行和列的网格。它还提供了控制网页内容大小和位置的能力。
在此示例中，我们将使用 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>