content
content
First, the div is centered left and right
2. Adjust the upper and lower dislocation of pictures, icon fonts, etc.
4. Proportional distribution of left and right elastic boxes
5. The child DIV uses magin-top, and the parent DIV and child DIV move down at the same time
Six, the custom style of the Checkbox checkbox
Note: white-space: nowrap; code affects the bottom of the top pposition: fixed;
Eight, div does not wrap, the excess part is hidden
The div is transparent, but the content in the div is not transparent
10. Return to the previous page on the upper left side [left arrow]
Finally, font-awesome commonly used icon code
First, the div is centered left and right
1, div and other block elements centered left and right
margin: 0 auto;
margin: 0 auto;
2. Row-level elements such as span are centered left and right
text-align: center;
text-align: center;
2. Adjust the upper and lower dislocation of pictures, icon fonts, etc.
Relative positioning: position:relative
{
position:relative; /* 相对定位 */
left:10px;
top:10px
}
Three, div bottom or top top
position: fixed; /* 浏览器定位 */
top: 10px;
4. Proportional distribution of left and right elastic boxes
1, father div
/* 父div */
.PayList_row {
display: flex;
flex-direction: row;
}
2, child div
.PayList{
width: 0px;
flex-grow: 2;
background-color: aqua;
}
5. The child DIV uses magin-top, and the parent DIV and child DIV move down at the same time
子div:magin-top:10px
父div:padding-top: 1px;
Six, the custom style of the Checkbox checkbox
1. html code
<span class="checkbox_span">
<input type="checkbox" class="Checkbox" id="check3">
<label for="check3" class="checkbox_label"></label>
</span>
2. css code
<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. Bottom button code
Note: white-space: nowrap; code affects the bottom of the top pposition: fixed;
1. html code
<!-- 底部按钮 -->
<div>
<button id="btn_bottom">确认付款</button>
</div>
2. css code
#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;
}
Eight, div does not wrap, the excess part is hidden
overflow: hidden;
white-space: nowrap;
Nine, DIV translucent effect
.aaa{
filter:alpha(Opacity=80); /* IE有效 */
-moz-opacity:0.5; /* 火狐浏览器有效,IE无效 */
opacity: 0.5; /* 除IE外,所有浏览器都有效 */
}
The div is transparent, but the content in the div is not transparent
background:rgba(0,0,0,0.2);
10. Return to the previous page on the upper left side [left arrow]
css code
/* #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 */
Introduce font-awesome icon file
<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">
html code
<!-- 返回箭头 -->
<a href="javascript:window.history.go(-1)">
<div id="ReturnPage">
<i class="fa fa-angle-left"></i>
</div>
</a>
11. CSS block code comments and Line spacer code
/* #region === 【】=== */
/* #endregion */
Dividing line
.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. Specify the title font name font-family
<style>
@font-face {
font-family: "myfont";
src: url('css/fonts/Hiti.otf');
}
.div{
font-family: "myfont";
}
</style>
Finally, font-awesome commonly used icon code
1. Quote
<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">
2. Common icons
<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-credit-card
fa-check-circle
fa-circle-thin