与页眉不同，我的网站页脚没有跨越页面的整个宽度

时间：2021-05-14 11:48:48

标签： html css web-site-project

1.我对网站设计完全陌生，并一直在尝试从头开始制作电子商务网站， 在我网站的产品页面中，页脚没有跨越整个宽度。有人可以帮我解决这个问题吗？ css 和 html 被一行星号分隔，我实际上是堆栈溢出的新手 我试过在 w3 学校和许多 youtube 教程中搜索，但所有的努力都是徒劳的。 请指导我。

提前致谢(^-^)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grocery guys</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="header">
       <div class="container">
          <div class="navbar">
              <div class="logo">
                <img src="logo.png" width="125px">
              </div>
            <nav>
                <ul id="Menuitems">
                    <li><a href="">Home</a> </li>
                    <li><a href="">Products</a> </li>
                    <li><a href="">About</a> </li>
                    <li><a href="">Contact</a> </li>
                    <li><a href="">Account</a> </li>
                </ul>
            </nav>
            <img src="cart.png" width="30px" height="30px">
            <img src="menu.png" class="menu-icon" onclick="menutoggle()" >
        </div>
    </div>
</div>
<!--------featured products-------->
<div class="small-container">
    <h2 class="title">Featured products</h2>
    <div class="row">
        <div class="col-4">
            <img src="product-1.jpg" alt="">
            <h4>Curology moisturiser </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o" "></i>
            </div>
            <p>$50.00</p>
        </div>
        <div class="col-4">
            <img src="product-2.jpg" alt="">
            <h4>Beemster cheese wheel  </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o" "></i>
            </div>
            <p>$50.00</p>
        </div>
        <div class="col-4">
            <img src="product-3.jpg" alt="">
            <h4>Aqua panna </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
               
            </div>
            <p>$50.00</p>
        </div>
        <div class="col-4">
            <img src="product-4.jpg" alt="">
            <h4>Orignal's beer light </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
                <i class="fa fa-star-o" "></i>
            </div>
            <p>$50.00</p>
        </div>
        
    </div>
<!------footer----->
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="footer-col-1">
                <h3>Reach us at Whatsapp <span>&#169;</span</h3>                     
            </div>
            <div class="footer-col-2">
                <img src="logo-white.png" alt="">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi, eos.</p>
            </div>
            <div class="footer-col-3">
                <h3>Useful links</h3>
                <ul>
                    <li>Coupons</li>
                    <li>Blog post</li>
                    <li>Return policy</li>
                    <li>Affiliate</li>
                </ul>
            </div>
            <div class="footer-col-3">
                <h3>Follow us</h3>
                <ul>
                    <li>Whatsapp</li>
                    <li>Maps</li>
                    <li>Business card</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>
        <hr>
        <p class="Copyright">Copyright 2021 <span>&#169;</span> - Haneesh kenny - <i>made with love and a wierd sense of humour.</i></p>
    </div>
</div>




<!--js for toggle menu-->
<script>
    var Menuitems = document.getElementById("Menuitems")

    Menuitems.style.maxHeight = "0px";

    function menutoggle(){
        if(Menuitems.style.maxHeight == "0px")
        {
            Menuitems.style.maxHeight = "200px";
        }
        else
        {
            Menuitems.style.maxHeight = "0px"
        }
    }
</script>
</body>
</html>

CSS

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

}
body{
   font-family: 'Poppins', sans-serif;
}
.navbar{
   display: flex;
   align-items: center;
   padding: 20px;
}
nav{
   flex: 1;
   text-align: right;
}
nav ul{
   display: inline-block;
   list-style-type: none;
}
nav ul li{
   display: inline-block;
   margin-right: 20px;
}
a{
   text-decoration: none
   cornflowerblue
}

p{
  color: cornflowerblue;
}

