CSS|Weegle検索バーの作成

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

課題



  • フラグは以下の画像アドレスを使用してください.
    https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png

  • CSS positionプロパティを使用してアイコンを配置します!
    ヒント:inputおよびアイコンを囲む親ラベルdivは、アイコンを容易に位置決めすることができる.

  • 2つのグレーボックスで同じクラス名を使用し、cssを1回使用します.
  • aラベルを使用してEnglishを実装してください.

    • Step


    HTML

  • 画像リンクを有するimgタグを用いて<header>に画像を挿入
    • <header>
	<img alt="Weegle" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
</header>
  • inputタグを使用して検索ウィンドウを作成
    • <input type="text">
  • inputdivを使用してアイコンを一度にラベルに包み、レイアウトを容易にします.div class="search"

  • Font Awesomeを使用して検索ウィンドウのアイコンをインポート
    • <!-- head 부분에 추가 -->
  <script src="https://kit.fontawesome.com/e264982194.js" crossorigin="anonymous"></script>
 
<i class="fas fa-search search"></i>
<i class="fas fa-keyboard keyboard"></i>
<i class="fas fa-microphone mic"></i>
  • 検索ウィンドウの下でdivでグレーボックスを囲む
    •     <div class="tag-boxes">
      <div class="tag-box">Weggle 검색</div>
      <div class="tag_box">I'm feeling</div>
    </div>
  • aタグを使用してEnglishリンクを作成

    • 最終コード


    HTML

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://kit.fontawesome.com/e264982194.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header>
      <img alt="Weegle" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
    </header>
    <div class="search">
      <input type="text">
      <i class="fas fa-search search"></i>
      <i class="fas fa-keyboard keyboard"></i>
      <i class="fas fa-microphone mic"></i>
    </div>
    <div class="tag-boxes">
      <div class="tag-box">Weegle 검색</div>
      <div class="tag-box">I'm feeling Lucky</div>
    </div>
    <p>Weegle 제공 서비스 : <a>English</a></p>
  </body>
</html>

    CSS

    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  text-align: center;
  padding-top: 50px;
}

.search {
  position: relative;
}

input {
  border-radius: 30px;
  border: 1px solid #dfdfdf;
  height: 50px;
  width: 100%;
  padding: 10px 12px 10px 12px;
}

.fas {
  position: absolute;
  margin: 20px 0 20px 0;
}

.fa-search {
  left: 20px;
}

.fa-keyboard {
  right: 45px;
}

.fa-microphone {
  right: 20px;
  color: #50bcdf;
}

.tag-boxes {
  text-align: center;
  margin: 30px;
}

.tag-box {
  display: inline-block;
  background-color: #ece9e9;
  border-radius: 4px;
  padding: 15px;
  margin-right: 10px;
}

p {
  text-align: center;
  font-weight: bold;
  font-size: small;
}

a {
  color: blue;
  text-decoration: underline;
}
    天候アプリケーションの作成-アイコンの挿入
    [Phothon/バックアップ/DP]2011:パスワードコード