よく使われるCSSスタイル（レイアウト）の詳しい説明

よく使われるCSSスタイル（レイアウト）の詳しい説明

新しいCSS3プロパティと互換性あり

CSS3では、プラグインprefixfree.min.jsを使用して、ブラウザ互換のプロパティをCSS3関連のプロパティに自動的に追加できるため、新しいCSS3プロパティごとにプロパティを追加する必要がありません（多数のCSS3プロジェクトが必要な場合に導入されます）。

コンテンツレイアウト

h5 がアプリに埋め込まれると、iso モバイル フォンの下で、下部の固定ボタン (ヘッド) が一緒にスクロールします。コンテンツ レイアウトを使用し、 padding-bottomまたはpadding-topを使用して、対応する位置を空のままにする必要があります。 ！ ！

コンテンツ内をスクロールする必要がある場合は、body と html を height: 100%; に設定し、コンテンツ内をスクロールできるようにコンテンツも height: 100%; に設定する必要があります。body 内をスクロールする必要がある場合は、html と body の height: 100%; 設定を削除する必要があります。 ！そうしないと、本文が制限され、コンテンツの半分しか表示されず、スクロールできなくなります。 ！ ！

ポップアップ マスク レイヤーの下部のスクロール問題を解決する別の方法は、ポップアップ ウィンドウが表示されたときに js を通じて下のコンテンツをbody{height:100%;overflow:hidden;}に制御し、ポップアップ ウィンドウを閉じるときにこのスタイルを削除することです。 ！ ！

<本文>
     <ヘッダー></ヘッダー>
     <div class="content"></div>
     <フッター></フッター>
</本文>
。コンテンツ {
    パディングトップ: .88rem;
    -webkit-box-sizing: 境界線ボックス;
    -moz-box-sizing: 境界線ボックス;
    ボックスのサイズ: 境界線ボックス;
    最大幅: 750px;
    幅: 100%;
    マージン: 0 自動;
    オーバーフロー-x:非表示;
    高さ: 100%;
    オーバーフロー-y: 自動;
    -webkit-オーバーフロースクロール: タッチ;

このレイアウト方法は、単一のページをスクロールしているときに、ポップアップ ウィンドウをクリックするとブロックされるという問題を解決できます。 ！ ！

注意: 本文の高さを計算する必要がある場合は使用できません。また、ページにフォームがある場合は、Android キーボードがブロックされないように position: relative を使用する必要があります。 ！ ！ ！ただし、ポップアップ ウィンドウがスクロールしない問題を解決するには、ポップアップ ウィンドウが表示されたときにコンテンツ レイアウトを追加し、ポップアップ ウィンドウが閉じられたときにコンテンツ レイアウトを削除します。 ！ ！

 //クリックして受け取る $(".reward-btn").click(function(){
            $(".reward-page").wrap("<div class='contentS'></div>");
            $(".保険ボックス").show();
            $(".dialog2").show();
            
        });
        //クリックすると大きなポップアップウィンドウのボタンが閉じます $(".closeDia").click(function(){
            $(this).parent().parent().hide();
            $(".dialog2").hide();
            $(".reward-page").unwrap("<div class='contentS'></div>");
        });

シナリオ 2: コンテンツ レイアウトで、ページの背景画像を設定する必要があります。コンテンツの下に大きな div をラップし、この div にページ全体の背景画像を設定できます。この方法では、コンテンツ コンテナーに背景画像を直接設定するのではなく、コンテンツが 1 画面を超えると背景画像がスクロールします。このコンテナーに背景画像を直接設定すると、背景画像はスクロールしません。

共通ヘッダーレイアウト

両側にテキストやアイコンがある場合もありますが、真ん中のタイトルは中央に固定されており、おおよその位置は以下のようになっていますが、内容は変わります！ ！

レイアウトは以下のとおりです

<div class="head"> <a class="head-left">設定</a> パーソナルセンター <a class="head-right">その他</a></div>

