CSS中页面的布局案例-利用浮动

(接期末课程设计题目,支持定制)

利用浮动完成页面布局

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*清除默认样式*/
			*{
				margin: 0;
				padding: 0;
			}
			
			/*设置头部div*/
			.header{
				/*设置一个宽度*/
				width: 1000px;
				/*设置一个高度*/
				height: 120px;
				/*设置一个背景颜色*/
				background-color: yellowgreen;
				/*设置居中*/
				margin: 0 auto;
			}
			
			/*设置一个content*/
			.content{
				/*设置一个宽度*/
				width: 1000px;
				/*设置一个高度*/
				height: 400px;
				/*设置一个背景颜色*/
				background-color: orange;
				/*居中*/
				margin: 10px auto;
			}
			
			/*设置content中小div的样式*/
			.left{
				width: 200px;
				height: 100%;
				background-color: skyblue;
				/*向左浮动*/
				float: left;
			}
			
			.center{
				width: 580px;
				height: 100%;
				background-color: yellow;
				/*向左浮动*/
				float: left;
				/*设置水平外边距*/
				margin: 0 10px;
			}
			
			.right{
				width: 200px;
				height: 100%;
				background-color: pink;
				/*向左浮动*/
				float: left;
			}
			
			
			
			/*设置一个footer*/
			.footer{
				/*设置一个宽度*/
				width: 1000px;
				/*设置一个高度*/
				height: 120px;
				/*设置一个背景颜色*/
				background-color: silver;
				/*居中*/
				margin: 0 auto;
			}
			
		</style>
	</head>
	<body>
		<!-- 头部div -->
		<div class="header"></div>
		
		<!-- 主体内容div -->
		<div class="content">
			<!-- 左侧div -->
			<div class="left"></div>
			<!-- 中间div -->
			<div class="center"></div>
			<!-- 右侧div -->
			<div class="right"></div>
			
		</div>
		
		<!-- 底部信息div -->
		<div class="footer"></div>
		
	</body>
</html>
相关推荐
LaoZhangAI5 小时前
Google Gemini AI图片编辑完全指南:50+中英对照提示词与批量处理教程(2025年9月)
前端·后端
用户11481867894845 小时前
从零搭建 Vue3 + Nest.js 实时通信项目:4 种方案(短轮询 / 长轮询 / SSE/WebSocket)
前端·后端
LaoZhangAI5 小时前
Google Gemini Nano与Banana AI完整部署指南:2025年轻量级AI解决方案
前端·后端
Giant1005 小时前
0 基础也能懂的 Flex 布局教程:3 步搞定网页排版
css
用户11481867894845 小时前
基于 Webpack Module Federation 的 Vue 微前端实践
前端
怪可爱的地球人5 小时前
Pinia状态管理有哪些常用API?
前端
小高0075 小时前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试
Sherry0075 小时前
【译】掌握 Flexbox 的终极指南:从烤肉串到鸡尾酒香肠的布局哲学
css·面试·flexbox
却尘5 小时前
React useMemo 依赖陷阱:组件重挂载,状态无限复原
前端·javascript·react.js
Asort5 小时前
JavaScript 从零开始(三):浏览器控制台与VS Code协同工作环境搭建详解
前端·javascript