CSS 网页布局

文章目录

布局元素

在html4.01等之前的版本中html并没有专用的布局元素,而是统统使用div进行布局

页眉标签

header标签一般用来嵌套网页的标题,搜索栏,导航栏等

导航栏

nav用来嵌套列表

侧边栏

aside 侧边栏

注意:圣杯布局一般存在左侧和右侧两个侧边栏,此处我们仅书写一个

网页主体

section 网页主体 左右两侧可以放置侧边栏等 内部可以放置正文aricle标签

文章

article 用来放置一篇完整的文章 一般这种文章内部可以再次嵌套页眉页脚

页脚

footer 一般放置网站的联系地址,加盟信息,版权等

测试网页布局元素

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>布局元素</title>
		<style>
			body{
				background-image: url("./image/222.JPG");
			}
			div#container{
				width:700px;
				height:900px;
				margin: 0 auto;
				border:solid 1px white;
				/*
					h5新特性:
						设置阴影
					box-shadow:三个偏移量 阴影颜色
				*/
				box-shadow:15px 15px 15px gray;
			}
			header{
				width:700px;
				height:200px;
				background-color: silver;
				border:solid 1px silver;
			}
			nav{
				width:700px;
				height:50px;
				background-color: hotpink;
				border:solid 1px hotpink;
				margin-top:100px;
			}
			aside{
				width:100px;
				height:600px;
				float:left;
				background-color: darkcyan;
			}
			section{
				width:600px;
				height:600px;
				float: left;
				background-color: darkseagreen;
			}
			footer{
				width:700px;
				height:100px;
				/* 放置其它元素浮动干扰 */
				clear:left;
				background-color: coral;
			}

			nav ul,aside ul{
				list-style-type: none;
			}

			nav a,aside a{
				color:bisque;
				text-decoration: none;
			}
			nav a:hover,aside a:hover{
				color:moccasin;
				text-decoration: underline;
			}

			nav ul li{
				float:left;
				margin-right:50px;
			}

			aside li{
				font-size:10px;
				margin-top:50px;
				margin-left:-13px;
			}

			section article header,section article footer{
				width:600px;
				height:50px;
				background-color: cornflowerblue;
				/*
					h5新特性:
						设置圆角边框,数字越大边框越圆
						一般使用在div上,不能使用在table中
				*/
				border-radius: 20px;
			}
			section article p{
				width:600px;
				height:400px;
				background-color: darkturquoise;
			}
		</style>
	</head>
	<body>
		
		<div id="container">
			
			<header>
				我是网页的标题
			
				<nav>
					<ul>
						<li><a href="#">导航链接1</a></li>
						<li><a href="#">导航链接2</a></li>
						<li><a href="#">导航链接3</a></li>
						<li><a href="#">导航链接4</a></li>
						<li><a href="#">导航链接5</a></li>
					</ul>
				</nav>
			</header>
			
			<aside>
				<ul>
					<li><a href="#">侧边链接1</a></li>
					<li><a href="#">侧边链接2</a></li>
					<li><a href="#">侧边链接3</a></li>
					<li><a href="#">侧边链接4</a></li>
					<li><a href="#">侧边链接5</a></li>
				</ul>
			</aside>
			
			<section>
				我是文章的主体
				
				<article>
					<header>我是文章的页眉</header>
					<p>我是段落文本我是段落文本我是段落文本我是段落文本</p>
					<footer>我是文章的页脚</footer>
				</article>
			</section>
			
			<footer>
				我是页脚
				<address>我是联系地址</address>
			</footer>
		</div>
	</body>
</html>

效果

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试