网络技术css6-博客blog

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>CSS Tasks</title>
</head>
  <style>
    /* Task 1 styles */
* {
  margin: 0;
  padding: 0;
}

div {
  text-align: center;
  width: 200px;
  background-color: #009688;
  margin: 10px;
}

/* Task 2 styles */
.container {
  text-align: center;
  background-color: #c1c1eb;
  margin: 0 200px;
}

/* Task 3 styles */
.container {
  text-align: center;
  background-color: #c1c1eb;
  margin-top: 0;
  margin-left: 200px;
  margin-right: 200px;
  margin-bottom: 0;
}

/* Task 3.1 styles */
.container {
  text-align: center;
  background-color: #c1c1eb;
  padding: 30px;
}

/* Task 3.2 styles */
.container {
  text-align: center;
  background-color: #c1c1eb;
  padding: 100px 50px;
}

/* Task 4.1 styles */
.container {
  text-align: center;
  background-color: #c1c1eb;
  padding: 20px;
  margin: 50px;
  border: 5px solid #0e0e9a;
}

/* Task 4.2 styles */
.container {
  text-align: center;
  background-color: #c1c1eb;
  padding: 20px;
  margin: 50px;
  border-top: 5px solid #0e0e9a;
  border-bottom: 5px solid #0e0e9a;
  border-right: 5px dashed #5a5af7;
  border-left: 5px dashed #5a5af7;
}

/* Task 5.1 styles */
p {
  background: #009688;
}

/* Task 5.2 styles */
p {
  background: #009688;
  width: 300px;
}

/* Task 5.3 styles */
p {
  background: #009688;
  width: 300px;
  word-break: break-word;
}

/* Task 6.1 styles */
p {
  font-size: 24px;
  background: #009688;
  width: 80%;
  word-break: break-word;
}

div {
  width: 80%;
}

/* Task 6.2 styles */
p {
  font-size: 24px;
  background: #009688;
  width: 200px;
  word-break: break-word;
  box-sizing: border-box;
  border: 10px solid #077a6f;
}

/* Task 6.3 styles */
p {
  font-size: 24px;
  background: #009688;
  width: 200px;
  word-break: break-word;
  border: 10px solid #077a6f;
}

/* Task 7.1 styles */
a {
  font-size: 24px;
}

/* Task 7.2 styles */
a {
  font-size: 24px;
  display: block;
}
    </style>

<body>
  <!-- Task 1 -->
  <div>блок 1</div>
  <div>блок 2</div>

  <!-- Task 2 -->
  <div class="container">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit, nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque. Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere blanditiis! Dolorum, repellendus animi?</p>
  </div>

  <!-- Task 3 -->
  <div class="container">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit, nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque. Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere blanditiis! Dolorum, repellendus animi?</p>
  </div>

  <!-- Task 3.1 -->
  <div class="container">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit, nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque. Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere blanditiis! Dolorum, repellendus animi?</p>
  </div>

  <!-- Task 3.2 -->
  <div class="container">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit, nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque. Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere blanditiis! Dolorum, repellendus animi?</p>
  </div>

  <!-- Task 4.1 -->
  <div class="container">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit, nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque. Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere blanditiis! Dolorum, repellendus animi?</p>
  </div>

  <!-- Task 4.2 -->
  <div class="container">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit, nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque. Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere blanditiis! Dolorum, repellendus animi?</p>
  </div>

  <!-- Task 5.1 -->
  <p>This is some text.</p>

  <!-- Task 5.2 -->
  <p>This is some text for Task 5.2.</p>

  <!-- Task 5.3 -->
  <p>This is some text for Task 5.3.</p>

  <!-- Task 6.1 -->
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>

  <!-- Task 6.2 -->
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

  <!-- Task 6.3 -->
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

  <!-- Task 7.1 -->
  <a href="https://codepen.io">Codepen</a>
  <a href="https://tfc.vsu.by">Training of foreign citizens</a>
  <a href="https://vsu.by/">VSU</a>

  <!-- Task 7.2 -->
  <a href="https://codepen.io">Codepen</a>
  <a href="https://tfc.vsu.by">Training of foreign citizens</a>
  <a href="https://vsu.by/">VSU</a>
</body>

</html>
文章版权归作者所有，未经允许请勿转载。
THE END
网络技术WebTechnology
网络技术css6

请登录后发表评论
