コンテンツ
コンテンツ
2.画像、アイコンフォントなどの上下のずれを調整します。
5.子DIVはmagin-topを使用し、親DIVと子DIVは同時に下に移動します
注：空白：nowrap;コードは上部の位置の下部に影響します：修正済み;
divは透過的ですが、div内のコンテンツは透過的ではありません
最後に、フォント-素晴らしい一般的に使用されるアイコンコード
まず、divは左右の中央に配置されます
1、divおよびその他のブロック要素は左右中央に配置されます
マージン：0自動;
margin: 0 auto;2.スパンなどの行レベルの要素は左右中央に配置されます
text-align：center;
text-align: center;2.画像、アイコンフォントなどの上下のずれを調整します。
相対ポジショニング：position：relative
{
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;6、チェックボックスチェックボックスのカスタムスタイル
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;
}8、divはラップせず、余分な部分は非表示になります
overflow: hidden;
white-space: nowrap;ナイン、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 */font-awesomeアイコンファイルを紹介します
<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- 
downfa-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- 
diamondfa-drivers-license- 
ofa-クレジットカード
fa-check- 
circlefa-circle-thin