Home >Web Front-end >CSS Tutorial >Several techniques that can be used when implementing layout with css (code)
Several techniques that can be used when implementing layout with css (code)
- 不言Original
- 2018-08-09 17:38:101782browse
The content of this article is about several techniques (code) that can be used when implementing CSS layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Faced with a familiar layout
The sides are fixed and the middle is adaptive, the head is fixed and the middle is adaptive, the panel component and the model component are similar in appearance
We have a front-end framework Both bootstrap and easyui provide these component plug-ins. During the use process, there are always some slight differences with the page drawn by UI, such as: font, height, background color
Today we will summarize how to quickly customize the layout , improve development efficiency
Option 1: Use positioning to implement the above fixed middle adaptive layout
#section{
position: fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
.top{
position: fixed;
top:0;
left: 0;
height: @header_height;
width: 100%;
}
.main{
position:relative;
top:-@header_height;
left:0;
height:100%;
border-top:@header_height solid transparent;
}
}Principle: Use border-top to occupy the top height, and use the top setting of position-@header_height to top the position Go back
Option 2: Use float, padding, and margin to achieve side-fixed middle adaptive layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding layout demo</title>
<style type="text/css">
* html #container{
height:1%; /* So IE plays nice */
}
html{
height: 100%;
}
body{
height: 100%;
margin:0;
}
#container{
background-color:#0ff;
overflow:hidden;
height: 100%;
padding-right:220px; /* 宽度大小等与边栏宽度大小*/
}
#content{
background-color:yellow;
width:100%;
float:left;
height: 100%;
}
#sidebar{
background-color:#f00;
width:220px;
float:left;
height: 100%;
margin-right:-220px;
}
</style>
</head>
<body>
<p id="container">
<p id="content">Main content section
</p>
<p id="sidebar">Right Sidebar </p>
</p>
</body>
</html>Principle: Use padding to occupy the side width, and use the side margin setting-@side_width return Go to the side position
Panel layout: The principle is similar to option 1. In addition, modal can also refer to this layout method
html structure
<p class="panel">
<p class="panel-header">
<span class="panel-title-self">今日庭审</span>
</p>
<p class="panel-body">
<p class="trial">
</p>
</p>
</p>css setting
@panel-title-font-size:1rem;
@panel-title-color:#fff;
@panel-title-bg:#30A7FF;
@panel-title-height:2.7rem;
.panel-title-self{
color: @panel-title-color;
font-size: @panel-title-font-size;
background-color: @panel-title-bg;
height: @panel-title-height;
}
.panel{
height: 100%;
border: 1px solid #ddd;
margin: 0;
position: relative;
box-shadow: 3px 3px 3px 3px #ddd;
.panel-header{
background:@panel-title-bg;
padding-left: 10px;
height: @panel-title-height;
line-height: @panel-title-height;
display: flex;
align-items: center;
img{
margin: 0 5px;
}
}
.panel-body{
height: 100%;
width: 100%;
box-sizing: border-box;
border-top:@panel-title-height solid transparent;
padding: 0;
position: relative;
top:-@panel-title-height;
}
}Related recommendations:
How to implement a custom scroll bar style in css3? (Code)
The above is the detailed content of Several techniques that can be used when implementing layout with css (code). For more information, please follow other related articles on the PHP Chinese website!