Создание простой страницы сайта торговой карты - PullRequest
Новая
       0

Создание простой страницы сайта торговой карты

0 голосов
/ 08 июля 2020
• 1000 * 
/* add your CSS here */
<style>


container { border: 2px solid black;
}

.container {border: 2px solid black;
}


#card {
  font-style: italic;
  padding: 1em;
}
.animal-info {
border: 2px solid black;
}
ul {list-style: none;
  padding: 1em;
}
li span { font-weight: bold;
}

h1{
  padding: 1em;
}

img {
  padding: 1em;
}

#summary{
  padding: 1em;
}
</style>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>For the Love of Puppies</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="container">
    <h1>Puppies</h1>
    <img src="https://placedog.net/300/300" alt="Puppy">
    <div class="animal-info">
    <div id="card">
      <p id="interesting-fact">Queen Elizabeth II has long been associated with
        Corgis. After a visit to Thomas Thynne, 5th Marquess of Bath in 1933,
        Princesses Elizabeth and Margaret made it well known to their family
        that they liked the Corgis owned by the Marquess.</p> </div>
     
      <ul id="facts">
        <li>
          <span>Dog Breed Group</span>: Herding Dogs
        </li>
        <li>
          <span>Average Length</span>: 10 inches to 1 foot tall at the shoulder
        </li>
        <li>
          <span>Average Lifespan</span>: 12 to 14 years
        </li>
        <li>
          <span>Weight</span>: Up to 30 pounds
        </li>
      </ul>
      <p id="summary">Welsh Corgis come in two varieties: the Pembroke and
        the Cardigan. They were registered as one breed by the Kennel Club in
        the U.K. until 1934, although many breeders believe the two breeds
        developed separately. Both have similar heads, bodies, levels of
        intelligence and herding ability, but the Cardigan is slightly
        larger and heavier boned than the Pembroke.
      </p>
    </div>
    </div>
  </div>
</body>

</html>

Что мне делать, чтобы он был похож на справочную страницу? Это сводит меня с ума. Заранее спасибо ..

Ответы [ 3 ]

0 голосов
/ 08 июля 2020

Всем спасибо за ответы. Я обнаружил, что проблема заключалась в размещении кода class = "animal-info" в id = card вместо отдельного кода над ним. Казалось, это все исправило. :)

0 голосов
/ 08 июля 2020

Выполнение CSS с нуля, как вы делаете, вероятно, не самый простой способ сделать это. Я рекомендую вам использовать фреймворк. Например, я сделал это с помощью Vuetify:

https://codepen.io/adelriosantiago/pen/qBbYrjG?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fcards%2F

enter image description here

Vuetify already contains the Элемент карты , который очень похож на то, что вы ищете. . Элемент карты имеет имя тега <v-card></v-card>. Отсюда вы также можете добавить множество других элементов: https://vuetifyjs.com/en/getting-started/quick-start/. Vuetify полностью адаптивен и автоматически подстраивается под устройства разных размеров.

0 голосов
/ 08 июля 2020

Я создал эту карту с помощью простого кода css. 

container { border: 2px solid #eee;
}

.container {border: 2px solid #eee;
}


#card {
  font-style: italic;
  padding: 1em;
}
.animal-info {
border: 2px solid #eee;
}
ul {list-style: none;
  padding: 1em;
}
li span { font-weight: bold;
}

img {
    width: 100%;
    border: 2px solid #eee;
}
#summary{
  padding: 1em;
}

div#container {
    padding: 20px;
    margin: 50px;
    border: 3px solid #eee;
    box-shadow: 0px 10px 10px 10px #eee;
}
h1{margin-top:0;}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>For the Love of Puppies</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="container">
    <h1>Puppies</h1>
    <img src="https://placedog.net/300/300" alt="Puppy">
    <div class="animal-info">
    <div id="card">
      <p id="interesting-fact">Queen Elizabeth II has long been associated with
        Corgis. After a visit to Thomas Thynne, 5th Marquess of Bath in 1933,
        Princesses Elizabeth and Margaret made it well known to their family
        that they liked the Corgis owned by the Marquess.</p> </div>
     
      <ul id="facts">
        <li>
          <span>Dog Breed Group</span>: Herding Dogs
        </li>
        <li>
          <span>Average Length</span>: 10 inches to 1 foot tall at the shoulder
        </li>
        <li>
          <span>Average Lifespan</span>: 12 to 14 years
        </li>
        <li>
          <span>Weight</span>: Up to 30 pounds
        </li>
      </ul>
      <p id="summary">Welsh Corgis come in two varieties: the Pembroke and
        the Cardigan. They were registered as one breed by the Kennel Club in
        the U.K. until 1934, although many breeders believe the two breeds
        developed separately. Both have similar heads, bodies, levels of
        intelligence and herding ability, but the Cardigan is slightly
        larger and heavier boned than the Pembroke.
      </p>
    </div>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...