HTML通过DIV+CSS属性简单首页布局教程-米微资源分享网

今天给大家写一个HTML通过CSS属性制作一个首页布局教程:

首先我们先上一段html基本格式代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

我们继续往下:

先在body属性里面添加一个大的div盒子id为da这里的id大家可以随意取值用来包住里面的的小div！

看代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<div id="da">



</div>

</body>
</html>

继续我们在这个大的div里面添加我们需要布局的小div一共7个分别给他们取相应的id值，大家可以自行看一下，这里我就不一一的列出来了:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<div id="da">

 <div id="head">我是head</div>
<div id="bao1">我是上左</div>
<div id="bao2">我是上右</div>
<div id="bao3">我是下左</div>
<div id="bao4">我是下右</div>
<div id="cle"></div>
<div id="footer">我是底部</div>

</div>

</body>
</html>

然后呢我们就要开始核心部分了，就是涉及到css了，首先在head里面添加<style> </style>在style里面添加css代码，我们先给大的div声明id，设置他的高度为1500像素，看代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>

#da{
height: 1500px;

background: #F5DEB3;
}





</style>


</head>
<body>

<div id="da">

<div id="head">我是head</div>
<div id="bao1">我是上左</div>
<div id="bao2">我是上右</div>
<div id="bao3">我是下左</div>
<div id="bao4">我是下右</div>
<div id="cle"></div>
<div id="footer">我是底部</div>

</div>

</body>
</html>

继续添加给小的div声明id高度宽度，这里我就给大家直接上代码了，大家可以去看一下小的div的属性值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AIDE技术网aidezy.com</title>


<style>
#da{
height: 1500px;

background: #F5DEB3;
}
#head{
height: 100px;
background: #EE00EE;
}

#bao1{
height: 300px;
width: 700px;
background: red;
float: left;
margin: 10px 2% 0px 2%;

}
#bao2{
height: 300px;
width: 700px;
background: blue;
float: left;
margin: 10px;

}

#bao3{
height: 100px;
width: 700px;
background: yellow;
float: left;
margin: 10px 2% 0px 2%;
}
#bao4{
height: 100px;
width: 700px;
background: #54FF9F;
float: left;
margin: 10px;
}

#cle{
height: 5px;
clear: both;
background: red;
}
#footer{
height: 60px;
background: #AEEEEE;

}

</style>

</head>

<body>

<div id="da">
<div id="head">我是head</div>
<div id="bao1">我是上左</div>
<div id="bao2">我是上右</div>
<div id="bao3">我是下左</div>
<div id="bao4">我是下右</div>
<div id="cle"></div>
<div id="footer">我是底部</div>


</div>

</body>
</html>

最后这个简单的布局就这样完成了，可能通过文字描述得不是很清楚，以后我会尽量给大家慢慢出视频教程的。最后感谢大家能够看完了！