首页 > 其他分享> > CSS制作网页布局

CSS制作网页布局

2022-02-03 12:30:34 作者：互联网

本文讲解用HTML5和CSS搭建网页，主要学习网页布局。

先看效果图：

可以看到，网页分为四个板块，

最上方的页眉
左侧的导航栏
右侧的正文
底部的页脚

我们需要先用HTML5进行分区，再用CSS进行装饰。

HTML5代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!--title表示网页名称-->
		<title>网页布局</title>
		<!-- 连接到进度条.css文件 -->
		<link rel="stylesheet" type="text/css" href="网页布局.css"/>
	</head>
	<body>
		
	<!-- 定义文档或节的页眉 -->
	<header>
	<h1>City Gallery</h1>
	</header>
	<!-- 定义导航链接的容器 -->
	<nav>
	London<br>
	Paris<br>
	Tokyo<br>
	</nav>
	<!-- 定义文档中的节 -->
	<section>
	<h1>London</h1>
	<p>
	London is the capital city of England. It is the most populous city in the United Kingdom,
	with a metropolitan area of over 13 million inhabitants.
	</p>
	<p>
	Standing on the River Thames, London has been a major settlement for two millennia,
	its history going back to its founding by the Romans, who named it Londinium.
	</p>
	</section>
	<!-- 定义文档或节的页脚 -->
	<footer>
	Copyright W3School.com.cn
	</footer>
	
	</body>
</html>

CSS代码如下：

/* 定义文档或节的页眉 */
header {
    background-color:black;
    color:white;
	/* 水平居中对齐 */
    text-align:center;
    padding:5px; 
}
/* 定义导航链接的容器 */
nav {
	/* 文本行高 */
    line-height:30px;
    background-color:#aaaaff;
    height:300px;
    width:100px;
	/* 元素向左浮动,默认不浮动 */
    float:left;
    padding:5px; 
}
/* 定义文档中的节 */
section {
    width:350px;
	/* 元素向左浮动,默认不浮动 */
    float:left;
    padding:10px; 
}
/* 定义文档或节的页脚 */
footer {
	/* 页脚背景色 */
    background-color:black;
	/* 页脚文本颜色 */
    color:white;
	/* 在左右两侧均不允许浮动元素，不然页脚会显示在网页上方*/
    clear:both;
	/* 文本水平居中 */
    text-align:center;
    padding:5px; 
}

这里比较关键的是，float和clear参数，不然各个板块的位置会错乱。

对于各个参数的详细解析，后续会尽快补充。

标签：网页,页脚,color,padding,London,制作,CSS
来源： https://blog.csdn.net/weixin_43790703/article/details/122775085