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:

      
  
 
头部
 
中部
 
底部
 
  

Next we need to give the middle and bottom of the head Add styles respectively, the complete code is as follows:

      
  
 
头部
 
 
左边
 
右边
 
 
底部
 
  

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