CSS制作网页布局

最新推荐文章于 2024-06-15 12:12:02 发布

Térébentine

最新推荐文章于 2024-06-15 12:12:02 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_43790703/article/details/122775085

版权

本文介绍了如何使用HTML5和CSS3构建网页布局，包括页眉、导航栏、正文和页脚四个部分。通过HTML5进行页面结构划分，然后利用CSS3的float和clear属性来正确布置各板块的位置。

摘要由CSDN通过智能技术生成

本文讲解用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>