HTMLのさまざまなボックスで検索結果を取得する方法

フェイワイ

私は検索クエリに基づいて結果を取得するこの検索エンジンを持っています。私はhtmlを初めて使用するため、結果をさまざまな結果ボックスに配置する方法がわかりません。

つまり、すべての結果が互いに重複しているということです。どうすれば別々の箱に入れることができますか？ご提案ありがとうございます。

これは私のhtmlです：

{% load static %}
<!DOCTYPE html>
<html>
<head>
   <title>Ghibli Studio | People</title>
   <link rel="stylesheet" href="{% static 'core/species.css' %}">
   <style>
       @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap');
   </style>
</head>
<body>
   <div class=" header">
   </div>
   <div class="wrap">
       <form action='/species' method="POST">
           {% csrf_token %}
           <div class="search">


               <input type="text" name="search" class="searchTerm" placeholder="    Type character name, gender, age, or eye color">
               <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
               <button type="submit" class="searchButton">

                   <i class="fa fa-search" style="font-size:24px"></i>
               </button>

           </div>


       </form>


       {% if species %}
       {% for s in species %}
       <div>
           <h4>{{s.Name}}</h4>
           <h5 style="color:lightslategray;">
               Classification: {{s.Classification}}
               <br>Eye color: {{ s.Eye_Colors }}
               <br>Hair color: {{s.Hair_Colors}}
           </h5>
       </div>
       {% endfor %}
       {% endif %}
   </div>
</body>
</html>

これは私のCSSです：

