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后面进行操作,哈哈哈 我还是新手!!!
<body>
<div style=" background-color: red; width:100px; height:100px">
</div>
</body>
学习体验:
互联网学习资料:
IT小白教程1-w3cschool
IT小白教程2-RUNOOB.COM