A summary of the use of common layouts in CSS

1. A list of layouts-often used in the homepage of the website.

Html:

1 <div class= "Top" ></div>2 <div class= "main" ></div>3 <div class= ' foot ' ></div>

Css:

body{            margin:0;            padding:0;        }        . top{            height:80px;            Background-color: #f19b6a;        }        . main,.foot{            width:800px;            margin:0 auto;        }        . main{                height:500px;                Background-color: #f1b8e4;        }        . foot{            height:80px;            Background-color: #f1f1b8;        }

Effect:

2. Two columns (fixed width), adaptive layout

Html:

1 <p class= "main" >2 <p class= "left" ></p>3 <p class= "right" ></p>4 </p>

Css:

body{           margin:0;           padding:0;       }       . main{           width:800px;           margin:0 auto;       }       . left,.right{           height:600px;       }       . left{           width:20%;           Float:left;           Background-color: #f19b6a;       }       . right{           width:80%;           Float:right;           Background-color: #f1b8e4;       }

：

3. Three columns (fixed width), adaptive layout

Html:

1 <p class= "main" >2     <p class= "left" ></p>3     <p class= "Middle" ></p>4     <p class= "right" ></p>5 </p>

Css:

body{           margin:0;           padding:0;       }       . main{           width:800px;           margin:0 auto;       }       . left,.right,.middle{           height:600px;       }       . left{           width:33.3%;           Float:left;           Background-color: #f19b6a;       }       . middle{           width:33.3%;           Float:left;           Background-color: #f1f1b8;       }       . right{           width:33.3%;           Float:right;           Background-color: #f1b8e4;       }

：

4. Three column layout, middle adaptive, fixed width on both sides: Position:absolute;

Html:

1 <p class= "left" ></p>2     <p class= "Middle" >3     Blockchain is a new application mode of distributed data storage, point-to-point transmission, consensus mechanism, encryption algorithm and other computer technology. The so-called consensus mechanism is a mathematical algorithm for establishing trust and acquiring equity among different nodes in a blockchain system [1]  . In May 2016, the currency Blockchain Research Center published the first book "Blockchain: Defining a new pattern of future finance and economy" in China. This paper introduces the impact of blockchain technology on financial and economic future. Blockchain (Blockchain) is an important concept of Bitcoin, and the "2014-2016 Global Bitcoin Development Research Report", published by the Internet Finance Laboratory and Sina Science and technology, five, Tsinghua University, said that blockchain is the underlying technology and infrastructure of Bitcoin [2]  . Essentially a de-centralized database, as well as the underlying technology of Bitcoin. A blockchain is a series of data blocks that are associated with a cryptographic method, each of which contains information about a bitcoin network transaction, used to verify the validity of its information (anti-counterfeiting), and to generate the next chunk. 4     </p>5 <p class= "right" ></p>

Css:

body{           margin:0;           padding:0;       }       . left,.right,.middle{           height:600px;       }       . left{           width:200px;         Position:absolute;         left:0;         top:0;           Background-color: #f19b6a;       }       . middle{           margin:0 310px 0 210px;           Background-color: #f1f1b8;       }       . right{           width:300px;           Position:absolute;           right:0;           top:0;           Background-color: #f1b8e4;       }

：

5. Mixed layout

Html:

1 <p class= "Top" >  2     <p class= "header" ></p>  3 </p>  4 <p class= "main" >  5     <p class= "left" ></p>  6     <p class= "right" >  7         <p class= "Sub_left" ></p>  8         <p class= "Sub_right" ></p>  9     </p> Ten </p> one <p class = ' Foot ' ></p>

Css:

body{margin:0;        padding:0;            }. top{height:80px;        Background-color: #f19b6a;            }. Top. header{width:800px;            height:80px;            margin:0 Auto;        Background-color: #e27386;            }. main,.foot{width:800px;        margin:0 Auto;                }. main{height:600px;        Background-color: #f1b8e4;            }. foot{height:80px;        Background-color: #f1f1b8;            }. Main. left{width:200px;            height:600px;            Float:left;         Background-color: #dcff93;             }. Main. right{width:590px;/*600px no pink slit */height:600px;             Float:right;         Background-color: #b8f1cc;             }. sub_left{width:200px;             height:600px;             Float:left;      Background-color: #f2debd;   }. sub_right{width:380px;/*390px There is no middle green gap */height:600px;             Float:right;         Background-color: #c86f67; }

：