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>

效果

相关推荐
墨菲安全3 分钟前
NPM组件 @ivy-shared-components/iconslibrary 等窃取主机敏感信息
前端·npm·node.js·npm组件投毒·主机敏感信息窃取·恶意npm包
Mintopia40 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia43 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn1 小时前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero1 小时前
基于vue3完成领域模型架构建设
前端
PanZonghui1 小时前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴1 小时前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常1 小时前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常1 小时前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端