文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么产品卡要放在页脚？

问为什么产品卡要放在页脚？
EN

Stack Overflow用户

提问于 2021-01-10 22:19:07

回答 2查看 34关注 0票数 0

下面是我的代码：

https://codepen.io/malyikaj/pen/QWKNVzN

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

/* * { border: 1px solid black; } */

html {}

* {
  box-sizing: border-box;
}

.slutty-title {
  text-align: font-size: 40px;
  font-family: 'Dancing Script', cursive;
  color: #d98695;
  font-size: 40px;
  font-weight: bold;
  padding-left: 120px;
}

.brownie-title {
  font-size: 30px;
  font-weight: bold;
  color: #76341e;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 440px;
  font-family: arial;
  margin-left: 50px;
}

.italic {
  font-style: italic;
  font-weight: bolder;
}

.bold {
  font-weight: bold;
  color: #76341e;
  letter-spacing: 1.5px;
}

p {
  line-height: 1.4;
  padding: 0px 20px;
}

.price {
  font-size: 28px;
  text-align: center;
  color: #d98695;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #d98695;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

body {
  font-family: 'Montserrat', sans-serif;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

nav {
  background: #d98695;
  height: 80px;
  width: 100vw;
}

label.logo {
  color: white;
  font-size: 65px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
  font-family: 'Dancing Script', cursive;
  letter-spacing: 3px;
}

label.logo-2 {
  margin: -100px;
  line-height: 80px;
  color: white;
  font-size: 25px;
  padding: 0px;
  font-family: 'Dancing Script', cursive;
  letter-spacing: 1px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 40%;
}

.card:hover {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-decoration: none;
}

a:hover {
  transition: .3s;
  text-transform: none;
  background: #df99a6;
}

.checkbtn {
  font-size: 30px;
  color: #df99a6;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

#page-container {
  position: relative;
  min-height: 100vh;
}

footer {
  box-sizing: border-box;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  text-align: right;
  background-color: #d98695;
  color: white;
  padding: 0px;
  position: absolute;
  bottom: 0;
  height: 60px;
  width: 100vw;
  /* position: fixed;
  z-index: 1; */
}

@media (max-width: 952px) {
  label.logo {
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a {
    font-size: 16px;
  }
}

@media (max-width: 858px) {
  .checkbtn {
    display: block;
  }
  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a {
    font-size: 20px;
  }
  a:hover,
  a.active {
    background: none;
    color: #e18e96;
  }
  #check:checked~ul {
    left: 0;
  }
}

section {
  background: url(bg1.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}

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

<head>
  <title>Sweet T's Vegan Bakery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght@100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>

<body>
  <div>
    <header>
      <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fas fa-bars"></i>
          </label>
        <label class="logo">Sweet T's </label>
        <label class="logo-2">Vegan Bakery</label>
        <ul>
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">Order</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">FAQ's</a></li>
          <li><a href="#">Contact </a></li>
        </ul>
      </nav>
    </header>
    <main>


      <h2></h2>

      <div class="card">
        <img src="http://placeimg.com/440/280/any">
        <alt="Denim Jeans" style="width:100%">
          <div class=fonts>
            <span class="slutty-title">Slutty</span>
            <span class="brownie-title">Brownie</span>
            <p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
              <br>
              <br> You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
              <br>
              <br>
              <span class="bold">Gluten free. Nut free. Vegan.</span>
              <p class="price">$5.00</p>
            </p>
            <p><button>Add to Cart</button></p>
          </div>



          <!--  

background-color: #434a52;

Slutty Brownie
    Bite into a base layer of chocolate chip cookie, middle layer of Oreo Cookie, and decadent a top layer of brownie. Gluten free. Nut Free. Vegan.

You may not be its first…but this is THE first ever product from Sweet T’s. Heart shaped, because it was made with love!

Slutty Blondie
    Vegan white Chocolate Blondie with vanilla Oreo style in the middle and cookie on the bottom. Blondes have more fun.Decadent.

Slutty Pumpkin Cheesecake
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Caramel Apple Pie Cookie
    Sugar cookie dough baked with apple pie filling. Topped with sugar cookie lattice pie top. These are the newest homemade sweets that makes an utterly divine dessert. A great desert when you’re craving apple pie—but not the ENTIRE apple pie. 

Pumpkin Cheesecake Muffin
        Came for the fall and stayed a favorite. *Seasonal* #NomNom
 
S’Mores Cookies 
    Chocolate chip cookie with melted vegan marshmallow in the middle. Outrageously good.

Chocolate Chip Cookies
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Birthday? Anniversary? Work Event? Customizable orders available, just contact us.

Find us:
Uber Eats 
GrubHub
Bougie Brews: 52 Main St, Yonkers, NY 10701
VeganDale Food Fest
Baked a cake for Wikipedia 
Cupcake cutie boutique: 8 S 6th Ave, Mt Vernon, NY 10550 (Enjoy two dollar Tuesdays)
Vegan Grille 1201 1201 Castle Hill Ave, The Bronx, NY 10462
Pizza Gusta Super Foodtown of Throggs Neck : 2945-65 Bruckner Blvd, The Bronx, NY 10465
Plantega

Stay sweet my friends.
        Instagram : sweet_teees
        Phone: 914-297-9439
        Email Us: sweettvegan@gmail.com

Sweet simple vegan included my sweets in their 2020 holiday gift guide.
made with all natural and wholesome ingredients.


    </main>  
 
Email Code
<a href="mailto:sweettvegan@gmail.com=?subject=Sweet%20T%20Customer%20Support">Email Us</a>

Email sign up
<input type="text" placeholder="Enter email">
            <input type="submit" value="Signup">
-->
          <div id="page-container">
            <div id="content-wrap">
              <!-- all other page content -->
            </div>
            <footer id="footer">
              <p class=c opyright>&copy;2021 Sweet T's Vegan Bakery</p>
            </footer>
          </div>

</body>

</html>

我的页脚也没有扩展到视口的整个长度。我的产品名片一直到页面的底部。有什么想法吗？

css

footer

card

html

回答 2

Stack Overflow用户

发布于 2021-01-10 22:44:44

页脚标记是inside，#card div和#card div在左侧有一个边距。这就是为什么它没有使用整个屏幕宽度的原因。

您需要将其移动到<body>标记内，并紧跟在#card div之后。但是这样做之后，页脚会出现一个疯狂的位置，因为它有一个position: absolute，只需删除position属性，它就可以工作了。我就把这段代码放进去。

你的卡片高度问题是，你在#page-container中使用了100vh的高度，这使得div扩展到了不必要的程度。将其更改为height: 100%将会起作用。我还建议在#page-container的底部设置边距和填充。如下所示：

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

/* * { border: 1px solid black; } */
html {
  
}

* {
  box-sizing: border-box;
}

.slutty-title { 
  text-align: font-size: 40px;
  font-family: 'Dancing Script', cursive;
  color: #d98695;
  font-size: 40px;
  font-weight: bold;
  padding-left: 120px;
}

.brownie-title {
  font-size: 30px;
  font-weight: bold;
  color: #76341e;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 440px;
  font-family: arial;
  margin-left: 50px;
}

.italic {
  font-style: italic;
  font-weight: bolder;
}

.bold {
  font-weight: bold;
  color: #76341e;
  letter-spacing: 1.5px;
}

p {
  line-height: 1.4;
  padding: 0px 20px;
}

.price {
  font-size: 28px;
  text-align: center;
  color: #d98695;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #d98695;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

body{
  font-family: 'Montserrat', sans-serif; 
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

nav{
  background: #d98695;
  height: 80px;
  width: 100vw;
}

label.logo {
  color: white;
  font-size: 65px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
  font-family: 'Dancing Script', cursive;
  letter-spacing: 3px;
}

label.logo-2 {
  margin: -100px;
  line-height: 80px;
  color: white;
  font-size: 25px;
  padding: 0px;
  font-family: 'Dancing Script', cursive;
  letter-spacing: 1px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
}

.card:hover {
  box-shadow: 0 16px 24px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}

nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-decoration: none;
}
a:hover{
  transition: .3s;
  text-transform: none;
  background: #df99a6;
}
.checkbtn{
  font-size: 30px;
  color: #df99a6;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}

<!-- changed -->
#page-container {
  position: relative;
  min-height: 100%;
  padding-bottom: 15px;
  margin-bottom: 15px;
} 

<!-- changed -->
footer {
  box-sizing: border-box;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  text-align: right;
  background-color: #d98695;
  color: white;
  padding: 0px;
  bottom: 0;
  height: 60px;
  width: 100vw;
  z-index: 1; */
}

@media (max-width: 952px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #e18e96;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg1.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <title>Sweet T's Vegan Bakery</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght@100;400&family=Nerko+One&display=swap" rel="stylesheet">
   </head>
   <body>
      <header>
         <nav>
            <input type="checkbox" id="check">
            <label for="check" class="checkbtn">
            <i class="fas fa-bars"></i>
            </label>
            <label class="logo">Sweet T's </label>
            <label class="logo-2">Vegan Bakery</label>
            <ul>
               <li><a class="active" href="#">Home</a></li>
               <li><a href="#">Order</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">FAQ's</a></li>
               <li><a href="#">Contact </a></li>
            </ul>
         </nav>
      </header>
      <main>
      <h2></h2>
      <div class="card">
          <img src="http://placeimg.com/440/280/any"><alt="Denim Jeans" style="width:100%">
          <div class =fonts>
             <span class ="slutty-title">Slutty</span>
             <span class ="brownie-title">Brownie</span>
             <p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie. 
                <br>  
                <br>
                You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
                <br>
                <br>  
                <span class="bold">Gluten free. Nut free. Vegan.</span>
             <p class="price">$5.00</p>
             </p>
             <p><button>Add to Cart</button></p>
          </div>
          <div id="page-container">
            </div>
         <div id="content-wrap">
            <!-- all other page content -->
         </div>
      </div>
      <!-- changed location -->
      <footer id="footer">
         <p class= copyright>&copy;2021 Sweet T's Vegan Bakery</p>
      </footer>
   </body>
</html>

有关如何改进代码的更多提示，我建议：CSS Units和How to debug your front-end

票数 0

Stack Overflow用户

发布于 2021-01-10 22:46:59

您只是忘记了关闭您的<div>标记。一旦你解决了这个问题，你的问题就消失了。

<div class="card">
  <img src="http://placeimg.com/440/280/any">
  <alt="Denim Jeans" style="width:100%">
  <div class=fonts>
    <span class="slutty-title">Slutty</span>
    <span class="brownie-title">Brownie</span>
    <p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
      <br>
      <br> You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
      <br>
      <br>
      <span class="bold">Gluten free. Nut free. Vegan.</span>
      <p class="price">$5.00</p>
    </p>
    <p><button>Add to Cart</button></p>
  </div>
</div>

我在最后添加了</div>。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65654268

复制

相似问题

问为什么产品卡要放在页脚？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么产品卡要放在页脚？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么产品卡要放在页脚？
EN