HTML+CSS Easy to Start Box Model Border (Part 2)
Usually we rarely add borders to p tags, but when designing, we add borders to div tags, so that they look more obvious.
Let’s do an example below: For example, on the home page of the website, the middle part of the head (divided into two parts) and the bottom part, how do we implement a layout style like this?
First we need to give a large div, and place both the middle part of the head and the bottom here. In this div, we need to make a css style for the first div, and then add 3 div tags to this div.
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px;
height:500px;
border:1px solid red;
margin:0 auto; /*居中*/
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">头部</div>
<div id="cen">中部</div>
<div id="but">底部</div>
</div>
</body>
</html>Next we need to give the middle and bottom of the head Add styles respectively, the complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px; height:500px;border:1px solid red;margin:0 auto; /*居中*/text-align:center;
}
#top{
width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px;
}
#cen{
width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px;
}
#but{
width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px;
}
#left{
width:200px;
height:198px;
border:1px solid green;
margin-left:5px;
float:left;
}
#right{
width:570px;
height:198px;
border:1px solid black;
float:right;
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">头部</div>
<div id="cen">
<div id="left">左边</div>
<div id="right">右边</div>
</div>
<div id="but">底部</div>
</div>
</body>
</html>Note: The border should also be divided into upper, lower, left and right
border-top upper
border-left left
border-right right
border-buttom next
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~ 