思考下面四个图片如何布局
test1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 0px solid black;}.main{margin: 0 auto;width: 1000px;height: 900px;}.top{width: 960px;height: 200px;margin-left: 20px;background-image: url("./imgs/header.jpg");font-size: 100px;}.middle{width: 960px;height: 590px;margin-left: 20px;}.bottom{ width:960px;height: 100px;margin-left: 20px;text-align: center;}p{margin: 0px;text-indent: 2em;}</style></head><body><div class="main"><div class="top">My.WebSide</div><div class="middle"><p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。</p><p>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。</p><p>路上只我一个人，背着手踱着。这一片天地好象是我的；我也象超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。象今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处；我且受用该无边的荷香月色好了。</p><p>曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，象亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，象闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。</p><p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又象笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处─—酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又象是画在荷叶上。塘中的月色并不均匀，但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。</p><p>荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，象是特为月光留下的。树色一例是阴阴的，乍看象一团烟雾；但杨柳的丰姿，便在烟雾里也辨得出。树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打彩的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有。</p><p>忽然想起来莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流的季节。梁元帝《采莲赋》里说得好：于是妖童媛女，荡舟心许：鷁（yi）首徐回，兼传羽杯；棹将移而藻挂，船欲动而萍开。尔其纤腰束素，迁延顾步；夏始春余，叶嫩花初，恐沾裳而浅笑，畏倾船而敛裾。</p><p>可见当时嬉游的光景了。这真是有趣的事，可惜我们现在早已无福消受了。于是又记起《西洲曲》里的句子：采莲南塘秋，莲花过人头；低头弄莲子，莲子清如水.今晚若有采莲人，这儿的莲花也算得“过人头”了；只不见一些流水的影子，是不行的。这令我到底惦着江南了。这样想着，猛一抬头，不觉已是自己的门前；轻轻地推门进去，什么声息也没有，妻已睡熟好久了。</p></div><div class="bottom">版权所有©东方翱翔</div></div></body>
</html>test2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 1px solid black;}.wrap{width: 840px;height: 750px;margin: 0 auto;}.left{width: 600px;height: 710px;float: left;}.right{width: 224px;height: 710px;float: right;}.bottom{width: 840px;height: 30px;flex: none;text-align: center;font-weight: 800;}span{display: block;}.span1{font-size: 50px;background-color: aquamarine;}.span2{color: red;font-size: 30px;}.span3{text-indent: 2em;}li{list-style: none;}</style>
</head>
<body><div class="wrap"><div class="left"><span class="span1"> 杨兴盆景艺术在线</span><p class="span2">什么是盆景</p><span class="span3">盆景是中华民族优秀传统艺术之一。它以植物、山石、土、水等为材料，经过艺盆景术创作和园艺栽培，在盆中典型、集中地塑造大自然的优美景色，达到缩龙成寸、小中见大的艺术效果，同时以景抒怀，表现深远的意境，犹如立体的山水画。</span><p class="span3"> 盆景的主要材料本身即是自然物，具有天然神韵。其中植物还具有生命特征，能够随着时间推移和季节更替，呈现出不同景色。盆景是一种活艺术品，是自然美和艺术美有机结合。盆景是呈现于盆器中的风景或园林花木景观的艺术缩制品。多以树木、花草、山石、水、土等为素材，经匠心布局、造型处理和精心养护，能在咫尺空间集中体现山川神貌和园林艺术之美，成为富有诗情画意的案头清供和园林装饰，常被誉为“无声的诗，立体的画”。</p><p class="span2">如何欣赏盆景的自然美</p><span class="span3">盆景的价值在于欣赏，欣赏什么呢?欣赏盆景艺术的整体美。盆景艺术中的一草一木、一亭—桥都有欣赏价值；上乘山水盆景，可达到去一块山石嫌少，增加一块山石嫌多的地步。在盆景艺术整体美中，是以制作盆景材料的自然美为基础的，如果没有制作材料的自然美，盆景艺术就不会产生，当然就更谈不到发展了。一件作品的美，完全由人工制作而成，那不是盆景，而是工艺品。</span><p class="span3">盆景的价值在于欣赏，欣赏什么呢?欣赏盆景艺术的整体美。盆景艺术中的一草一木、一亭—桥都有欣赏价值；上乘山水盆景，可达到去一块山石嫌少，增加一块山石嫌多的地步。在盆景艺术整体美中，是以制作盆景材料的自然美为基础的，如果没有制作材料的自然美，盆景艺术就不会产生，当然就更谈不到发展了。一件作品的美，完全由人工制作而成，那不是盆景，而是工艺品。</p> </span></div><div class="right"><img src="./imgs2/bonsai.gif" alt=""><p>站点导航</p><ul><li><a href="#">关于盆景</a></li><li><a href="#">盆景养护</a></li><li><a href="#">盆景造型</a></li><li><a href="#">盆景精品</a></li></ul><p>相关链接</p><ul><li><a href="#">扬心园林</a></li><li><a href="#">扬心园林</a></li<li><a href="#">家园博客</a></li><li><a href="#">家园博客</a></li></ul></div><div class="bottom">版权所有©东方翱翔</div></div></body>
</html>test3
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 1px solid black;}#wrap{width: 900px;height: 900px;background-color: darkcyan;/*上下为0 左右为自动 */margin: 0 auto;}#top{width: 850px;height: 150px;background-image: url("./imgs3/header.jpg");margin:10px ;margin-top: 20px;padding: 5px;text-align: center;}#container{width: 850px;height: 600px;background-color: darkgrey;margin:10px ;padding: 5px;}#left{width: 200px;height: 580px;float: left;padding-left: 5px;margin-top: 5px;}#right{width: 600px;height: 580px;float: left;margin-top: 5px;}#footer{width: 850px;height: 50px;background-image: url("./imgs3/bottom_bg.gif");margin:10px ;padding: 5px;text-align: center;}.li1{display: inline-block;float: right;margin-left: 10px;}.li2{display: block;}a{font-size: 30px;display: block;text-decoration: none;margin-left: 10px;}</style>
</head><body><div id="wrap"><div id="top"><ul><li class="li1">联系我们</li><li class="li1">技术服务</li><li class="li1">产品展示</li><li class="li1">走进杨心</li><li class="li1">首页</li></ul><a href="#">www.yuze</a>版权所有©东方翱翔</div><div id="container"><div id="left"><p>市场营销</p><ul><li class=".li2">营销网络</li><li class=".li2">营销管理</li><li class=".li2">营销方案</li></ul><p>产品演示</p><ul><li class=".li2">电脑电视</li><li class=".li2">数码相机</li></ul><img src="./imgs3/ad.gif" alt=""></div><div id="right"><img src="./imgs3/yuze2.jpg" alt="">欢迎走进扬心电子科技有限公司
扬心电子科技有限公司成立于1999年8月，是一家集研发、
制造、市场营销为一体的民营电子科技股份制企业。公司的主要业务范围为视听及多媒体产品，经营项目包括有电脑视听产品、液晶电视产品、便携多媒体产品、家庭影院方案、车载娱乐方案等。目前，公司拥有员工将近2000多人，技术开发人员将近200人拥有占地310000多平方米的生产制造基地，年产量达1000万台，具备了高效率的生产实力及先进的品质控制水平，是全球最大的电脑电视接收机生产基地之一。
扬心公司多年来一直保持着高速发展的状态，
公司的产品不仅在国内有很高的市场占有率，而且在国际上也有较高的市场占有率，产品现已销往全球100多个国家和地区。在宇泽人的共同努力下，公司已有了两大支柱品牌："宇泽"与"优图"。2003年，宇泽电子科技有限公司在同行业中率先通过了ISO9001：2000认证、中国强制认证（3C认证）等认证体系，标志着公司已具备了规范化、标准化、系统化的管理水平。
扬心公司多年来一直秉承"技术领先"的理念，注重技术研发工作，不断开拓进取，保持产品推陈出新，由此取得了丰硕的成绩：现公司已经拥有数十项的实用技术专利与产品外观设计专利。经过多年的发展和实践积累，公司基本上掌握了同类产品的核心技术，公司的研发队伍也成长为一支能迅速适应市场变化，能独立开发新产品，具有相当竞争力的高素质科技队伍。先进的设备、科学的管理是成功的依托。公司高度重视生产设备、品质及管理方面的投入，大力引进先进的生产设备，推行科学的管理机制，并开始初步实施规模化经营。目前，公司生产品质及工艺技术已达国际先进水平。这些为显著提高产品性能和质量，降低产品成本创造了先决条件。公司开发销售的产品物美价廉，获得了销售商和消费者的一致好评，"扬心"逐步成为国内外电脑电视接收机市场的第一品牌。</div></div><div id="footer">版权所有©东方翱翔</div></div>
</body>
</html>test4
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 1px solid black;}#wrap{width: 980px;height: 600px;background-color: darkcyan;/*上下为0 左右为自动 */margin: 0 auto;}#top{width: 980px;height: 50px;background-color: darkgreen;margin-top: 20px;padding: 5px; }#middle{width: 975px;height: 50px;background-color: darkgreen;/* margin:10px ;padding: 5px; */}#container{width: 980px;height: 350px;background-color: darkgrey;/* margin:10px ;padding: 5px; */}#left{width: 150px;height: 340px;float: left;margin-top: 10px;}#right{width: 630px;height: 350px;float: left;text-align: center;font-size: 100px;}#right2{width: 190px;height: 350px;float: left;}#down{width: 190px;height: 320px;background-color: aquamarine;}ul{background-image: url("./imgs4/button_back.jpg");}li{list-style: none;display: inline-block;}p{text-align: center;font-weight: 700;}</style>
</head><body><div id="wrap"><img src="./imgs4/top.jpg" alt=""><div id="middle"><ul><li><a href="#">首页</a></li><li><a href="#">学校简介</a></li><li><a href="#">行政机构</a></li><li><a href="#">院校设置</a></li><li><a href="#">工会</a></li><li><a href="#">党建工作</a></li><li><a href="#">职业教育</a></li><li><a href="#">教育</a></li><li><a href="#">学生管理</a></li><li><a href="#">招生就业</a></li><li><a href="#">网络管理</a></li></ul></div><div id="container"><div id="left"><a href="#"><img src="./imgs4/l1.jpg" alt=""></a> <a href="#"><img src="./imgs4/l2.jpg" alt=""></a> <a href="#"><img src="./imgs4/l3.jpg" alt=""></a> <a href="#"><img src="./imgs4/l4.jpg" alt=""></a> <a href="#"><img src="./imgs4/l5.jpg" alt=""></a> <a href="#"><img src="./imgs4/l6.jpg" alt=""></a> </div><div id="right">内容</div><div id="right2"><img src="./imgs4/c1_3.jpg" alt=""><div id="down">留言版</div></div></div><p>版权所有©东方翱翔</p></div>
</body>
</html>
![[LeetCode] 542. 01矩阵](https://img-blog.csdnimg.cn/img_convert/7e8b72a62afa5418ca347dedb612c744.png)