.container{
   max-width: 1300px;
   margin: auto;
   padding-left: 25px;
   padding-right: 25px;
}
.row{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: space-around;

}
.col-2{
   flex-basis: 50%;
   min-width: 300px;
}
.col-2 img{
   max-width: 100%;
   padding: 50px 0;
}
.col-2 h1{
   font-size: 50px;
   line-height: 60px;
   margin: 25px 0;
}
.btn{
   display: inline-block;
   background: #ff523b;
   color: #fff;
   padding: 8px 30px;
   margin: 30px 0;
   border-radius: 30px;
   transition: background 0.5s;
}
.header{
   background: radial-gradient(#fff,#e4ffd3);
}
.header .row{
   margin-top: 70px;
}
.btn:hover{
   background: #563434;
}
.categories{
   margin: 70px 0;
}
.col-3{
   flex-basis: 30%;
   min-width: 250px;
   margin-bottom: 30px;

}
.col-3 img{
   width: 100%;
}
.small-container{
   max-width: 1080px;
   margin: auto;
   padding-left: 25px;
   padding-right: 25px;
}
.col-4{
   flex-basis: 25%;
   padding: 30px;
   min-width: 200px;
   margin-bottom: 50px;
   transition:  transform 0.5s;
}
.col-4 img{
   width: 100%;
}
.title{
   text-align: center;
   margin: 0 auto 80px;
   position: relative;
   line-height: 60px;
   color: #555;
}
.title::after{
   content: '';
   background: #00ff22;
   width: 80px;
   height: 5px;
   border-radius: 5px;
   position: absolute;
   bottom: 0;
   left: 46%;
   transition: translateX(-50%);
}
.h4{
   color: #555;
   font-weight: normal;
}
.col-4 p{
   font-size: 14px;
}
.rating .fa{
   color: #ff523b;
}

.col-4:hover{
   transform: translateY(-10px);
   box-shadow: 8px 6px 34px grey;
}
/*-----offer------*/
.offer{
   background: radial-gradient(#fff,#e4ffd3);
   margin-top: 90px;
   padding: 30px 0;
}
.col-2 .offer-img{
   padding: 50px;
   transform: translateX(-100px);
}
.small{
   color: #555;
}
/*------Testimonial------*/
.testimonial{
   padding-top: 100px;
}
.testimonial .col-3{
   text-align: center;
   padding: 40px 20px;
   box-shadow: 0 0 30px 0px  rgba(0,0,0,0.1);
   cursor: pointer;
   transition: transform 0.5;
}
.testimonial .col-3 img{
   width: 50px;
   margin-top: 20px;
   border-radius: 50%;
}
.testimonial .col-3:hover{
   transform: translateY(-10px);
   
}
.fa .fa-quote-left{
   font-size: 34px;
   color: #ff523b;
}
.col-3 p{
   font-size: 12px;
   margin: 12px 0;
   color: #777;
}
.testimonial .col-3 h3{
   font-weight: 600;
   color: #555;
   font-size: 16px;
}
/*----brands----*/
.brands{
   margin: 100px auto;
}
.col-5{
   width: 160px;
}
.col-5 img{
   width: 100%;
   cursor: pointer;
   filter: grayscale(100%);
}
.col-5 img:hover{
   filter: grayscale(0);
}
/*-----footer----*/
.footer{
   background: #000;
   color: #8a8a8a;
   font-size: 14px;
   padding: 60px 0 20px ;
}
.footer p{
   color: #8a8a8a;
}
.footer h3{
   color: white;
   margin-bottom: 20px;
}
.footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4{
   min-width: 250px;
   margin-bottom: 20px;
}
.footer-col-1{
   flex-basis: 30%;
}
.footer-col-2{
   flex: 1;
   text-align: center;
}

.footer-col-2 img{
   width: 180px;
   margin-bottom: 20px;
}
.footer-col-3, .footer-col-4{
   flex-basis: 12%;
   text-align: center;
}

ul{
   list-style: none;
}
.Copyright{
   text-align: center;
}
.menu-icon{
   width: 28px;
   margin-left: 20px;  
   display: none;
}

/*------media query for menu--------*/
@media only screen and (max-width: 800px){
   nav ul{
      position: absolute;
      top: 70px;
      left: 0;
      background: #333;
      width: 100%;
      overflow: hidden;
      transition: max-height 0.5s;
   
   }
   nav ul li{
      display: block;
      margin-right: 50px;
      margin-top: 10px;
      margin-bottom: 10px;
   }
   nav ul li a{
      color: white;
   }
   .menu-icon{
      display: block;
      cursor: pointer;
   }
}

/*media query for less than 600 px*/
@media only screen and (max-width: 600px){
   .row{
      text-align: center;
   }
   .col-2, .col-3, .col-4{
      flex-basis: 100%;
   }
   }

2 个答案:

答案 0 :(得分：0)

你应该首先检查你的语法！

例如

<i class="fa fa-star-o" "></i>
<!-- should be -->
<i class="fa fa-star-o"></i>

或

<h3>Reach us at Whatsapp <span>&#169;</span</h3>
<!-- should be -->
<h3>Reach us at Whatsapp <span>&#169;</span></h3>

答案 1 :(得分：0)

do this change
.small-container{
    width: 100%;
    margin: auto; 
 }
 
 .row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 90vw;
 
 }
make a div before the class row like this

<div style="width: 100%; display: flex;justify-content: center;
    align-items: center;"> 
    <div class="row">
        <div class="col-4">
            <img src="product-1.jpg" alt="">
            <h4>Curology moisturiser </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o" "></i>
            </div>
            <p>$50.00</p>
        </div>
        <div class="col-4">
            <img src="product-2.jpg" alt="">
            <h4>Beemster cheese wheel  </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o" "></i>
            </div>
            <p>$50.00</p>
        </div>
        <div class="col-4">
            <img src="product-3.jpg" alt="">
            <h4>Aqua panna </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
               
            </div>
            <p>$50.00</p>
        </div>
        <div class="col-4">
            <img src="product-4.jpg" alt="">
            <h4>Orignal's beer light </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
                <i class="fa fa-star-o" "></i>
            </div>
            <p>$50.00</p>
        </div>
        
    </div>
    </div>

i have advice for u dont use max width 
.row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 90vw;
 
 }
 .small-container{
    width: 100%;
    margin: auto;
    
 }
add div befroe class row and enclude this css

<div style="width: 100%; display: flex;justify-content: center;
    align-items: center;"> 
    <div class="row">
        <div class="col-4">
            <img src="product-1.jpg" alt="">
            <h4>Curology moisturiser </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o" "></i>
            </div>
            <p>$50.00</p>
        </div>
        <div class="col-4">
            <img src="product-2.jpg" alt="">
            <h4>Beemster cheese wheel  </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o" "></i>
            </div>
            <p>$50.00</p>
        </div>
        <div class="col-4">
            <img src="product-3.jpg" alt="">
            <h4>Aqua panna </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
               
            </div>
            <p>$50.00</p>
        </div>
        <div class="col-4">
            <img src="product-4.jpg" alt="">
            <h4>Orignal's beer light </h4>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
                <i class="fa fa-star-o" "></i>
            </div>
            <p>$50.00</p>
        </div>
        
    </div>
    </div>

相关问题
最新问题