CSS_Common Layout

Links to the original text: https://www.mk2048.com/blog/blog.php?id=hb2kjickj&title=CSS_%E5%B8%B8%E8%A7%81%E5%B8%83%E5%B1%80

1. A column layout - often used on the home page of a website.

html:

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

css:

 1 body{
 2             margin:0;
 3             padding: 0;
 4         }
 5         .top{
 6             height: 80px;
 7             background-color: #f19b6a;
 8         }
 9         .main,.foot{
10             width: 800px;
11             margin:0 auto;
12         }
13         .main{    
14             height: 500px;    
15             background-color: #f1b8e4;
16         }
17         .foot{
18             height: 80px;
19             background-color: #f1f1b8;
20         }

Effect:

2. Two columns (fixed width), adaptive layout

html:

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

css:

 1 body{
 2            margin:0;
 3            padding: 0;
 4        }
 5        .main{
 6            width: 800px;
 7            margin: 0 auto;
 8        }
 9        .left,.right{
10            height: 600px;
11        }
12        .left{
13            width: 20%;
14            float: left;
15            background-color:#f19b6a;
16        }
17        .right{
18            width: 80%;
19            float: right;
20            background-color: #f1b8e4;
21        }

Design sketch:

3. Three columns (fixed width), adaptive layout

HTML:

1 <div class="main">
2     <div class="left"></div>
3     <div class="middle"></div>
4     <div class="right"></div>
5 </div>

css:

 1 body{
 2            margin:0;
 3            padding: 0;
 4        }
 5        .main{
 6            width: 800px;
 7            margin: 0 auto;
 8        }
 9        .left,.right,.middle{
10            height: 600px;
11        }
12        .left{
13            width: 33.3%;
14            float: left;
15            background-color:#f19b6a;
16        }
17        .middle{
18            width: 33.3%;
19            float: left;
20            background-color:#f1f1b8;
21        }
22        .right{
23            width: 33.3%;
24            float: right;
25            background-color: #f1b8e4;
26        }

Design sketch:

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

HTML:

1 <div class="left"></div>
2     <div class="middle">
Block chain is a new application mode of computer technology, such as distributed data storage, point-to-point transmission, consensus mechanism, encryption algorithm and so on. The so-called consensus mechanism is a mathematical algorithm for building trust and gaining rights and interests among different nodes in block chain system. In May 2016, the Monetary Block Chain Research Center published the first book in China, Block Chain: Defining New Financial and Economic Patterns in the Future. It introduces the impact of block chain technology on future finance and economy. Blockchain is an important concept of Bitcoin. The "Research Report on Global Bitcoin Development 2014-2016" published by Firecoin and Internet Finance Laboratory of Wudaokou Finance College of Tsinghua University and Sina Technologies mentions that block chain is the underlying technology and infrastructure of Bitcoin [2]. It is essentially a de-centralized database and serves as the underlying technology of Bitcoin. Block chain is a series of data blocks generated by cryptographic association. Each data block contains the information of a bitcoin network transaction, which is used to verify the validity of its information (anti-counterfeiting) and generate the next block.
4     </div>
5 <div class="right"></div>

css:

 1  body{
 2            margin:0;
 3            padding: 0;
 4        }
 5        .left,.right,.middle{
 6            height: 600px;
 7        }
 8        .left{
 9            width: 200px;
10          position:absolute;
11          left: 0;
12          top:0;
13            background-color:#f19b6a;
14        }
15        .middle{
16            margin: 0 310px 0 210px;
17            background-color:#f1f1b8;
18        }
19        .right{
20            width: 300px;
21            position: absolute;
22            right: 0;
23            top:0;
24            background-color: #f1b8e4;
25        }

Design sketch:

5. Mixed Layout

html:

 1 <div class="top">
 2     <div class="header"></div>
 3 </div>
 4 <div class="main">
 5     <div class="left"></div>
 6     <div class="right">
 7         <div class="sub_left"></div>
 8         <div class="sub_right"></div>
 9     </div>
10 </div>
11 <div class='foot'></div>

css:

 1 body{
 2             margin:0;
 3             padding: 0;
 4         }
 5         .top{
 6             height: 80px;
 7             background-color: #f19b6a;
 8         }
 9         .top .header{
10             width: 800px;
11             height: 80px;
12             margin: 0 auto;
13             background-color: #e27386;
14         }
15         .main,.foot{
16             width: 800px;
17             margin:0 auto;
18         }
19         .main{    
20             height: 600px;    
21             background-color: #f1b8e4;
22         }
23         .foot{
24             height: 80px;
25             background-color: #f1f1b8;
26         } 
27         .main .left{
28             width: 200px;
29             height: 600px;
30             float: left;
31             background-color: #dcff93;
32 
33          }
34          .main .right{
35              width: 590px;/*600px No pink crevice*/
36              height: 600px;
37              float:right;
38              background-color: #b8f1cc;
39          }
40          .sub_left{
41              width: 200px;
42              height: 600px;
43              float: left;
44              background-color: #f2debd;
45          }
46          .sub_right{
47              width: 380px;/*390px No green gap in the middle*/
48              height: 600px;
49              float: right;
50              background-color: #c86f67;
51          }

Design sketch:

Tags: PHP Blockchain Database network

Posted on Fri, 06 Sep 2019 03:50:51 -0700 by dabas