Блог

Главная - Вопросы по программированию - Как скопировать пример компоновки CSS

Как скопировать пример компоновки CSS

#css

Вопрос:

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

body {
  height: 100vh;
  margin: 0 auto;
}

.header {
  padding: 2.5rem 0;
  margin-bottom: 1rem;
  background-color: #c8bfbf;
}
.content {
  display: flex;
  flex-direction: row;
}

.navbar-list {
  display: flex;
  flex-direction: row;
  list-style: none;
}

.list-item {
  margin-left: 1rem;
}

.footer-list {
  display: flex;
  flex-direction: row;
  list-style: none;
}

.footer-content {
  display: flex;
  flex-direction: row;
  list-style: none;
  justify-content: space-between;
}

.main-container {
  width: 1200px;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>CSS Assignment</title>
</head>

<body>
    <nav>
        <ul class="navbar-list">
            <li class="list-item"><a href="#">Home</a></li>
            <li class="list-item"><a href="#">About</a></li>
            <li class="list-item"><a href="#">Service</a></li>
            <li class="list-item"><a href="#">Contact</a></li>
        </ul>
    </nav>

    <div class='header'>
        <h2>We Provide the best IT Services</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, assumenda distinctio. Fugit, quam veritatis
            officia mollitia ex fugiat beatae temporibus.</p>
        <a href="#">Know more...</a>
    </div>

    <div class="content">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
            similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
            pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
            cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
        </p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
            similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
            pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
            cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
        </p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
            similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
            pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
            cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
        </p>
    </div>

    <footer class="footer-content">
        <div class="footer-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </div>
        <div class="footer-list">
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Viemo</a></li>
        </div>
    </footer>
</body>

</html>

Может кто-нибудь помочь мне с этим макетом?

https://imgur.com/a/Dq5WNOz

Я использую CSS flexbox для его оформления, но у меня есть вопрос. Как выровнен текст заголовка и ширина содержимого / одинаковая ширина. Но также их фон простирается на всю страницу. Соответствует ли содержимое одному и тому же заполнению? Сначала я попытался использовать ту же маржу, но мой пример в итоге выглядел так.

Мое : https://imgur.com/5PxvMKs

Комментарии:

1. Уважаемый Брайан Буй, То, что вы пробовали, пожалуйста, укажите свой код также в вопросе, чтобы вам помогли 🙂

2. @ImranRafiqRather Извините за это, вот мой код. Сначала я сделал корпус: 1200 пикселей; но цвет фона не распространяется на всю длину страницы, как в примере.

Ответ №1:

Я просто внес определенные изменения и сделал CSS, и вот макет, который вы искали. -пользовательский контейнер для упаковки

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

.container {
  max-width: 1024px;
  margin: auto;
}

nav {
  background: #000;
}

.navbar-list {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
}

.navbar-list>.list-item {
  margin-right: 15px;
}

.navbar-list>.list-item a {
  color: #fff;
  text-decoration: none;
  line-height: 50px;
}

.header {
  background: #aaaaaa;
  padding: 30px 0;
}

.header h2 {
  padding: 0 0 15px;
}

.content p {
  display: inline-block;
  width: calc(100% / 3 - 30px);
  text-align: justify;
  margin: 0 15px;
}

.content {
  padding: 30px 0;
}

.content p:first-child {
  margin-left: 0;
}

.content p:last-child {
  margin-right: 0;
}

footer.footer-content {
  background: green;
  padding: 15px 0;
}

.footer-lists {
  display: flex;
  justify-content: space-between;
}

.footer-list {
  list-style: none;
  display: flex;
}

.footer-list>li a {
  color: #fff;
  text-decoration: none;
  margin-right: 15px;
}

.footer-list>li:last-child a {
  margin-right: 0;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>CSS Assignment</title>
</head>

<body>
  <nav>
    <div class="container">
      <ul class="navbar-list">
        <li class="list-item"><a href="#">Home</a></li>
        <li class="list-item"><a href="#">About</a></li>
        <li class="list-item"><a href="#">Service</a></li>
        <li class="list-item"><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

  <div class='header'>
    <div class="container">

      <h2>We Provide the best IT Services</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, assumenda distinctio. Fugit, quam veritatis officia mollitia ex fugiat beatae temporibus.</p>
      <a href="#">Know more...</a>
    </div>
  </div>

  <div class="content">
    <div class="container">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
        a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
      </p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
        a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
      </p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
        a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
      </p>
    </div>
  </div>

  <footer class="footer-content">
    <div class="container">
      <div class="footer-lists">
        <div class="footer-list">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </div>
        <div class="footer-list">
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Viemo</a></li>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>
Метки: