FE第2期-17

26277 ワード
CSS テキストリンク

2,0419課題


1.Dropdown-selecbx実施


2.CSS実践技術をまとめる


3.シャープ化または表示を画像フリッカ技術に対応させてみる


1.Dropdown-selecbx実施


HTML


✍
 <body>
    <article class="cont-select">
      <h2 class="txt-hide">최애 프로그래밍언어를 선택해 주세요</h2>
      <button type="button" class="btn-select txt-ellipsis on">
        최애 프로그래밍 언어
      </button>
      <ul class="list-member">
        <li><button type="button" class="txt-ellipsis">Python</button></li>
        <li><button type="button" class="txt-ellipsis">Java</button></li>
        <li><button type="button" class="txt-ellipsis">JavaScript</button></li>
        <li><button type="button" class="txt-ellipsis">C#</button></li>
        <li><button type="button" class="txt-ellipsis">C/C++</button></li>
      </ul>
    </article>
  </body>

CSS


✍
    <style>
      .txt-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .cont-select {
        width: 200px;
        margin: 100px auto 0;
      }

      .btn-select {
        width: 100%;
        padding: 13px 20px 13px 14px;
        font-size: 12px;
        line-height: 14px;
        text-align: left;
        border: 1px solid #c4c4c4;
        box-sizing: border-box;
        border-radius: 10px;
        cursor: pointer;
        background: url(./icon-Triangle-down.png) no-repeat;
        background-position: right 14px center;
      }

      .btn-select:focus {
        border: 1px solid #9b51e0;
        outline: 3px solid #f8e4ff;
      }

      .btn-select.on {
        background-image: url(./icon-Triangle-down.png);
      }

      .btn-select.on + .list-member {
        display: block;
      }

      .list-member {
        display: none;
        margin-top: 20px;
        border: 1px solid #c4c4c4;
        box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
      }

      .list-member li {
        padding: 5px 18px;
      }

      .list-member li button {
        display: block;
        width: 100%;
        padding: 10px 0;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        background-color: #fff;
      }

      .list-member li button:focus,
      .list-member li button:hover {
        background-color: #f8e4ff;
      }
    </style>
💻
  • ボタンラベル内ではaラベルは使用できません.
  • の高さをあげないで、ダウンジャケットで処理します!
  • の背景画像を書き込むときの順序相関
  • liは等級を与えず、両親にUL等級を与え、
  • オプションボックス構成時は
    • button
  ul 
 	li
    li
    li
    li
  /ul
 /button

    2.CSS実践技術をまとめる


  • カスタム入力、選択ボックス
    디자인적인 개성을 주기 위해 스타일링이 까다로운 input 요소를 화면에서 숨기고 label 요소를 연결하여 스타일링을 한다.
  • input
    • .form-login .labl-hold::before {
  display: inline-block;
  content: "";
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: -5px;
  background-image: url("images_login/icon_check_empty.png");
}
    .form-login .inp-hold:checked + .labl-hold::before {
  background-image: url("images_login/icon_check.png");
}
  • select 
    •     <button class="btn-select">당신의 에스파 최애 맴버는??</button>
    <ul class="list-member">
      <li><button type="button">카리나</button></li>
      <li><button type="button">지젤</button></li>
      <li><button type="button">닝닝</button></li>
      <li><button type="button">윈터</button></li>
    </ul>

  • イメージ交換タスク
    디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법이다.
  • PCを使用する画像に意味のあるテキストの代替テキストを提供する場合、
    • .
    .ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}
  • が画像に意味のあるテキストの代替テキストを提供する場合、
    • .
    .ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
  /* transparent 키워드는 IE9부터 사용 가능하기 때문에 PC에서는 빠져있습니다.
 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent */
}
  • スクリーンリーダーを必要としない  寸法構造が必要な場合は
    • である.
    .screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}
  • は、画像を閉じるときに置換テキストを表示する場合に重要な画像置換テキストです.
    • .ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}
  • IEバージョンでは認識できない可能性があるため、margin:-1 px;使用します.
    clipプロパティで要素を切り取ることもできます.
    • .blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

    3.シャープ化または表示を画像フリッカ技術に対応させてみる

    .icon-google::before {
  background: url(./images_login/css_sprites.png) -10px -10px;
  background-size: 103px;
}

.icon-naver::before {
  background: url(./images_login/css_sprites.png) -47px -6px;
  background-size: 100px;
}

.icon-kakao::before {
  background: url(./images_login/css_sprites.png) -5px -42px;
  background-size: 90px;
}

.icon-facebook::before {
  background: url(./images_login/css_sprites.png) -66px -4px;
  background-size: 85px;
}
  • の画像を追加または変更する際に困難に直面し、splight自体が非常に大きくなります.
    • 11レイアウトに関するスタイル2
    mdをテストしてブログを書く