What is adaptive?
Adaptive : Make the same page automatically adapt to devices of different sizes, thus solving the problem of providing different versions of pages for different devices.
Responsive Layout : Solve the problem of rendering the same web page on devices of different sizes
Two column adaptive layout
1. In the Html structure - two
left and right boxes; 2. Fixed width on the left, 100% width on the right;
3. Set position:absolute for the left box;
4. Add sub-boxes for the right box, set padding-left, attributes The value is the width of the left box.
page:
code:
<!DOCTYPE html>
<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>LiuQing</title>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.left {
position: absolute;
left: 0;
width: 300px;
background-color: red;
color: #fff;
height: 100%;
}
.right {
background-color: pink;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
But I found a problem that the text of the right box cannot be seen, because the left box is out of the document flow, and the level is higher than the right box.
Although we haven't learned flex yet, we can open up how to write it in advance:
<!DOCTYPE html>
<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>LiuQing</title>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
}
.left {
width: 300px;
background-color: red;
color: #fff;
height: 100%;
}
.right {
flex: 1;
background-color: pink;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
Page effect:
Holy Grail Layout — Three Column Layout
1. In the Html structure – first the main content and then the sidebar
2. Set width: 100% for the middle content width of the fixed width on both sides;
3. Add float: left between the theme content and the left and right sidebars respectively
4. Set margin on the left side -left: -100%;
5. Set margin-left on the right side: - its own width;
6. Expose the middle content on the outer big box padding: 0 Width of the right side 0 Width of the left side;
7. Set position:relative for the left side and right side respectively; set left”-the width of the left side; restore the left side. Set right:-the width of the right side; restore the right side
It is mainly realized by floating and padding attributes. Although the above method can be realized, it is too complicated and will not be implemented here. Hahahahahaha... Let's look at the
flex implementation:
<!DOCTYPE html>
<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>LiuQing</title>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
}
.left {
width: 300px;
background-color: red;
color: #fff;
height: 100%;
}
.center {
flex: 1;
background-color: pink;
color: #fff;
height: 100%;
}
.right {
width: 300px;
height: 100%;
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>
</html>
Double Flying Wing Layout – Three Column Layout
1. In the Html structure – first the main content and then the side;
2. Set width: 100% for the middle content width of the fixed width on both sides;
3. Add float: left between the theme content and the left and right sidebars;
4. Left setting margin-left: -100%; Pull the left side to the far left
5. Set margin-left:-self width on the right side; Pull the right side to the far right
6. Set margin: 0 on the sub-box of the main content side width 0 left width; expose the middle content
It is almost the same as the Holy Grail layout, and I still recommend flex.
contour layout
1. Offset the inner and outer spacing, set overflow:hidden for the parent element;
realize that each column requires
background color to be expanded by padding
padding-bottom: 1000px; each column uses padding to expand
margin-bottom: -1000px; each column
is offset by margin Parent box home overflow:hidden;
Advantages: Simple structure, compatible with all browsers
Disadvantages: Pseudo-contour, margin and padding values need to be controlled reasonably
2. Use the characteristics of the content to expand the parent element, add a corresponding container for each column, nest each other, and add a background color to each container every day. Three nested
divs are responsible for the background, and the three columns are placed in the innermost In the div box;
allocate the position of the background of the three columns through relative positioning;
move the content to the position of the corresponding background through the negative value of the margin;
overflow and hide the parent element;
advantages and disadvantages: good scalability, self-adaptation, complex structure nesting
<div class="box"> overflow:hidden超出隐藏
<div class="wrap1">
<div class="wrap2"> 置背景 position:ralative left:200px 使背景显示出来
<div class="wrap3"> 设置背景 设置背景 position:ralative left:500px 使背景显示出来
<div class="left">左边</div> 设置宽度 左浮动 200px margin-left=-700px
<div class="conter">中间</div>设置宽度 左浮动 500px margin-left=-500px
<div class="right">右边</div>设置宽度 左浮动 300px
</div>
</div>
</div>
</div>
They are all the height of the content, so the height will be unified.
The background is in wrap1, wrap2, and wrap3. Use relative positioning to achieve the width of the background color, and use a negative margin value to match the content and the background.