TIL 40|★茶屋登録9ページ(ご注意ください)

15840 ワード
★茶屋登録ページ テキストリンク
クイックキャンパスオンラインレッスンで作成された★マルチルーム登録ページSECTION 1で、公告に関するコード(HTML、CSS、JS)を振り返ります

通知（注意事項）



HTML

  • エラー:Googleの材料アイコンをcdnにリンクしようとすると、非アイコンのフォントが
    • を出力します.
  • 解決方法:「マテリアル-アイコン」の選択者にスタイルを作成する場合、googlingでfont-family: 'Material Icons';を追加する方法で
    • を解決します.
  • layout:sectionクラス名「notice」を作成した後、サブエレメントdiv class="notice-line"を作成し、サブエレメントbg-left、be-rightクラス名のdivエレメントを再作成>左、右の領域を中央に並べ替え、class=内部divエレメントbg-left、be-rightおよび兄弟エレメント>class=内部でサブエレメントinner__left、be-rightを再作成構造はinner__rightと
    • に分けられる.
        <section class="notice">
      <div class="notice-line">
        <div class="bg-left"></div>
        <div class="bg-right"></div>
        <div class="inner">
          <div class="inner__left">
            <h2>공지사항</h2>
            <a href="javascript:void(0)" class="notice-line__more">
              <div class="material-icons">add_circle</div>
            </a>
          </div>

          <div class="inner__right">
            <h2>스타벅스 프로모션</h2>
            <div class="toggle-promotion">
              <div class="material-icons">upload</div>
            </div>
          </div>

        </div>
      </div>

    </section>

    CSS

  • 左内幅:60%、右内幅:40%、左側通知領域60%、
    • .notice{

}

.notice .notice-line{
    position: relative;
}

.notice .notice-line .bg-left{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #333;
}

.notice .notice-line .bg-right{
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: #f6f5ef;
}

.notice .notice-line .inner{
    height: 62px;
    display: flex;
}

.notice .notice-line .inner__left{
    width: 60%;
    height: 100%;
    background-color: #333;
    display: flex;
    align-items: center;
}

.notice .notice-line .inner__left h2{
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-right: 20px;
}


.notice .notice-line .inner__left .notice-line__more{
    width: 62px;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notice .notice-line .inner__left .notice-line__more .material-icons {
    font-family: 'Material Icons';
    font-size: 30px;
    color: #fff;
}

.notice .notice-line .inner__right{
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.notice .notice-line .inner__right h2{
    font-size: 17px;
    font-weight: 700;
}

.notice .notice-line .inner__right .toggle-promotion{
    width: 62px;
    height: 62px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notice .notice-line .inner__right .toggle-promotion .material-icons {
    font-family: 'Material Icons';
    font-size: 30px;
}
    4-2 Custom InteractorStyle
    [伯俊]JAVA問題#在鬼