做一个简单的CSS网页

做成这样的就可以了

斜角帮你做了个框架，填充内容那种不难自己搞下应该就行了

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
    body{padding:0;margin:0}
    .block{position:relative;padding:20px;color:#fff}
    .block:after{content:'';position:absolute;width:100%;z-index:2;height:80px;bottom:0;left:0;transform:skewY(-2deg);transform-origin:right}
    .reverse{padding-top:60px}
    .reverse:after{transform:skewY(2deg);transform-origin:left}
    .block .content{max-width:640px;margin:0 auto;padding:30px;position:relative;z-index:9}
    .block1,.block1:after{background:#545763;}
    .block2,.block2:after{background:#213141;}
    .block3,.block3:after{background:#218868;}
    .block4,.block4:after{background:#3f4e85;}
    .block5,.block5:after{background:#2e314a;}
    .block5:after{height:0;transform:skewY(0)}
</style>

<div class="block block1">
    <div class="content">
        1<br />2<br />3<br />4
    </div>
</div>
<div class="block block2 reverse">
    <div class="content">
        1<br />2<br />3<br />4
    </div>
</div>
<div class="block block3">
    <div class="content">
        1<br />2<br />3<br />4
    </div>
</div>
<div class="block block4 reverse">
    <div class="content">
        1<br />2<br />3<br />4
    </div>
</div>
<div class="block block5">
    <div class="content">
        1<br />2<br />3<br />4
    </div>
</div>

有偿

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632