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>

效果

相关推荐
CRMEB定制开发9 分钟前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
imber11 分钟前
Framer Motion & GSAP 实现酷炫动画
前端
ygming17 分钟前
Q43- code973- 最接近原点的 K 个点 + Q44- code347- 前 K 个高频元素
前端·算法
ygming18 分钟前
Hashmap/ Hashset- Q39~Q42内容
前端·算法
多啦C梦a18 分钟前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
归于尽19 分钟前
为什么别人用闭包那么溜?这 8 个场景照着用就对了
前端·javascript·面试
Hilaku21 分钟前
Vue 2与Vue 3响应式原理的对比与实现
前端·javascript·vue.js
自出洞来无敌手(曾令瑶)26 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江43 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码43 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端