如何设置这个图的html框架?

如何设置这个图的html框架?,第1张

整体思路,先设置两个div,分别把width:25%;width:75%;然后在左边的div里面再写两个div,分别把两个div的width:50%;width:50%;代码如下。全部手写,如果满意,望采纳。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#left{height: 200px;width: 25%;background: #00FF00;float: left;}
#right{height: 200px;width: 75%;background: #FF8080;float: left;}
#left_left{height: 200px;width: 50%;background: #FFFF00;float: left;}
#left_right{height: 200px;width: 50%;background: #FF80FF;float: left;}
</style>
</head>
<body>
<div id="left">
<div id="left_left">左边div的左边把width:50%;</div>
<div id="left_right">左边div的右边把width:50%;</div>
</div>
<div id="right">整体左边width:25%;<br/>整体右边width:75%;</div>
</body>
</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13399529.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-29
下一篇 2023-07-29

发表评论

登录后才能评论

评论列表(0条)

保存