CSS Layout Examples (float-position-Flex)
Float – position-Flex three types of layout, a case is enough, no more words, directly on the renderings
1. The layout of the Position
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
.container{
width: 1200px;
height: 1100px;
margin: 0 auto;
/* position: relative; * /
}
.header{
height: 260px;
/* width: 1200px; * /
/* position: relative; * /
background-color: #0098FE;
}
.header_title{
background-color: #0032FE;
/* width: 1200px; * /
height: 190px;
position: relative;
top: 70px;
}
.header_left{
width: 280px;
height: 100px;
background-color: #F7117E;
position: absolute;
margin:65px 50px;
}
.header_right{
height: 40px;
width: 500px;
position: absolute;
background-color: #F411F7;
right: 50px;
top: 130px;
}
.content{
height: 720px;
/* width: 1200px; * /
position: absolute;
}
.content_left{
width: 250px;
height: 700px;
position: relative;
margin-top: 10px;
background-color: #0180FB;
}
.content_left_top{
width: 250px;
height: 414px;
background-color: #0099CB;
/* position: relative; * /
}
.content_left_bottom{
width: 250px;
height: 276px;
background-color: #5785D0;
margin-top: 10px;
/* position: relative; * /
}
.content_right{
width: 200px;
height: 700px;
left: 1000px;
bottom: 10px;
position: absolute;
background-color: #0064FE;
}
.content_center{
width: 730px;
height: 700px;
position: absolute;
bottom: 10px;
left: 260px;
background-color: #867CFC;
}
.content_center_top{
height: 345px;
width: 730px;
position: relative;
background-color: #31CBFD;
}
.content_center_top_left{
height: 120px;
width: 120px;
background-color: #0000FD;
position: absolute;
top: 145px;
}
.content_center_top_center{
height: 160px;
width: 380px;
background-color: # 527136;
position: absolute;
top: 25%;
right: 25%;
}
.content_center_top_right{
height: 80px;
width: 140px;
background-color: #27FC4A;
position: absolute;
right: 0;
bottom: 0;
}
.content_center_bottom{
height: 345px;
width: 730px;
position: absolute;
top: 355px;
}
.rectangle1{
width: 50%;
height: 50%;
background-color: #FD4200;
position: absolute;
}
.rectangle2{
width: 50%;
height: 50%;
background-color: #00FD30;
position: absolute;
right: 0;
}
.rectangle3{
width: 50%;
height: 50%;
background-color: #FDED01;
position: absolute;
top: 50%;
}
.rectangle4{
width: 50%;
height: 50%;
background-color: #D8AFFE;
position: absolute;
top: 50%;
left: 50%;
}
.footer{
width: 1200px;
height: 120px;
position: relative;
top: 720px;
background-color: #0164CA;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header_title">
<div class="header_left"></div>
<div class="header_right"></div>
</div>
</div>
<div class="content">
<div class="content_left">
<div class="content_left_top"></div>
<div class="content_left_bottom"></div>
</div>
<div class="content_center">
<div class="content_center_top">
<div class="content_center_top_left"></div>
<div class="content_center_top_center"></div>
<div class="content_center_top_right"></div>
</div>
<div class="content_center_bottom">
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
<div class="rectangle4"></div>
</div>
</div>
<div class="content_right">
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Copy the code2. The flex layout
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
.container{
width: 1200px;
height: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
/* position: relative; * /
}
.header{
height: 260px;
/* width: 1200px; * /
/* position: relative; * /
background-color: #0098FE;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.header_title{
background-color: #0032FE;
/* width: 1200px; * /
height: 190px;
/* position: relative; * /
display: flex;
justify-content: space-between;
}
.header_left{
width: 280px;
height: 100px;
background-color: #F7117E;
/* position: absolute; * /
display: flex;
margin-left: 50px;
flex-direction: column;
align-self: center;
}
.header_right{
height: 40px;
width: 500px;
/* position: absolute; * /
background-color: #F411F7;
display: flex;
margin-right: 50px;
margin-bottom: 42px;
flex-direction: column;
align-self: flex-end;
}
.content{
height: 700px;
/* width: 1200px; * /
/* position: absolute; * /
display: flex;
justify-content: space-between;
}
.content_left{
width: 250px;
height: 700px;
/* position: relative; * /
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #0180FB;
}
.content_left_top{
width: 250px;
height: 414px;
background-color: #0099CB;
/* position: relative; * /
}
.content_left_bottom{
width: 250px;
height: 276px;
background-color: #5785D0;
/* position: relative; * /
}
.content_right{
width: 200px;
height: 700px;
/* position: absolute; * /
background-color: #0064FE;
}
.content_center{
width: 730px;
height: 700px;
/* position: absolute; * /
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #867CFC;
}
.content_center_top{
height: 345px;
width: 730px;
/* position: relative; * /
display: flex;
justify-content: space-between;
background-color: #31CBFD;
}
.content_center_top_left{
height: 120px;
width: 120px;
background-color: #0000FD;
/* position: absolute; * /
display: flex;
flex-direction: column;
align-self: center;
margin-top: 60px;
}
.content_center_top_center{
height: 160px;
width: 380px;
background-color: # 527136;
/* position: absolute; * /
display: flex;
flex-direction: column;
align-self: center;
}
.content_center_top_right{
height: 80px;
width: 140px;
background-color: #27FC4A;
/* position: absolute; * /
display: flex;
flex-direction: column;
align-self: flex-end;
}
.content_center_bottom{
height: 345px;
width: 730px;
/* position: absolute; * /
display: flex;
flex-wrap: wrap;
}
.rectangle1{
width: 50%;
height: 50%;
background-color: #FD4200;
/* position: absolute; * /
}
.rectangle2{
width: 50%;
height: 50%;
background-color: #00FD30;
/* position: absolute; * /
}
.rectangle3{
width: 50%;
height: 50%;
background-color: #FDED01;
/* position: absolute; * /
top: 50%;
}
.rectangle4{
width: 50%;
height: 50%;
background-color: #D8AFFE;
/* position: absolute; * /
}
.footer{
width: 1200px;
height: 120px;
/* position: relative; * /
background-color: #0164CA;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header_title">
<div class="header_left"></div>
<div class="header_right"></div>
</div>
</div>
<div class="content">
<div class="content_left">
<div class="content_left_top"></div>
<div class="content_left_bottom"></div>
</div>
<div class="content_center">
<div class="content_center_top">
<div class="content_center_top_left"></div>
<div class="content_center_top_center"></div>
<div class="content_center_top_right"></div>
</div>
<div class="content_center_bottom">
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
<div class="rectangle4"></div>
</div>
</div>
<div class="content_right">
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Copy the code3. The float layouts
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
.container{
width: 1200px;
height: 1100px;
margin: 0 auto;
}
.header{
height: 260px;
width: 1200px;
float: left;
background-color: #0098FE;
}
.header_title{
background-color: #0032FE;
width: 1200px;
height: 190px;
float: left;
margin-top: 70px;
}
.header_left{
width: 280px;
height: 100px;
background-color: #F7117E;
float: left;
margin:65px 50px;
}
.header_right{
height: 40px;
width: 500px;
float: right;
background-color: #F411F7;
margin: 130px 50px;
}
.content{
height: 720px;
width: 1200px;
float: left;
}
.content_left{
width: 250px;
height: 700px;
float: left;
margin-top: 10px;
background-color: #0180FB;
}
.content_left_top{
width: 250px;
height: 414px;
background-color: #0099CB;
float: left;
}
.content_left_bottom{
width: 250px;
height: 276px;
background-color: #5785D0;
margin-top: 10px;
float: left;
}
.content_right{
width: 200px;
height: 700px;
float: right;
margin-top: 10px;
background-color: #0064FE;
}
.content_center{
width: 730px;
height: 700px;
float: left;
margin: 10px 10px;
background-color: #867CFC;
}
.content_center_top{
height: 345px;
width: 730px;
float: left;
background-color: #31CBFD;
}
.content_center_top_left{
height: 120px;
width: 120px;
background-color: #0000FD;
float: left;
margin-top: 145px;
}
.content_center_top_center{
height: 160px;
width: 380px;
background-color: # 527136;
margin: 100px auto;
}
.content_center_top_right{
height: 80px;
width: 140px;
background-color: #27FC4A;
float: right;
margin-top: 265px;
}
.content_center_bottom{
height: 345px;
width: 730px;
float: left;
margin-top: 10px;
}
.rectangle1{
width: 50%;
height: 50%;
background-color: #FD4200;
float: left;
}
.rectangle2{
width: 50%;
height: 50%;
background-color: #00FD30;
float: right;
}
.rectangle3{
width: 50%;
height: 50%;
background-color: #FDED01;
float: left;
}
.rectangle4{
width: 50%;
height: 50%;
background-color: #D8AFFE;
float: right;
}
.footer{
width: 1200px;
height: 120px;
float: left;
background-color: #0164CA;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header_title">
<div class="header_left"></div>
<div class="header_right"></div>
</div>
</div>
<div class="content">
<div class="content_left">
<div class="content_left_top"></div>
<div class="content_left_bottom"></div>
</div>
<div class="content_right">
</div>
<div class="content_center">
<div class="content_center_top">
<div class="content_center_top_left"></div>
<div class="content_center_top_right"></div>
<div class="content_center_top_center"></div>
</div>
<div class="content_center_bottom">
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
<div class="rectangle4"></div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Copy the code