[网页编程]-10 框架标签 div
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：作用就是把网页进行模块化的划分
-->
效果截图
网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
赞同 0
评论 0 条