css:
。頭{
    位置:相対;
    幅:100%;
    高さ:88px;
    行の高さ:88px;
    テキスト配置:中央;
}
.head-left、.head-right{
    位置:絶対;
    高さ:88px;
    行の高さ:88px;
}
.head-left {
    左:30px;
}
.head-right {
    右:30px;
}

アナログプルアップロード

  $(window).scroll(関数() {
                var winH = $(window).height();
                var scrH = $(window).scrollTop();
                var htmH = $(document).height();
                //マスク レイヤーの半分までスクロールする問題を解決します$(".fixed").height(htmH);
                
                if(winH + scrH >= htmH) {
                    console.info(タブアクティブ);
                    タブアクティブ==0の場合
                        コンソール.info(1111);
                        if(次のページ){
                            ajax_lock が true の場合
                            {
                                ajax_lock = false;
                                ページ++;
                                レコードを取得します(ページ、0);
                                
                            }
                        }
                    }
});

1. チェックボックスを美しくする

効果

HTMLコード

<ラベル>
<input id="rememberPwdCheck" class="チェックボックスを非表示" type="チェックボックス" チェック済み="チェック済み">
<i class="icon icon-checkbox"></i>
<span class="rememberPwdtxt">アカウントのパスワードを記憶する</span>
</ラベル>

CSSコード

。隠れた {
     表示: なし;
}
.checkbox:チェック済み ~.icon-checkbox {
    背景: url(../images/yes_15.png) 繰り返しなし;
    背景サイズ: 0.3rem 0.25rem;
}
.アイコンチェックボックス{
    幅: 0.3rem;
    高さ: 0.3rem;
    右マージン: 0.1rem;
    境界線: 0.02rem 実線 #d7d7d7;
    境界線の半径: 0.06rem;
}
.アイコン {
    表示: インラインブロック;
    垂直位置合わせ: 中央;
}

js

if(!$('#agreeTerm').is(":checked")){
$.alert('保険の利用規約および重要な通知と声明に同意するには、ボックスにチェックを入れてください');
戻る;
};
<div class="allCheck">
       <input type="checkbox" id="allCheck" class="check hidden">
       <label for="allCheck" class="check-icon">すべて選択</label>
</div>
.allCheck {
    パディング:0.1rem 0.3rem;

}
.チェックアイコン{
    表示: インラインブロック;
    幅:1.5rem;
    パディング左:.5rem;
    background:url("../../assets/select-no.png")繰り返しなし 左中央;
    背景サイズ:.42rem .42rem ;
}
.check:チェック済み ~ .check-icon {
     background:url("../../assets/selected.png")繰り返しなし 左中央;
     背景サイズ:.42rem .42rem ;
}

2. ラジオボタンをシミュレートする

同様の効果

HTMLコード

<dl id="" class="お金">
    <dt>補償額を選択<span class="p_help help">補償内容</span></dt>
    <dd>
        <span>
            <input id="money_type_0" name="money_type" class="selection-rd hidden" type="radio" value="1" チェック済み="">
            <label class="selection-lb" for="money_type_0">10元</label>
        </span>
        <span>
            <input id="money_type_1" name="money_type" class="selection-rd hidden" type="radio" value="2">
            <label class="selection-lb" for="money_type_1">20元</label>
        </span>
        <span>
            <input id="money_type_2" name="money_type" class="selection-rd hidden" type="radio" value="3">
            <label class="selection-lb" for="money_type_2">50元</label>
        </span>
    </dd>
</dl>

CSSコード

.selection-rd:checked ~ .selection-lb {
    色: #e44;
    境界線:1px 実線 #e44;
}
.選択-lb {
    表示: インラインブロック;
    マージン:33px 30px 30px 0;
    幅:150ピクセル;
    高さ: 64px;
    行の高さ: 64px;
    空白: ラップなし;
    背景色: #fff;
    境界線:1px 実線 #bbc;
    境界線の半径: 5px;
    テキスト配置: 中央;
    フォントサイズ: 32px;
}

