콘텐츠
콘텐츠
2. 사진, 아이콘 폰트 등의 상하 어긋남을 조정합니다.
5. 자식 DIV는 magin-top을 사용하고 부모 DIV와 자식 DIV는 동시에 아래로 이동합니다.
참고: 공백: nowrap; 코드는 맨 위 위치의 맨 아래에 영향을 줍니다. 고정;
여덟, div가 줄 바꿈되지 않고 초과 부분이 숨겨집니다.
div는 투명하지만 div의 내용은 투명하지 않습니다.
10. 왼쪽 상단의 이전 페이지로 돌아가기 [왼쪽 화살표]
마지막으로, 글꼴이 멋진 일반적으로 사용되는 아이콘 코드
먼저 div가 왼쪽과 오른쪽 중앙에 배치됩니다.
1, div 및 기타 블록 요소는 왼쪽과 오른쪽 중앙에 위치합니다.
여백: 0 자동;
margin: 0 auto;2. span과 같은 행 수준 요소는 왼쪽과 오른쪽 중앙에 배치됩니다.
텍스트 정렬: 가운데;
text-align: center;2. 사진, 아이콘 폰트 등의 상하 어긋남을 조정합니다.
상대 위치: 위치:상대
{
position:relative; /* 相对定位 */
left:10px;
top:10px
}3, div 하단 또는 상단 상단
position: fixed; /* 浏览器定位 */
top: 10px;4. 좌우 탄성 상자의 비례 분포
1, 아버지 div
/* 父div */
.PayList_row {
display: flex;
flex-direction: row;
}
2, 아이 div
.PayList{
width: 0px;
flex-grow: 2;
background-color: aqua;
}5. 자식 DIV는 magin-top을 사용하고 부모 DIV와 자식 DIV는 동시에 아래로 이동합니다.
子div：magin-top:10px
父div：padding-top: 1px;여섯, 체크박스 체크박스의 커스텀 스타일
1. HTML 코드
<span class="checkbox_span">
<input type="checkbox" class="Checkbox" id="check3">
<label for="check3" class="checkbox_label"></label>
</span>2. CSS 코드
<link rel="stylesheet" href="css/CheckBox.css">
/* 圆圈样式 */
.Checkbox+.checkbox_label {
width: 23px;
height: 23px;
}
/* 对勾样式 */
.Checkbox:checked+.checkbox_label:after {
left: -1px;
top: -1px;
width: 25px;
height: 25px;
font-weight:900;
font-size: 16px;
line-height: 25px;
}7. 하단 버튼 코드
참고: 공백: nowrap; 코드는 맨 위 위치의 맨 아래에 영향을 줍니다. 고정;
1. HTML 코드
<!-- 底部按钮 -->
<div>
<button id="btn_bottom">确认付款</button>
</div>
2. CSS 코드
#btn_bottom {
background-color: rgb(254, 95, 43);
width: 100%;
height: 55px;
color: white;
font-size: 18px;
position: fixed;
bottom: 0;
left: 0;
border: 0px;
}여덟, div가 줄 바꿈되지 않고 초과 부분이 숨겨집니다.
overflow: hidden;
white-space: nowrap;Nine, DIV 반투명 효과
.aaa{
filter:alpha(Opacity=80); /* IE有效 */
-moz-opacity:0.5; /* 火狐浏览器有效，IE无效 */
opacity: 0.5; /* 除IE外，所有浏览器都有效 */
} div는 투명하지만 div의 내용은 투명하지 않습니다.
background:rgba(0,0,0,0.2);10. 왼쪽 상단의 이전 페이지로 돌아가기 [왼쪽 화살표]
CSS 코드
/* #region === 【返回箭头】===*/
#ReturnPage {
width: 30px;
height: 30px;
background-color: rgb(69, 69, 69,0.6);
border-radius: 50px;
color: white;
font-size: 25px;
line-height: 15px;
text-align: center;
position: fixed;
top: 10px;
margin-left: 10px;
}
#ReturnPage i {
position: relative;
top: 1px;
left: -1px;
}
/* #endregion */멋진 글꼴 아이콘 파일을 소개합니다
<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">HTML 코드
<!-- 返回箭头 -->
<a href="javascript:window.history.go(-1)">
<div id="ReturnPage">
<i class="fa fa-angle-left"></i>
</div>
</a>11. CSS 블록 코드 주석 및 라인 스페이서 코드
/* #region === 【】=== */
/* #endregion */분할선
.line_1 {
height: 1px;
background-color: rgb(250, 250, 250);
}
.line_2 {
height: 4px;
background-color: rgb(250, 250, 250);
}
.line_3 {
height: 8px;
background-color: rgb(250, 250, 250);
}
<div class="line_3"></div>12. 제목 글꼴 이름 font-family 지정
<style>
@font-face {
font-family: "myfont";
src: url('css/fonts/Hiti.otf');
}
.div{
font-family: "myfont";
}
</style>마지막으로, 글꼴이 멋진 일반적으로 사용되는 아이콘 코드
1. 견적
<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">2. 공통 아이콘
<i class="fa fa-angle-left"></i> 左箭头<br />
fa-map-marker 
fa-angle-double-down 
fa-chevron-circle-left
fa-chevron-up 
fa-heart 
fa-heart-o 
fa-times 
fa-close
fa-check 
fa-comment-o 
fa-commenting-o 
fa-commenting
fa-cog 
fa-camera 
fa-bars 
fa-image 
fa-info-circle
fa-sort-down 
fa-street-view 
fa-tag 
fa-users 
fa-list-ul
fa-user 
fa-user-circle-o 
fa-user-o 
fa-user-plus 
fa-yen
fa-minus-square 
fa-minus-square-o 
fa-plus-square 
fa-plus-square-o
fa-th-large 
fa-table 
fa-th-large 
fa-rotate-left 
fa-share-alt
fa-share-alt-square 
fa-star 
fa-star-half-o 
fa-star-o 
fa-remove 
fa-plus
fa-paper-plane 
fa-pencil-square-o 
fa-paint-brush 
fa-paper-plane-o
fa-phone 
fa-phone-square 
fa-envelope 
fa-envelope-o
fa-diamond 
fa-drivers-license-o 
fa-신용 카드
fa-check-circle- 
fa-circle-thin