首页用html写一个渐变长方形里面左边插入一张图片右边再有两个小矩形

用html写一个渐变长方形里面左边插入一张图片右边再有两个小矩形

时间: 2024-12-06 07:33:27 浏览: 14

在HTML中创建一个渐变背景的长方形，并在其左侧插入一张图片，同时右侧包含两个小矩形，可以结合CSS样式来实现。这里是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { width: 400px; height: 300px; background: linear-gradient(to right, #f1c40f, #e67e22); /* 渐变颜色 */ position: relative; /* 设置容器为相对定位 */ } .left-image { position: absolute; left: 50px; /* 图片位置 */ top: 50%; /* 图片垂直居中 */ transform: translateY(-50%); /* 图片水平居中 */ width: 100px; height: 100%; } .small-boxes { position: absolute; right: 50px; /* 小矩形位置 */ width: 80px; height: 100%; top: 0; } .box1 { background-color: #3498db; float: left; margin-right: 10px; } .box2 { background-color: #2ecc71; float: left; } </style> </head> <body> <div class="container"> <img class="left-image" src="your_image_url.jpg" alt="Your Image">  <div class="small-boxes"> <div class="box1"></div> <div class="box2"></div> </div> </div> </body> </html> ``` 在这个例子中，`.container` 容器设置了渐变背景，`.left-image` 定义了图片的位置和大小，`.small-boxes` 中的`.box1` 和 `.box2` 则创建了两个小矩形。

阅读全文