jqコード

var payLevel=$("input[name='money_type']:checked").val();

3. 中央のテキスト、両側の水平線は中央揃え

効果

コード

<div class="title-center"><div>学生情報</div></div>
/*中央のテキストの両側に水平線*/
.title-center {
位置:相対;
幅:100%;
テキスト配置: 中央;
高さ: 100px;
行の高さ: 100px;
フォントサイズ: 28px;
色: #4d72e2;
}
.title-center div{
表示: インラインブロック;
パディング:0 20px;
}
.title-center:before 、.title-center:after{
表示: インラインブロック;
位置: 相対的;
コンテンツ："";
高さ:2px;
幅:48px;
上:-6px;
背景色:#4d72e2;
}

rem を単位として使用すると、1px では大きすぎるように見えます。.title-center:before と .title-center:after を次のように変更します。

.title-center:before、.title-center:after {
表示: インラインブロック;
位置: 相対的;
コンテンツ： "";
高さ: 1px;
幅: 1.88rem;
上: -.1rem;
背景色: #fd734f;
-webkit-transform: スケールY(0.5); 
変換: スケールY(0.5);
-webkit-transform-origin: 0 0;
変換の原点: 0 0;
}

究極版、rem単位、水平線の長さを適応！ ！ ！ ！

<div class="flexbox flexbox-middle">
    <span class="flexchild border-center"></span>
    <span style="padding:0 .2rem;">中央に配置し、両側の水平線を揃えたい</span>
    <span class="flexchild border-center"></span>
</div>


.border-center{
/*display:inline-block; flexchild レイアウトを使用する場合、要素にこの属性を設定することはできません。そうしないと、-webkit-box-flex: 1; が失敗します*/
高さ: 1px;
背景色: #fd734f;
-webkit-transform: スケールY(0.5);
変換: スケールY(0.5);
-webkit-transform-origin: 0 0;
変換の原点: 0 0;
}

方法2：テキストを両側の中央に配置する

レンダリング

<div class="card-title"><span class="text">キャンディボックスが良ければがっかりしないでください</span></div>

CS

.カードタイトル{
パディングトップ: .4rem;
フォントサイズ: .34rem;
色: #3c3c3c;
テキスト配置: 中央;
フォントの太さ: 太字;
}

.カードタイトル .テキスト {
位置: 相対的;
}
.card-title .text:before 、.card-title .text:after {
コンテンツ： "";
表示: インラインブロック;
位置: 絶対;
幅: .4rem;
高さ: .32rem;
背景: url('../images/card-title.png')繰り返しなし;
背景サイズ: 100% 100%;
上位: 50%;
上マージン: -.16rem;

}
.カードタイトル .テキスト:前{
左: -.51rem;
}
.card-title .text:after{
変換: rotateY(180deg);
-webkit-transform:rotateY(180度);
右: -.51rem;
}

4. アイコンを水平方向と垂直方向に中央揃えする方法（rem 単位）

background-size を使用して背景画像のサイズを設定し、background-position:center center; を使用して、背景画像を要素に対して水平方向と垂直方向に中央に配置するように設定します。要素の幅は背景画像の幅、高さは元の高さになります。

Sass の記述 @mixin headerIcon($width,$height,$url,$position) {
位置: 絶対;
$位置: .3rem;
上: 0;
width: $width; //アイコンの幅 height: .88rem; //ヘッダーの高さ background: url($url) no-repeat;
背景位置:左中央; 
背景サイズ:$width $height;
フォントサイズ: .3rem;
テキスト配置: 左;
}

方法2: 

html:

<あ>
     <i class="foot-nav1 icon"></i>
     <span>ホーム</span>
</a>

css:

