div
关于div的简单布局
<body>
<div>
</div>
</body>
- div中如果没有填充内容不会显示出来，只有填充内容了才会被体现
- div 可以设置属性，用style设置 背景颜色（background），宽度（width），高度(height)等基本的属性。
- 当学会盒子模型反过来想就会觉得很简单了，可以更丰富的进行div的布局以及内容的排版等等。
4.在div布局中，不同的浏览器会默认显示页面的边框，导致网页上浏览的内容会多出来一些边框，所以可以设置margin（外边距）和padding（内边距）为0，这样页面就会填充整个浏览器。
<style>
*{
margin: 0;
padding: 0;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1{
color: red;
}
.to{
background-color: greenyellow;
height: 100px;
width: 100%;
}
.main{
background-color: gray;
height: 600px;
width: 70%;
float: left;
}
.right{
background-color: yellow;
height: 600px;
width: 30%;
float: left;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="to">
<h1 align="center"> 向右 </h1>
</div>
<div class="main">
main
</div>
<div class="right">
right
</div>
</body>
</html>
显示如图：
简单的div布局效果
小白解释：
这篇笔记是学完这一周之后再补充自己复习的笔记，所以会结合一些去写，实际div的操作还有很多功能。新手练习可以直接在div后面进行操作，哈哈哈 我还是新手！！！
<body>
<div style=" background-color: red; width:100px; height:100px">
</div>
</body>
学习体验：
互联网学习资料：
IT小白教程1-w3cschool
IT小白教程2-RUNOOB.COM
网友评论