HTML - CSS布局

上一页
下一页

使用 CSS 的 HTML 布局涉及为网页创建结构内容，然后使用 CSS 属性对其进行样式设置，以便为页面创建具有视觉吸引力的设计。

要正确理解本章，您必须对 CSS 有基本的了解。请查看我们的免费CSS教程。

HTML 使用 CSS 属性布局示例

CSS 的以下属性用于设计 HTML 布局：

  • CSS float：定义HTML元素是否应该向左、向右浮动等
  • CSS display：定义HTML 元素的显示行为，它具有以下值：
    • Flex：display 属性的 flex 值指定一个布局模型，以便于在容器之间对齐和分配空间。
    • Grid：display 属性的网格值指定用于元素对齐的二维布局模型。

CSS float 属性示例

CSS 的 float 属性允许控制网页组件的定位。当元素浮动时，它会从文档的正常流中取出并移动到指定位置，例如向左或向右。

在以下示例中，<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>七科普教程</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 Qikepu Com</h1>
				 <p> 
						qikepu.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 © Qikepu.Com 
						PRIVATE LIMITED. All rights reserved.
				 </p>
			</div>
	 </footer>
</body>
</html>

CSS flexbox 属性示例

CSS flexbox（也称为 Flexible Box Layout）是一种更有效的布局设计方式。它允许开发人员在网页的多个组件之间排列和分配空间。要使用 Flexbox 的功能，我们需要将 display 属性设置为 flex 或 inline-flex。

注意：我们的网站上有一个专门的 Flexbox 教程。请参考该教程以更好地理解。

下面的示例演示如何使用 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>七科普教程</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 Qikepu Com</h2>
				 <p>
						qikepu.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 © Qikepu.Com 
				 PRIVATE LIMITED. All rights reserved.
			</div>
	 </footer>
</body>
</html>

CSS Grid 属性示例

CSS Grid布局是定义行和列网格的 HTML 布局设计技术的又一补充。它还提供了控制网页内容大小和定位的功能。

在此示例中，我们将使用 CSS 的 display： grid 属性设计相同的网页布局。


<!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>七科普教程</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 Qikepu Com</h2>
				 <p>
						qikepu.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 © Qikepu.Com
				 PRIVATE LIMITED. All rights reserved.
			</div>
	 </footer>
</body>
</html>
打印本页
上一页
下一页