TIL 48|★茶屋登録ページ17(固定画像背景)

21547 ワード
★茶屋登録ページ テキストリンク
クイックキャンパスネット講座で作成した★茶屋登録ページ.3つの部分を記入し、学んだ内容を記録します.

SECTION : season-product



HTML

  • 「季節-製品」というクラス名セクション
    • を作成します.
  • は、中央に配置するクラス名「inner」のdiv要素
    • を生成する.
  • には、product
    • というクラスの画像ファイル(product)が内蔵されています.
  • の内部にtext-groupというdiv要素
    • が作成されます.
  • text-グループには2つの画像ファイル(2つの説明画像ファイル)と
    • が含まれています.
  • の内部にmoreというdiv要素
    • が生成される.
  • more内でaリンクで詳細ビューボタンを作成する
    にはyoutube部分のフロート3があります.pngイメージファイルを「季節-製品」セクションにインポートし、youtubeセクションでオーバーフロー:hidden;従って隠されたものは消去する>CSSスタイルを制御するだけで
    • .
    
<section class="season-product">
  <div class="inner">
    <img src="./images/floating3.png" alt="Icon" class="floating floating3" /> 
    <img src="./images/season_product_image.png" alt="" class="product" />
  
    <div class="text-group">
      <img src="./images/season_product_text1.png" alt="" class="title" />
      <img src="./images/season_product_text2.png" alt="" class="description" />    
    <div class="more"></div>
      <a href="javascript:void(0)" class="btn">자세히 보기</a>
    </div>
  </div>
</section>

    CSS

  • .season-product .text-groupの親要素は.inner
  • .season-product .フローティング3:元.youtube .フローティング3の部分を季節-製品部分にインポートし、選択者、bottom:-200 pxからtop:-200 pxを変更します.コントロールボックス
    • 
/* SEASON PRODUCT */

.season-product {
    background-image: url("../images/season_product_bg.jpg");
}

.season-product .inner {
    height : 400px;
}

.season-product .floating3 {
    position: absolute;
    top: -200px;
    right: 0;
}

.season-product .text-group {
    position: absolute;
    top: 110px;
    right: 100px;
}

.season-product .text-group .tittle{
    margin-bottom: 10px;
}

.season-product .text-group .description{
    margin-bottom: 15px;
}

    SECTION : reserve-coffee



    HTML

  • 「reserve-coffee」セクション
  • には、reserve-logoというクラス名の画像ファイル(reserve logo)が内蔵されています.
  • の内部にtext-groupというdiv要素
    • が作成されます.
  • text-グループに画像ファイル(説明画像ファイル)と
    • が含まれます.
  • の内部にmoreというdiv要素
    • が生成される.
  • moreでaリンクで詳細ビューボタン
    • を作成する.
  • ボタンの状態(色)を金とするために、ボタンクラスにbtn-gold,
    • を追加する.
  • 内部text-groupとmoreと兄弟要素を使用してimgリンクを作成し、reserve imageを追加し、クラスを製品として
    • <section class="reserve-coffee">
  <div class="inner">
     <img src="./images/reserve_logo.png" alt="" class="reserve-logo" />

    <div class="text-group">
      <img src="./images/reserve_text.png" alt="" class="description" />
      <div class="more">
       <a href="javascript:void(0)" class="btn btn--gold">자세히 보기</a>
      </div>
    </div>

    <img src="./images/reserve_image.png" alt="" class="product" />

  </div>
</section>

    CSS

  • .reserve-coffee .製品の親要素はです.内
    • です
    .reserve-coffee {
    background-image: url("../images/reserve_bg.jpg");
}

.reserve-coffee .inner {
    height: 400px;
}

.reserve-coffee .reserve-logo {
    position: absolute;
    top: 110px;
    left: 0;
}

.reserve-coffee .text-group {
    position: absolute;
    top: 124px;
    left: 208px;
}

.reserve-coffee .product {
    position: absolute;
    top: 0;
    right: 0;
}

    SECTION : pick-your-favorite



    HTML

  • 「pick-your-favorite」セクション
  • の内部にtext-groupというdiv要素
    • が作成されます.
  • text-グループには2つの画像ファイル(2つの説明画像ファイル)が含まれ、各クラスには
    • が含まれる.
  • text-moreというdiv要素
    • をグループに作成します.
  • moreでaリンクで詳細ビューボタン
    • を作成する.
  • ボタンの状態(色)を白にするには、ボタンクラスにbtn-white,
    • を追加する.
    <section class="pick-your-favorite">
  
  <div class="inner">  
    <div class="text-group">
      <img src="./images/favorite_text1.png" alt="" class="title" />
      <img src="./images/favorite_text2.png" alt="" class="description" />
      <div class="more">
        <a href="javascript:void(0)" class="btn btn--white">자세히 보기</a>
      </div>
    </div>
  
  </div>

</section>

    CSS

  • .pick-your-favoriteを細かく制御
  • background-repeat: no-repeat;
    • を使用して背景画面を繰り返さない
  • 背景-添付ファイル:fixedを使用して、明日のようにスクロールするのではなく、背景画像(要素)をビューポートにスクロールします.
  • background-size: cover;背景画像を要素に出力する前にbackground-attach:fixed;ここで、要素はビューポート出力
    • に従います.
  • .pick-your-favorite .text-group部
  • display: flex;
  • flex-wrap: wrap;
  • justify-content: flex-end; :
    • 、右揃え要素(崇平の端点と位置合わせ)
    
/* PICK YOUR FAVORITE */

.pick-your-favorite{
    background-image: url("../images/favorite_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.pick-your-favorite .inner{
    padding: 110px 0;
}

.pick-your-favorite .text-group{
    margin-left: 100px;
    width: 362px;
    display: flex;
    flex-wrap: wrap; 
    justify-content: flex-end;
}

.pick-your-favorite .text-group .title{
    margin-bottom: 40px;
}

.pick-your-favorite .text-group .description{
    margin-bottom: 40px;   
}
    2.RECT入門-3日目(feat.Bootstrap)
    BFS