{表示:インラインブロック;}
.foot-nav1{   
   幅: .66rem;
    高さ: .66rem;
    表示: ブロック;
    マージン: 0 自動;
    背景:url();
}
スパン {
   表示: ブロック;
    行の高さ: .24rem;
    テキスト配置: 中央;
    フォントサイズ: .24rem;
    高さ: .24rem;
    マージン下部: .8rem;
    色: #666;
}

5. 共通ヘッダースタイル設定

<div><a></a><h1>私はタイトルです</h1><a></a></div>
。ヘッダ{
      幅: 100%;
      高さ: .88rem;
      位置: 絶対;
      左: 0;
      上: 0;
      zインデックス: 998;
      下境界線: 1px 実線 #f1f1f1;
      テキスト配置: 中央;     
      h1{
          フォントサイズ: .36rem;
          フォントファミリー: PingFangSC-Medium、サンセリフ; 
      }
      .left-icon{
        位置: 絶対;
        幅: .88rem;
        高さ: .88rem;
        左: .3rem;
        上: 0;
        背景: url('../../assets/back-icon.png') 繰り返しなし;
        背景サイズ:.17rem .35rem;
        背景位置: 左中央;
        }
 .right-icon{
        位置: 絶対;
        幅: .88rem;
        高さ: .88rem;
        右: .3rem;
        上: 0;
        背景: url('../../assets/back-icon.png') 繰り返しなし;
        背景サイズ:.17rem .35rem;
        背景位置: 左中央;
        }

6. 共通フォームレイアウト

効果：

コード：

<div class="section2">
               <div class="des-title"><span class="text">以下の情報を慎重に入力してください</span></div>
                <ul>
                    <li class="flexbox">
                        <input type="text" placeholder="名前を入力してください" class="flexchild fill-content" id="tbName2">
                    </li>                        
                    <li class="flexbox flexbox-middle">
                        <span class="fill-label">配送先住所:</span>
                        <span class="アドレス" style="overflow: hidden;">
                            <input id="provinceCity2" name="rec_address_select" class="txt" placeholder="選択してください" readonly="読み取り専用">
                            <input id="detailssq2" type="hidden" readonly="読み取り専用">
                            <i class="ui-icon Rmore-icon noborder"></i>
                         </span>
                    </li>
                    <li class="flexbox">
                        <input type="text" placeholder="詳細な住所を入力してください" class="flexchild fill-content" id="adressDetail">
                    </li>
                </ul>
            </div>

CS: ...

.section2 li {
    リストスタイル: なし;
    位置: 相対的;
    幅: 500ピクセル;
    マージン: 0 自動;
    境界線: 1px 実線 #ffd6b9;
    ボックスのサイズ: 境界線ボックス;
    パディング: 17px 30px;
    背景色: #fff;
    上マージン: 20px;
    境界線の半径: 40px;
}

.section2 li 入力 {
    背景色: 透明;
    境界: 0 なし;
    色: #333;
    アウトライン: なし;
    位置: 相対的;
    フォントサイズ: 26px;
    幅: 435ピクセル;
    zインデックス: 102;
}

html:

<li class="flexbox">
     <label>あなたの恋人:</label>
     <input type="text" placeholder="恋人の名前を入力してください" class="flexchild" id="loveName">
</li>

CS: ...

.sec3 li {
    位置: 相対的;
    高さ: .88rem;
    -webkit-box-align: 終了;
    -moz-box-align: 終了;
    -ms-flex-align: 終了;
    flex-end は、webkit-align-items 要素の末尾に配置されます。
    align-items: flex-end;
    ボックスのサイズ: 境界線ボックス;
}
.sec3 li ラベル {
    パディングボトム: .2rem;
}
.sec3 li 入力 {
    位置: 相対的;
    幅: 4.86rem;
    背景: 透明;
    境界: 0 なし;
    下境界線: 1px 実線 #dc115b;
    パディングボトム: .2rem;
    色: #efc283;
    フォントサイズ: .28rem;
    境界線の半径: 0;
}

7. 上の画像の下のテキストは水平中央に配置されています

効果

CSS スタイル

.mall .details-foot .details-kefu {
    幅: 1.56rem;
    高さ: .99rem;
    右境界線: 1px 実線 #f1f1f1;
}

.mall .details-foot .details-kefu i {
    表示: ブロック;
    幅: .42rem;
    高さ: .42rem;
    マージン: .12rem 自動 .06rem;
    背景: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAQCAYAAADFw8lbAAAAGXRFW…7oxfKRixjo4VSJhW/sUYi1M9kR4RNoUZHpQEuX+Z/pXwEGAHRzn0c9HGr7AAAAAElFTkSuQmCC) 繰り返しなし;
    背景サイズ: 100% 100%;
}

