検索バー

14714 ワード
CSS WeCode 上のコード html テキストリンク

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" />
  </head>
  <body>
    <div class="container">
      <a href="weecode.co.kr">
        <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="logo">
      </a>
      <div class="input__search">
        <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png" alt="돋보기 모양 아이콘">
        <input type="search">
      </div>
      
      <div class="container__button">
        <button class="button__style">weegle 검색</button>
        <button class="button__style">I'm feeling Lucky</button>
      </div>
      <p class="text__style">Weegle 제공 서비스 : <a href="">English</a></p>
      
    </div>
  </body>
</html>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
}


.container {
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 300px;
  justify-content: center;
  align-items: center;
}

img {
  width: 300px;
}

a {
  text-decoration-line: none;
}
.input__search {
  position: relative;
  width: 100%;

}

.input__search input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid #bbb;
  padding: 7px;
}

.input__search img {
  position: absolute;
  width: 13px;
  top: 9px;
  left: 9px;
  opacity: 0.5;
}
.container__button {
  display: inline-block;
}
.button__style {
  margin-top: 10px;
  margin-left: 5px;
  border: 0;
  border-radius: 5px;
  padding: 12px;
}

実装画面



review


全体的に中央に位置合わせするためにbodyにcss sytleを適用した.
divラベルで全体を積み重ね、cssでdisplay flexプロパティを使用して列効果を垂直に揃えます.
垂直位置合わせの値に領域を指定するにはwidth、height値を加え、flexのprefident-content、align-itemsを中心位置合わせします.
Inputのsearch typeを用いて検索ウィンドウを実現し,これをスタイル化して修飾し,拡大鏡画像を検索ウィンドウに入れるために位置調整した.
ボタンの大きさを調整するために、ボタンの位置を両側に置き、display inline-block値を適用し、styleを加えて画像上のボタンを飾ります.
領域区分に従って、htmlおよびcssは、完全なボックス、1つのバッジ画像、1つの入力領域、1つのボタン領域、最後のpタグ領域からなる構造で記述することができる.
プログラマソートレベル3:H-Indexアルゴリズムプール
maven_error: release version 5 not supported