body {
    background: url(https://ak.picdn.net/shutterstock/videos/1007358814/thumb/1.jpg) no-repeat;
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
    background-color: rgba(140, 35, 207, 0.8);
}

.header {
    background: url(https://upload.wikimedia.org/wikipedia/sco/thumb/c/ca/Studio_Ghibli_logo.svg/640px-Studio_Ghibli_logo.svg.png) no-repeat center;
    font-size: 14px;
    filter: invert(100%);
    width: 640px;
    height: 307px;
    background-size: 70%;
    display: block;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
}

.search {
    width: 80%;
    margin-bottom: 150px;
    display: flex;
    display: block;
    margin-top: 2px;
    margin-left: auto;
    margin-right: auto;
}

.searchTerm {
    width: 100%;
    border: 2px solid #dcddec;
    border-right: none;
    padding: 5px;
    height: 25px;
    border-radius: 120px;
    outline: none;
    background-color: rgba(140, 35, 207, 0.2);
}

.searchTerm:focus {
    color: #ebeaef;
}

.searchButton {
    position: relative;
    top: -38px;
    width: 40px;
    height: 36px;
    border: 2px transparent;
    background: transparent;
    color: #ebeaef;
    margin-left: 328px;
    margin-right: auto;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #dedeef;
    opacity: 1; /* Firefox */
}

/*Resize the wrap to see the search bar change!*/
.wrap {
    width: 30%;
    margin: 0 auto;
}

html {
    font-family: 'Dosis', sans-serif;
    line-height: 1.6;
    color: #666;
}



h4 {
    margin-bottom: 500px;
    margin-top: -30px;
    width: 20%;
    height: 5px;
    text-align: center;
    font-family: 'Dosis', sans-serif;
    padding: 1.5rem 2rem;
    background: linear-gradient(rgba(140, 35, 207, 0.2),rgba(140, 35, 207, 0.2));
    background-position: center;
    font-size: 1.3rem;
    color: #ffffff;
    text-shadow: #000000;
    position: absolute;
    top: 63%;
    border-radius: 12px 12px 0 0;
    left: 38%;
}

h5 {
    margin-top: -30px;
    background: #F2F4F4;
    width: 20%;
    height: 140px;
    text-align: justify;
    font-family: 'Dosis', sans-serif;
    padding: 1.5rem 2rem;
    font-size: 1rem;
    position: absolute;
    top: 70%;
    left: 38%;
    overflow: hidden;
    box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
    border-radius: 0 0 12px 12px;
}

これはどのように見えるかです：

ブラックブルー

私はあなたのサイトに抵抗できず、徹底的に掃除しました...私は本当にKISSに専念しているので、外部の（巨大でバグのある...）cssを削除しました。唯一欠けているアイテムは拡大鏡です-本当に必要な場合は、バグのあるコードなしでインターネットから無料のアイコンを入手してください...
それは絶対にモバイルファーストで純粋です。section同じように見せたいので、固定サイズは幅だけです。哺乳類に適しているかどうかをテストします:)。結果の長さが異なる場合は、高さも決定する必要があります。
上部の画像サイズは画面の高さに依存します-スニペットウィンドウは奇妙に短いです。

*{ box-sizing: border-box}          /* added */
body{
font-family: Dosis, sans-serif;
background: #cae;           /* replaced rgba(140, 35, 207, 0.7); */
background: url(https://ak.picdn.net/shutterstock/videos/1007358814/thumb/1.jpg);
background-attachment: fixed;
background-size: cover;
text-align: center;
}
header{
margin: 1vh auto;           /* replaced 5vh auto; */
                            /* moved into @media height: 35vh; */
max-width: 100vw;           /* added */
}
header img{
max-height: 100%;           /* replaced height: 100%; */
max-width: 100%;            /* replaced width: auto; */
}
input{
background: rgba(140, 35, 207, 0.2);
box-shadow: 2px 4px 25px rgba(0, 0, 0, 0.3);
border: 1px solid #edf;
border-radius: 30px;
padding: 15px;
min-width: 30vw;            /* replaced 300px; */
max-width: 80vw;            /* replaced width: 30%; */
outline: 0;
margin: 1vh auto;           /* replaced 2vh auto; */
}
input:focus{
background: rgba(250,222,255, 0.9);
}
::placeholder{
color: #739;
}
[type=submit]{
height: 15px;
width: 15px;
margin: 0 auto;
display: block;
outline: 0;
border: 0;
border-radius: 50%;
background: rgba(140, 35, 207, 0.6);
}
h4{
background: rgba(140, 35, 207, 0.6);
border-radius: 10px 10px 0 0;
margin: 0 0 20px;
padding: 10px;
font-size: 1.5em;
color: #fff;
}
section{
max-width: 100vw;           /* replaced width: 300px; */
margin: 2vw auto;           /* added auto */
padding: 0 0 20px;
display: inline-block;
background: rgba(255,255,255,0.6);
box-shadow: 2px 4px 25px rgba(0, 0, 0, 0.8);
border-radius: 10px;
color: #878;
}
section b{
color: #739;
font-size: 1.2em;
}
p{
margin: 5px;
}
@media (min-width: 350px){
header{ margin: 5vh auto 2vh; height: 35vh}
header img{ height: 35vh}
input, section{ width: 300px; margin: 2vw}}

<header><img src="https://upload.wikimedia.org/wikipedia/sco/c/ca/Studio_Ghibli_logo.svg" alt="logo"></header>
<form>
<input name="search" placeholder="Type character name, gender, age, or eye color" required>
<button type="submit"></button>
</form>
<!--    {% if species %}
    {% for s in species %}
    <section>
    <h4>{{s.Name}}</h4>
    <p>Classification: <b>{{s.Classification}}</b></p>
    <p>Eye color: <b>{{ s.Eye_Colors }}</b></p>
    <p>Hair color: <b>{{s.Hair_Colors}}</b></p>
    </section>
    {% endfor %}
    {% endif %} -->

<section><h4>Name</h4>
<p>Classification: <b>Mammal</b></p>
<p>Eye color: <b>grey</b></p>
<p>Hair color: <b>grey</b></p>
</section>
<section><h4>Name</h4>
<p>Classification: <b>Mammal</b></p>
<p>Eye color: <b>grey</b></p>
<p>Hair color: <b>grey</b></p>
</section>
<section><h4>Name</h4>
<p>Classification: <b>Mammal</b></p>
<p>Eye color: <b>grey</b></p>
<p>Hair color: <b>grey</b></p>
</section>
<section><h4>Name</h4>
<p>Classification: <b>Mammal</b></p>
<p>Eye color: <b>grey</b></p>
<p>Hair color: <b>grey</b></p>
</section>
<section><h4>Name</h4>
<p>Classification: <b>Mammal</b></p>
<p>Eye color: <b>grey</b></p>
<p>Hair color: <b>grey</b></p>
</section>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-01-25

コメントを追加

サインイン

前の投稿：How to stop a while loop in correct place?

TOP 一覧

記事

HTMLのさまざまなボックスで検索結果を取得する方法

HTMLのさまざまなボックスで検索結果を取得する方法

三項演算子良い練習の代わりとしてOptional.ofNullableを使用していますか？

Spring Boot Filter is not getting invoked if remove @component in fitler class

STSでループプロセス「クラスパス通知の送信」のループを停止する方法

セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか？

ビュー用にサイズ変更した後の画像の高さと幅を取得する方法

画像変更コードを実行してもボタンの画像が変更されない

Three.js indexed BufferGeometry vs. InstancedBufferGeometry

VisualStudioコードの特異点/ドッカー画像でPythonインタープリターを使用するにはどうすればよいですか？

Python / SciPyのピーク検出アルゴリズム

Ansibleで複数行のシェルスクリプトを実行する方法

__init__。pyファイルの整理中に循環インポートエラーが発生しました

二次導関数を数値計算するときの大きな誤差

tkinterウィンドウを閉じてもPythonプログラムが終了しない

androidsoongビルドシステムによるネイティブコードカバレッジ

Reactでclsxを使用する方法

値間の一致を見つける最も簡単な方法は何ですか

Using Angular's UI-router, how can we make sure the new version of the html partial views are used, rather than the cached version?

reCAPTCHA-エラーコード：ユーザーの応答を検証するときの「missing-input-response」、「missing-input-secret」（POSTの詳細がない）

PyTesseractを使用した背景色のため、スクリーンショットからテキストを読み取ることができません

エンティティIDを含む@RequestBody属性をSpringの対応するエンティティに変換します

How to access json value by key value in freemarker?

init。pyファイルの整理中に循環インポートエラーが発生しました