CSS로 레이아웃을 구현할 때 사용할 수 있는 몇 가지 기술(코드)
- 不言원래의
- 2018-08-09 17:38:101691검색
이 글의 내용은 CSS 레이아웃을 구현할 때 사용할 수 있는 몇 가지 기술(코드)에 대한 내용이며, 필요한 친구들이 참고할 수 있기를 바랍니다.
익숙한 레이아웃을 마주함
측면은 중앙에 고정되어 어댑티브하고, 머리는 중앙에 고정되어 어댑티브하며, 패널 컴포넌트와 모델 컴포넌트는 외관상 유사합니다
프론트엔드 프레임워크 부트스트랩이 있습니다 , easyui는 이러한 구성 요소 플러그인을 제공합니다. 사용하는 과정에서 UI에 그려진 페이지에는 글꼴, 높이, 배경색 등 항상 약간의 차이가 있습니다.
오늘은 빠르게 사용자 정의하는 방법을 요약하겠습니다. 레이아웃 및 개발 효율성 향상
옵션 1: 위치 지정을 사용하여 위의 고정 중간 자동 달성 레이아웃에 적응
#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;
}
}원리: border-top을 사용하여 상단 높이를 차지하고 위치의 상단 설정인 @header_height를 사용하여 위치를 푸시합니다. back
옵션 2: 측면 고정 중간 적응형 레이아웃을 구현하려면 float, padding, margin을 사용하세요
<!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 : 측면 너비를 차지하려면 padding을 사용하고, 측면 위치로 돌아가려면 측면 여백 설정 -@side_width를 사용하세요
패널 레이아웃: 원칙은 옵션 1과 유사합니다. 또한 모달은 이 레이아웃 방법을 참조할 수도 있습니다
html 구조
<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 설정
@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;
}
}관련 권장 사항:
CSS에서 수직 및 수평 중앙 정렬을 달성하는 방법 요소의 크기를 알 수 없는 경우(코드)
Css3에서 사용자 정의 스크롤 막대 스타일을 구현하는 방법은 무엇입니까? (코드)
위 내용은 CSS로 레이아웃을 구현할 때 사용할 수 있는 몇 가지 기술(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!