.mall .details-foot .details-kefu-name {
    テキスト配置: 中央;
}

8. 質問回答進捗バー

質問への回答の進捗状況を示すために使用されます。効果は次のとおりです。

ここで、img は図形の背景色です (小さな円は透明です)。また、recommend-jd-bg はプログレスバーの背景色であり、recommend-jd-ks は進行状況を制御する色です。 ！ここで、img>recommend-jd-bg>recommend-jd-ksのz-indexは

html:

<div class="recommend-jd">
       <div class="recommend-jd-bg"></div>
       <div class="recommend-jd-ks" style="width: 37.5%;"></div>
       <img src="/src/m7.0/images/recommend/jd.png">
</div>

CS: ...

.recommend-jd {
    幅: 6.43rem;
    位置: 絶対;
    上: 1.59rem;
    左: .54rem;
}
.recommend-jd-bg {
    幅: 100%;
    高さ: .31rem;
    背景: #fff;
    位置: 絶対;
    上: 0;
    zインデックス: 97;
}
.recommend-jd-ks {
    width: 12.5%; //これはjsによって制御され、質問の数の進行に応じて制御されます。
    高さ: .31rem;
    背景: #4a90ff;
    位置: 絶対;
    上: 0;
    zインデックス: 98;
}
.recommend-jd画像{
    幅: 100%;
    表示: ブロック;
    位置: 絶対;
    上: 0;
    zインデックス: 99;
    高さ: .31rem;
}

進捗バー 2 

<div class="プログレスバー">
    <span class="progressPer" style="width: 2rem;">
        <span class="マネーボックス">
           <span class="moneyText">0.01円</span>
        </span>
   </span>
</div>

.プログレスバー{
    マージン: .3rem 自動 .1rem;
    幅: 6.3rem;
    高さ: .1rem;
    背景色: rgb(72, 11, 29);
}

.progressPer{
    位置: 相対的;
    上: 0;
    左: 0;
    表示: インラインブロック;
    幅: 0;
    高さ: .1rem;
    背景色: #efc283;
}
.マネーボックス{
    位置: 絶対;
    右: -.53rem;
    上: .3rem;
    表示: インラインブロック;
    幅: 1.06rem;
    高さ: .4rem;
    背景: url(../images/moneyBox.png)no-repeat;
    背景サイズ: 100% 100%;
}
.moneyBox .moneyText {
    位置: 絶対;
    下部: 0;
    左: 0;
    幅: 1.04rem;
    高さ: .34rem;
    行の高さ: .34rem;
    テキスト配置: 中央;
    色: #efc283;
    フォントサイズ: .26rem;
}

9. テストの質問1～10はすべて同じページにあります

10. 選択したドロップダウンボックスのロゴを削除し、次のプロパティを追加します。

選択{
    背景: 透明;
        境界: 0 なし;
        アウトライン:なし;
       外観:なし;
    -moz-appearance:なし;
    -webkit-appearance:なし;

}

11. 入力プレースホルダーのスタイルを変更する

