网页布局模板

·css部分

<style>.header{ width: 970px; height: 80px; margin: 0 auto; margin-bottom: 10px;/*要写在margin后面*/}.header .logo{ float: left; width: 270px; height: 80px; background-color: #ffefd5;}.header .language{ float: right; width: 137px; height: 30px; background-color: #ffdab9; margin-bottom: 8px;}.header .nav{ float: right; width: 680px; height: 42px; background-color: #fff8dc;}.content{ width: 970px; height: 435px; margin: 0 auto; }.content .ad{float: left;width: 310px;height: 435px;background-color: #eed5b7;}.content .rightpart{ float: left; width: 650px; height: 435px; margin-left:10px; }.content .rightpart .up{ width: 650px; height: 400px; }.content .rightpart .link{ width: 650px; height: 25px; margin-top:10px;background-color: #fffacd;}.content .rightpart .up .up_1{ float: left; width: 450px; height: 400px; margin-right: 10px;}.content .rightpart .up .gallary{float: left; width: 190px; height: 400px; background-color: #ffe4e1;}.content .rightpart .up .up_1 .news{width: 450px;height: 240px;background-color: #ffc1c1;margin-bottom: 10px;}.content .rightpart .up .up_1 .info{width: 450px;height: 110px;background-color: #fff0f5;margin-bottom: 10px;}.content .rightpart .up .up_1 .hot{width: 450px;height: 30px;background-color: #eeb4b4;}.footer{width: 970px;height: 35px;background-color: #eecfa1;margin: 0 auto;margin-top:10px;}</style>

·div部分

<body><div class="header"><div class="logo"></div><div class="language"></div><div class="nav"></div></div> <div class="content"><div class="ad"></div><div class="rightpart"><div class="up"><div class="up_1"><div class="news"></div><div class="info"></div><div class="hot"></div></div><div class="gallary"></div></div><div class="link"></div></div></div> <div class="footer"></div></body>

·布局成品

在这里插入图片描述

{{item.like > 0 ? item.like : '点赞'}} {{item.comment_content_show ? '取消' : '回复'}} 删除

回帖

{{reply.like > 0 ? reply.like : '点赞'}} {{reply.comment_content_show ? '取消' : '回复'}} 删除

收起