如何使用CSS实现这个网页布局

如图所示... 如图所示 展开
 我来答
djhty1999
2019-08-16 · TA获得超过305个赞
知道小有建树答主
回答量:552
采纳率:67%
帮助的人:68.3万
展开全部
<!DOCTYPE html>
<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>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式