色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在響應式設計的圖片上添加黑盒？

CSS
老白1年前19瀏覽0評論

這是一個Codecademy項目，但他們沒有解決方案，我試圖自己做。如你所見，如果你在一個大窗口中打開它，它看起來很好。但是有一件事我很糾結。

頂部和底部圖像中的黑色方框。我使用絕對位置來翻譯它們，這可能不是最好的主意，但我不知道還有其他方法。

有什么更好的方法來實現更具響應性的設計嗎？

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

body {
  padding: 0;
  margin: 0;
}

header {
  position: fixed;
  width: 100%;
  height: 69px;
  background-color: hsl(0, 0%, 0%);
  border-bottom: solid 1px white;
  z-index: 10;
}

header ul {
  float: right;
}

header li {
  display: inline-block;
  margin-right: 20px;
  text-decoration: underline;
}

header img {
  height: 50px;
  float: left;
  padding-left: 10px;
  margin-top: 9px;
}

.top-image img {
  max-height: 700px;
  margin-top: 69px;
  max-width: 1200px;
  height: 90%;
  width: 90%;
}

.text-center {
  position: absolute;
  top: 330px;
  background-color: black;
  width: 100%;
}

.teas {
  max-width: 1000px;
  text-align: center;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.image {
  max-width: 300px;
}

figcaption {
  font-weight: 700;
  padding: 10px;
}

.bottom {
  height: 500px;
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.bottom-image {
  width: 100%;
  height: 100%;
  background-color: black;
  background-position: center;
  background-size: cover;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
}

.bottom h2 {
  transform: translatey(100px);
}

.blackbox-1 {
  position: absolute;
  background-color: black;
  z-index: 100;
  width: 300px;
  transform: translate(110px, -350px);
}

.blackbox-2 {
  position: absolute;
  background-color: black;
  z-index: 100;
  width: 300px;
  transform: translate(450px, -350px);
}

.blackbox-3 {
  position: absolute;
  background-color: black;
  z-index: 100;
  width: 300px;
  transform: translate(790px, -350px);
}

.final {
  height: 200px;
}

footer {
  text-align: left;
  padding: 10px;
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Tea Cozy</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./resources/index.css">
</head>

<body>
  <header>
    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" />
    <ul>
      <li>Mission</li>
      <li>Featured Tea</li>
      <li>Locations</li>
    </ul>
  </header>
  <div class="top-image">
    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg" />
  </div>
  <div class="text-center">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
  </div>
  <div class="teas">
    <h2>Tea of the Month</h2>
    <h4>What's Steeping at The Tea Cozy?</h4>
    <div class="container">
      <div class="col">
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" />
          <figcaption>Bedford Bizarre Tea</figcaption>
        </figure>
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" />
          <figcaption>Fall berry Blitz Tea</figcaption>
        </figure>
      </div>
      <div class="col">
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" />
          <figcaption>Seasonal Donuts</figcaption>
        </figure>
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" />
          <figcaption>Myrtle Ave Tea</figcaption>
        </figure>
      </div>
      <div class="col">
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" />
          <figcaption>Spiced Rum Tea</figcaption>
        </figure>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="bottom-image">
      <h2>Locations</h2>
    </div>
    <div class="blackbox-1">
      <h3>Downtown</h3>
      <h4>384 West 4th St</h4>
      <h4>Suite 108</h4>
      <h4>Portland, Maine</h4>
    </div>
    <div class="blackbox-2">
      <h3>Downtown</h3>
      <h4>384 West 4th St</h4>
      <h4>Suite 108</h4>
      <h4>Portland, Maine</h4>
    </div>
    <div class="blackbox-3">
      <h3>Downtown</h3>
      <h4>384 West 4th St</h4>
      <h4>Suite 108</h4>
      <h4>Portland, Maine</h4>
    </div>
  </div>
  <div class="final">
    <h2>The Tea Cozy</h2>
    <h5>contact@theteacozy.com</h5>
    <h5>917-546-8464</h5>
  </div>
  <footer>
    <h5>copyright The Tea Cozy 2017</h5>
  </footer>
</body>

如果你想得到一個有響應的網站，盡量不要使用固定寬度。我建議主要使用flexbox和%寬度。并且只為容器布局元素提供最大寬度。

我重寫了你的代碼，使一些部分具有響應性，只有一些修改和建議，否則如果我為你做，你不會學到。

對于圖像上的黑盒，幾乎沒有解決方案。你用絕對位置做的那個。然后你需要一個父元素，給它相對的位置，這樣絕對元素才能適應父元素。

然后對于響應端，我添加了@media查詢，允許您為設備的每個寬度設置字體大小。

html{
    font-family: Helvetica;
    color:seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
}
body{
    padding: 0;
    margin: 0;
}

header{
  height: 69px;
  margin-bottom: 2rem;
}

header .header-wrapper {
    position: fixed;
    width: 100%;
    height: 69px;
    background-color: hsl(0, 0%, 0%);
    border-bottom: solid 1px white;
    z-index: 10;
}

header ul{
    float: right;
}

header li{
    display: inline-block;
    margin-right: 20px;
    text-decoration: underline;
}
header img{
    height: 50px;
    float: left;
    padding-left: 10px;
    margin-top: 9px;
}

.image-wrapper {
  position: relative;
}

.top-image img{
    max-height: 700px;
    max-width: 1200px;
    height: 90%;
    width: 90%;

}
.text-center{
    position: absolute;
    background-color: black;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.text-center h2 {
  font-size: 1rem;
}

.text-center h4 {
  font-size: 1rem;
}

.teas{
    max-width: 1000px;
    text-align: center;
    margin: 0 auto;
}

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.col{
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 300px;
}

.image {
  width: 100%;
}

figcaption{
    font-weight: 700;
    padding: 10px;
}

.bottom{
    height: auto;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
}

.bottom-title {
  margin: 0;
  margin-bottom: 1rem;
}

.wrapper-content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media screen and (min-width: 768px){
  .text-center h4 {
    font-size: 22px;
  }
  
  .wrapper-content {
  grid-template-columns: repeat(2, minmax(0, 1fr));
    
  }
}

@media screen and (min-width: 992px){
  .wrapper-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bottom-image{
    width: 100%;
    height: 100%;
    background-color: black;
    background-position: center;
    background-size: cover;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
}

.blackbox{
    background-color: black;
    z-index: 100;
  width: 240px;

}
.blackbox-2{
    position: absolute;
    background-color: black;
    z-index: 100;
    width: 300px;
    transform: translate(450px, -350px);
}
.blackbox-3{
    background-color: black;
    z-index: 100;
    width: 300px;
    transform: translate(790px, -350px);
}

.final{
    height: 200px;
}

footer{
    text-align: left;
    padding: 10px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Tea Cozy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./resources/index.css">
    </head>
    <body>
              <header>
          <div class="header-wrapper">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png"/>
            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
          </div>
        </header>
        <div class="image-wrapper">
          <div class="top-image">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg"/>
          </div>
          <div class="text-center">
              <h2>Our Mission</h2>
              <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, 
                  Small Batch, Fair Trade, Organic Tea</h4>
          </div>
        </div>
        <div class="teas">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <div class="container">
                <div class="col">
                    <figure>
                        <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg"/>
                        <figcaption>Bedford Bizarre Tea</figcaption>
                    </figure>
                    <figure>
                        <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg"/>
                        <figcaption>Fall berry Blitz Tea</figcaption>
                    </figure>
                </div>
                <div class="col">
                    <figure>
                        <img class="image"                                            src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg"/>
                        <figcaption>Seasonal Donuts</figcaption>
                    </figure>
                    <figure>
                        <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg"/>
                        <figcaption>Myrtle Ave Tea</figcaption>
                    </figure>
                </div>
                <div class="col">
                    <figure>
                        <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg"/>
                        <figcaption>Spiced Rum Tea</figcaption>
                    </figure>
                </div>
            </div>
        </div>
        <div class="bottom">
          <div class="bottom-container">            
                <h2 class="bottom-title">Locations</h2>
          <div class="wrapper-content">           
            <div class="blackbox">
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="blackbox">
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="blackbox">
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
          </div>
          </div>
        </div>
        <div class="final">
            <h2>The Tea Cozy</h2>
            <h5>contact@theteacozy.com</h5>
            <h5>917-546-8464</h5>
        </div>
        <footer>
            <h5>copyright The Tea Cozy 2017</h5>
        </footer>
    </body>
</html>