如何使用CSS实现这个网页布局
发布网友
发布时间：2022-04-21 21:52
共1个回答
热心网友
时间：2022-04-06 11:54
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<style type="text/css">
.box{width: 970px;margin: 0 auto;}
.top{width: 100%;float: left;margin-bottom: 10px;}
.top div:first-child{height: 103px;width: 277px;background: red;float: left;}
.top div:last-child{width: 679px;float: right;}
.top div:last-child span:first-child{width: 137px;height: 49px;margin-bottom: 8px;background: greenyellow;float: right;}
.top div:last-child span:last-child{width: 679px;height: 46px;background: greenyellow;float: left;}
.content{width: 100%;float: left;margin-bottom: 10px;}
.c_left{width: 310px;height: 435px;background: orange;float: left;}
.c_right{width: 650px;float: right;}
.c_right div:first-child{width: 450px;float: left;margin-bottom: 10px;}
.c_right div:first-child span:first-child{width: 450px;height: 240px;margin-bottom: 10px;background: blue;float: left;}
.c_right div:first-child span:nth-child(2){width: 450px;height: 110px;margin-bottom: 10px;background: blue;float: left;}
.c_right div:first-child span:last-child{width: 450px;height: 30px;background: blue;float: left;}
.c_right div:nth-child(2){width: 190px;float: right;height: 400px;background: palevioletred;}
.c_right div:last-child{width: 100%;float: left;height: 25px;background: green;}
.bottom{width: 100%;float: left;height: 35px;background: darkblue;}
</style>
</head>
<body>
<div class="box">
<div class="top">
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
<div class="content">
<div class="c_left"></div>
<div class="c_right">
<div>
<span></span>
<span></span>
<span></span>
</div>
<div></div>
<div></div>
</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
