div is a block level element, which is mainly used as a large framework layout, such as dividing the web page into left, middle and right structures.
That is to say, the skeleton of web page is mainly set up by div, while the flesh and blood of web page is completed by span, p or ul.
The code example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softdewhy.com/" />
<title>Interest tribe</title>
<style type="text/css">
body{background:#ffcc99;}
#header {
margin:0px auto;
width:1000px;
height:100px;
background:#FFFFCC;
}
#menu {
margin:5px auto;
width:1000px;
height:30px;
line-height:30px;
color:#99FF99;
font-weight:bold;
font-size:14px;
background:#6699FF;
}
#content {
margin:5px auto;
width:1000px;
height:400px;
background-color:#cccccc;
}
.content_left {
float:left;
width:200px;
height:400px;
background:#cc99ff;
}
.content_center {
float:left;
width:590px;
height:400px;
margin-left:5px;
background:#cc99ff;
}
.content_right {
float:left;
width:200px;
height:400px;
margin-left:5px;
background:#cc99cc
}
#footer1 {
margin:5px auto;
background-color:#5185E6;
color:#FFFFFF;
border-top:0px solid #F7F7F6;
height:30px;
line-height:30px;
width:1000px;
padding:5px 0;
text-align:center;
}
#footer2 {
margin:5px auto;
background-color:#3333FF;
color:#FFFFFF;
border-top:0px solid #F7F7F6;
height:30px;
line-height:30px;
width:1000px;
padding:5px 0;
text-align:center;
}
a{text-decoration:none;}
</style>
</head>
<body>
<div id="header">Page header</div>
<div id="menu"> </div>
<div id="content">
<div class="content_left">Left column</div>
<div class="content_center">Intermediate content</div>
<div class="content_right">Right column</div>
</div>
<div id="footer1">Scroll information bar</div>
<div id="footer2">bottom</div>
</body>
</html>
If you are still confused in the programming world and don't know your future plan, you can join the advanced learning and internal pushing communication group 685910553( Front end data sharing ) It can communicate with God and get out of confusion.
Novices can get learning materials free of charge to see how their predecessors keep updating the latest tutorials and learning methods in the programming world (detailed front-end project practical teaching video),
If you want to learn the web front-end, or change careers, or college students, or if you want to improve your ability at work, you are welcome to join us