[网页编程]-10 框架标签 div

学坝教育

已于 2024-01-04 15:06:04 修改

阅读量469

点赞数 7

文章标签： html5 前端 html 学习开发语言

于 2023-12-13 10:26:26 首次发布

本文链接：https://blog.csdn.net/xuebajiaoyu/article/details/134965486

版权

div 用于对网页模块化划分

div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行

大致上可以这样理解

将一个网页进行这样划分,变成模块,然后在做编辑和布局

也就是把网页划成多个格子,方便我们在每个格子里操作

这里是需要用CSS的,如果不懂的话,只要理解下面的代码就可以了

<body>
		
		<!--头部模块-->
		<div class="top">
			
			
		</div>
		<!--中间提示-->
		<div class="tips"></div>
		<!--中间的展现-->
		<div class="center">
			
			<div class="login">
				
				
			</div>
			
			
		</div>
		<!--底部模块-->
		<div class="bottom"></div>
	</body>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			.top{
			height:100px;
			
			width: 100%;
			/*背景颜色*/
			background-color: red;
				
			}
			
			.tips{
				
				width: 100%;
				
				height: 40px;
				
				background-color: pink;
				
			}
			
			.center{
				
				width: 100%;
				
				height: 475px;
				
				background-color: palegreen;
				
			}
			
			.bottom{
				
				width: 100%;
				
				height: 150px;
				
				background-color: paleturquoise;
				
			}
			
			.login{
				
				width: 350px;
				
				height: 400px;
				
				background-color: #ffffff;
				
				/*相对定位*/
				position: relative;
				
				left: 950px;
				
				top: 10px; 
				
				
			}
			
		</style>
		
	</head>
	<body>
		
		<!--头部模块-->
		<div class="top">
			
			
		</div>
		<!--中间提示-->
		<div class="tips"></div>
		<!--中间的展现-->
		<div class="center">
			
			<div class="login">
				
				
			</div>
			
			
		</div>
		<!--底部模块-->
		<div class="bottom"></div>
	</body>
</html>
<!--
	
	div本身是没有任何的含义
	
	div：作用就是把网页进行模块化的划分
	
-->

效果截图

想了解Web前端课程的同学，可以扫码添加客服微信哦

学坝教育

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
[网页编程]-10 框架标签 div

div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。是一个块级元素。这意味着它的内容自动地开始一个新行。这里是需要用CSS的,如果不懂的话,只要理解下面的代码就可以了。将一个网页进行这样划分,变成模块,然后在做编辑和布局。想了解Web前端课程的同学，可以扫码添加客服微信哦。也就是把网页划成多个格子,方便我们在每个格子里操作。
复制链接

扫一扫