<!- 双飞翼模型--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100%; height: 500px; } .boxcenter{ width: 100%; float: left; height: 500px; background: #292929; } .boxleft{ width: 250px; height: 500px; float: left; margin-left: -100%; background: red; } .boxright{ width: 250px; height: 500px; float: left; margin-left: -250px; left: -250px; background: yellow; } p{ padding-left: 250px; } </style> </head> <body> <div class="box"> <div class="boxcenter"><p>中间</p></div> <div class="boxleft">左边</div> <div class="boxright">右边</div> </div> </body> </html> <!- 聊天框--><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pic{ box-shadow: 10px 10px 10px 10px rgba(0,0,0,.5); } .dia{ width: 200px; height: 40px; text-align: center; line-height: 40px; border-radius: 5px; background: orange; margin: 100px auto; position: relative; } .dia:after{ content: "\200B"; display: block; width: 0; height: 0; border:10px solid transparent; border-right: 10px solid orange; position: absolute; left: -20px; top: 7px; } </style> </head> <body> <div> <img src="0901/mutimedia.jpg" class="pic"> </div> <p class="dia">sdjvnsubguv</p> </body> </html>
双飞翼模型---聊天框
最新推荐文章于 2025-03-10 10:52:37 发布
669

被折叠的 条评论
为什么被折叠?