.detail-page input::-webkit-input-placeholder { /* WebKit、Blink、Edge */
    フォントサイズ: .26rem;
    色:#b2b2b2;
    不透明度: 1;
}
.detail-page input:-moz-placeholder { /* Mozilla Firefox 4 から 18 */
   フォントサイズ: .26rem;
   色:#b2b2b2;
   不透明度: 1;
}
.detail-page input::-moz-placeholder { /* Mozilla Firefox 19+ */
   フォントサイズ: .26rem;
   色:#b2b2b2;
   不透明度: 1;
}
.detail-page input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   フォントサイズ: .26rem;
   色:#b2b2b2;
   不透明度: 1;
}

12. 入力に「disabled」を追加すると灰色になります。次のように色を変更します。

入力:無効{
      境界線:1px実線 #DDD;
      背景色:#F5F5F5;
      色:#ACA899;
}

13. 複数行のテキストを左揃えまたは右揃えにする:

ｐ { 

   テキスト配置: 両端揃え;
  テキストの両端揃え: 表意文字間;

}

効果

14. 1行のテキストの両端を揃えます。たとえば、次の1行のテキストの揃えを実現するには、

方法 1: 疑似クラスを使用する:

html:

<div class="line">
    <div class="public">名前</div>
    <b>:</b>
    <b>リン・シャオ</b>
</div>
<div class="line">
    <div class="public">ID カード</div>
    <b>:</b>
    <b>111111111111</b>
</div>
<div class="line">
    <div class="public">携帯電話番号</div>
    <b>:</b>
    <b>141000000</b>
</div>

CS: ...

。ライン{
 幅:100%;
 高さ:15px;
 マージン:5px;
}
。公共{
 幅:80ピクセル;
 高さ:100%;
 表示:インラインブロック;
 テキスト配置: 両端揃え;
 垂直方向の位置合わせ:上;
}
.public::after{
 コンテンツ："";
 表示: インラインブロック;
 幅:100%;
 オーバーフロー:非表示;
 高さ:0;
}

方法 2 では、文字間隔を使用して問題を解決します。

html:

<span style="font-size:12px;"><dl class="hotsearch" style="width:300px;">  
<dt>人気の検索</dt>  
<dd><a href="#" target="_blank" ref="nav" class="w3">テレビ</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w4">セクシーで美しい</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w3">ハイヒール</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w2">モバイル</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w2">配置</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w3">ジーンズ</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w4">リトル ジェイド</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w2">ホーム</a></dd>  
</span>

CS: ...

.hotsearch dd{  
フロート: 左;  
行の高さ: 24px;  
右マージン: 30px;  
オーバーフロー: 非表示;  
テキスト配置: 中央;  
width: 4em; /*この値は最大何文字表示できるかによって決まります。x の場合は x em になります*/  
}  
.hotsearch dd a{  
表示:ブロック;  
}  
.w2{  
letter-spacing:2em; /*y文字を揃える必要がある場合は(xy)/(y-1)、ここでは(4-2)/(2-1)=2em */  
margin-right:-2em; /*上記と同じ*/  
}  
.w3{  
letter-spacing:0.5em; /*y文字を揃える必要がある場合は(xy)/(y-1)、ここでは(4-3)/(3-1)=0.5em */  
margin-right:-0.5em; /*上記と同じ*/  
}

効果

15. 画像の読み込みプロセスを高度に適応させる

適用シナリオ: ページレイアウト処理中にカルーセルまたは大きな画像に遭遇し、画像の下に他のコンテンツ ブロックがある場合、画像の読み込み処理中に高さが 0 であるため、下の要素が上に実行され、画像が読み込まれます。要素が流れ落ち、ユーザーに不安感を与えます。

解決策: 画像の最も外側のレイヤーにdivを設定し、このdivに次のスタイルを設定します。

