在 html/css 中，如何使用响应式设计在图像上添加黑框

问题描述 投票：0回答：1

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;
}
<!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>
            <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>[email protected]</h5>
            <h5>917-546-8464</h5>
        </div>
        <footer>
            <h5>copyright The Tea Cozy 2017</h5>
        </footer>
    </body>
</html>

这是一个codecademy的项目，但是他们没有解决方案，我正在尝试自己做。因此，正如您在上面的代码中看到的那样，如果您在大窗口中打开它，它看起来很好。但是有一件事我真的很挣扎。顶部和底部图像中的那些黑框。我使用绝对位置在那里翻译它们，这可能不是最好的主意，但我不知道该怎么做。关于更好的方法来实现更具响应性的设计有什么想法吗？

html css responsive-design
1个回答
0
投票

如果你想得到一个响应式的网站，尽量不要使用固定宽度。我建议主要使用 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>[email protected]</h5>
            <h5>917-546-8464</h5>
        </div>
        <footer>
            <h5>copyright The Tea Cozy 2017</h5>
        </footer>
    </body>
</html>

希望对你有帮助:)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.