网页布局示例：HTML与CSS基础教程,-CSDN博客

本文链接：https://blog.csdn.net/weixin_46354568/article/details/132379045

自己随便做的玩的，我是初学者所以做的很粗糙，希望可以给初学者一些参考价值

下面有代码需要自取

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://db.onlinewebfonts.com/c/1572b251b0319fdd12219a000aad6196?family=SofiaPro-Black" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Pepsi.com</title>
</head>
<body>
    <div class="navbar">
        <div class="navbar-left">
            <div class="navbar-item">
                <img src="	https://www.pepsi.com/en-us/assets/images/logo.44fea4ca40e8a8843bb0fdf07d618439.png" alt="pepsi logo">

            </div>
            <div class="navbar-item" style="padding-left: 40px;">view products</div>
            <div class="navbar-item">what's new</div>
            <div class="navbar-item">contact us</div>
            <div class="navbar-item"></div>
            
        </div>
        <div class="navbar-right">
            <div class="navbar-item">buy pepsi products</div>
        </div>
    </div>

    <div class="product" style="background-image: url(	https://www.pepsi.com/en-us/uploads/images/nitro/Desktop_Background.png)
    ;">
            <div class="product-item">
                <img src="https://www.pepsi.com/en-us/uploads/images/nitro/Nitro_Pepsi_CAN_Glass@2x.png" alt="pepsi_apple_music">
    
            </div>
    
            <div class="product-item" >
                
                <img src="https://www.pepsi.com/en-us/uploads/images/nitro/Nitro_Logo@3x.png " alt="pepsi_apple_music" style="display: block
                ;">
                
                <div style="height: 30px;"></div>
    
               
                <div style="height: 30px;"></div>
         
            </div>
        </div>
    
    <div class="product" style="background-image: url(	https://www.pepsi.com/en-us/uploads/images/apple-music/background.png
    );">
        <div class="product-item">
            <img src="	https://www.pepsi.com/en-us/uploads/images/apple-music/pzs-can-old@2x.png" alt="pepsi_apple_music">

        </div>

        <div class="product-item" >
            
            <img src="https://www.pepsi.com/en-us/uploads/images/apple-music/apple-music-lockup-i-pad-horizontal-mobile.svg" alt="pepsi_apple_music">
            
            <div style="height: 30px;"></div>


            <div style="height: 30px;"></div>
            
            
        </div>
    </div>
    


    <div class="product" style="background-color:black
;">
        <div class="product-item">
            <img src="https://www.pepsi.com/en-us/uploads/images/pzs-new-taste/pzs-can-nobug-desktop.png" alt="pepsi_apple_music">

        </div>

        <div class="product-item" >
            
            <img src="	https://www.pepsi.com/en-us/uploads/images/pzs-new-taste/headline.svg   " alt="pepsi_apple_music">
            
            <div style="height: 30px;"></div>

           
            <div style="height: 30px;"></div>
          
            
        </div>
    </div>
   


    
</body>
</html>

css代码

body{
    margin: 0;
    font-family: "SofiaPro-Black", Helvetica Neue, Helvetica, Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    height: 1000vh;

}

.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    text-transform: uppercase;
    background-color: rgb(0, 101, 195);;
    padding: 10px;
    color: white;

}
.navbar-left{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;

}
.navbar-item{
    padding-left: 20px;
    cursor: pointer;
}
.navbar-right .navbar-item{
    border-radius: 30px;
    border: 2px solid white;
    padding: 5px 25px;
}
.product{
    display: flex;
    justify-content: space-evenly;
    align-items: center;

}
.product-item img{
    max-width: 100%;
    padding: 20px;
    

}

.product-item{
    display: flex;
    justify-content: center;
    align-items: center;

}
.product-text{
    color: white;
    font-size: 10px;
    text-align: center;
}
.product-item-column{
    flex-direction: column;

}
.product-button{
    color: white;
    border: 3px solid white;
    border-radius: 30px;
    padding: 5px 35px;
    display:flex;

   

    
    

}