练习写网页（静态） oneday

网页样式图

划块写网页
一、header

1.html代码

<header>
    <nav class="nav">
        <ul>
            <li><span>HOME</span></li>
            <li><span>PHOTOAPP</span></li>
            <li><img src="素材/网页/logo.png" alt=""></li>
            <li><span>DESIGN</span></li>
            <li><span>DOWNLOAD</span></li>
        </ul>
    </nav>
    <div class="one">
        <h1>YOUR LIF E, A PHOTO</h1>
        <p>print your life in a simple photo</p>
        <div class="btn">
            <span>GET START E D</span>
        </div>
    </div>
    <div class="image">
        <img src="素材/网页/banner_1.png" alt="">
        <img src="素材/网页/banner_2.png" alt="">
        <img src="素材/网页/banner_3.png" alt="">
    </div>
</header>

2.css代码

*{
   
    margin: 0;
    padding: 0;
}
    header{
   
        background-image: url("素材/网页/header-photo.png");
        margin: 0 auto;
        width: 1300px;
        height: 654px;
        background-size: cover;
        background-position:left bottom;
        position: relative;
    }
    .nav{
   
        overflow: hidden;
        padding: 45px 250px 0 250px;

    }
    .nav img{
   
        display: inline-block;
    }
    .nav ul{
   
        margin-left: 100px;
    }
    .nav ul li{
   
        list-style-type: none;
        float: left;
        margin-right: 70px;
    }
    .nav ul li span{
   
        color: rgb(247,244,247);
        font-size: 15px;
    }
    .one{
   
        text-align: center;
        margin-top: 220px;
        margin-left: -20px;
    }