.img-ボックス{
        オーバーフロー: 非表示;
        幅: 100%;
        高さ: 0;    
        パディング下部: 52%; 
        /*方法2*/
        幅:100%;
        /*親の幅に対する高さの比率*/
        高さ: 52%vw;
        背景:#eee;
}

16. テキストが制限を超えた場合に省略記号を実装します... (幅を設定する必要があります。親要素がフレックスレイアウトを使用する場合は、display: flex で min-width: 0 を設定する必要があります。そうしないと省略記号が失敗します!!)

.省略記号 {
    オーバーフロー: 非表示;
    テキストオーバーフロー: 省略記号;
    空白: ラップなし;
}
.ellipsis-2l {
    ディスプレイ: -webkit-box;
    オーバーフロー: 非表示;
    テキストオーバーフロー: 省略記号;
    -webkit-box-orient: 垂直;
    -webkit-line-clamp: 2; // どの行ですか?

17. 垂直スクロールバー

この効果を実現するには、各ドットを時間に合わせて配置する必要があります。ドットを日付と同じ div に配置し、水平線をレコード全体の背景画像として使用できます。

html:

<div class="list">
    <div class="リスト項目">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>今日</span></div>
        <div class="list-item-award yhj">2 元クーポン、しきい値なし<a class="go">今すぐご利用ください</a></div>
        <div class="list-item-text">サインインして、ホワイトピジョンコインを 1 枚獲得しました</div>
    </div>
    <div class="リスト項目">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>今日</span></div>
        <div class="list-item-award yhj">2 元クーポン、しきい値なし<a class="list-btn">ぜひご利用ください</a></div>
        <div class="excode">iQiyi APP で引き換えてください。引き換えコード: testPw5079</div>
        <div class="list-item-text">サインインして、ホワイトピジョンコインを 1 枚獲得しました</div>
    </div>
    <div class="リスト項目">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>2018-09-28</span></div>
        <div class="list-item-text">サインインして、ホワイトピジョンコインを 1 枚獲得しました</div>
    </div>
    <div class="リスト項目">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>今日</span></div>
        <div class="list-item-award yhj">2 元クーポン、しきい値なし<a class="list-btn">ぜひご利用ください</a></div>
        <div class="excode">iQiyi APP で引き換えてください。引き換えコード: testPw5079</div>
        <div class="list-item-text">サインインして、ホワイトピジョンコインを 1 枚獲得しました</div>
    </div>
</div>

CS: ...

.リスト{
    パディングトップ: .1rem;
    パディングボトム: .1rem;
    フォントサイズ: .3rem;
    色: #333;
    背景色: #fff;
}
.リスト項目{
    幅: 100%;
    左マージン: .32rem;
    上マージン: -.15rem;
    パディングボトム: .4rem;
    背景: url("../images/border.png") 繰り返しなし .1rem .21rem;
    背景サイズ: 1px 100%;
}
  .progres2-item {
      表示: インラインブロック;
      右マージン: .25rem;
      幅: .21rem;
      高さ: .21rem;
      背景色: #4d72e2;
      境界線の半径: 50%;
  }

/*最後のものは直線がないので、背景がありません。背景が 1 つしかない場合も背景はありません*/
.list-item:最後のタイプ{
    背景:透明;
}
.list-item-award、.list-item-text {
    左マージン: .5rem;
}
.リストアイテム賞{
    左パディング: .53rem;
    下部マージン: .12rem;
    上マージン: .22rem;
    
}
.リスト項目テキスト {
    幅: 100%;
    左パディング: .46rem;
    パディングボトム: .16rem;
    背景: url("../images/sign-icon.png") 繰り返しなし 左 .05rem;
    背景サイズ: .32rem .25rem;
    フォントサイズ: .26rem;
    色: #808080;
    ボックスのサイズ: 境界線ボックス;
    下境界線: 1px 実線 #f4f4f4;
}
.list-item:最後のタイプ .list-item-text {
    border-bottom: 0 なし;
}
.リスト項目 .リストボタン {
    左パディング: .1rem;
    テキスト装飾: 下線;
    フォントサイズ: .28rem;
    色: #316cec;
}

18. テキストの下部に水平線の背景

<div class="login-title">小さな白い鳩に、あなたがロボットではないことを知らせましょう。 </div>

.ログインタイトル{
    位置: 相対的;
    高さ: .39rem;
    上マージン: .4rem;
    フォントサイズ: .34rem;
    色: #fff;
    テキスト配置: 中央;
}
.ログインタイトル:後{
    コンテンツ： "";
    位置: 絶対;
    幅: 5.05rem;
    高さ: .21rem;
    背景色: #fe923f;
    Zインデックス: -1;
    左: 0;
    右: 0;
    マージン: 0 自動;
    下部: 0;
}

付録: よく使われる CSS スタイルのまとめ

1. 背景画像が画面に適応する

。背景{
  位置: 固定;
  上: 0;
  左: 0;
  幅: 100%;
  高さ: 100%;
  最小幅: 1000px;
  Zインデックス: -10;
  ズーム: 1;
  背景色: #fff;
  背景: url(../../assets/[email protected]) 繰り返しなし;
  背景サイズ: カバー;
  -webkit-background-size: カバー;
  -o-background-size: カバー;
  背景位置: 中央 0;
}

2. 高度に適応したスクリーン

。身長{
  幅: 200ピクセル;
  最小高さ: 400px;
  オーバーフロー:自動;
  高さ：100vh;
  ディスプレイ: -webkit-flex;
}

よく使われる CSS スタイル (レイアウト) の詳細な説明についてはこれで終わりです。CSS スタイル レイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Vue の基本 MVVM、テンプレート構文、データバインディング

>>:  HTML 適応テーブル方式

推薦する

CSS で子 div の高さを親コンテナの残りのスペースに合わせる方法

1. フローティング方式を使用する効果画像: コードは次のとおりです: (.content の高さは...

MySQL ロックブロッキングの詳細な分析

日常のメンテナンスでは、スレッドがブロックされることが多く、データベースの応答が非常に遅くなります。...

Vue でよく使われる高階関数と包括的な例

1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...

複数のドメイン名に対する Nginx リバース プロキシを使用した HTTP および HTTPS サービスの実装

現在、Nginx は、Web サービスを提供するために、Windows ベースの IIS と Lin...

CSS ハート型読み込みアニメーションのソースコードの実装

さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります...

Linux で nohup ログ出力が大きすぎる問題の解決方法の詳細な説明

最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...

Vueは買い物数量を変更できるショッピングカートを実装します

この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次の...

ハイパーリンクアイコンの仕様: 記事の読みやすさを向上

1. ハイパーリンクアイコンの仕様とは？<br />ハイパーリンクアイコンの仕様は、「C...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...

MySQL 権限制御の詳細分析

目次1. グローバルレベル2. データベースレベル3. 表面レベル4. 列レベルの権限5. サブルー...

ViteでReactプロジェクトを構築する方法

目次序文Viteプロジェクトを作成する改修プロジェクトディレクトリの規則その他の構成序文毎日鳩、火ば...

レスポンシブ Web をデザインするにはどうすればいいですか?レスポンシブウェブデザインのメリットとデメリット

最近レスポンシブ デザインについて学んでいて、これについていくつか整理してみました。写真の一部はイン...

JavaScript でエラーが発生しやすい演算子操作の概要

目次算術演算子異常状況1: 特殊値リテラルを含む操作異常な状況 2: 他の種類のデータが数学演算に関...

Javascript サンプル プロジェクトでの虫眼鏡効果の実装プロセス

目次序文事例: JD.com の虫眼鏡効果の模倣オフセットシリーズクライアントシリーズスクロールシリ...

iframe パラメータの説明と例

<iframe src=”test.jsp” width=”100″ height=”50″ ...