首页1.制作如图所示列表框（要求外层盒子宽度为238px，高度296px，图片和列表内容自定）

1.制作如图所示列表框（要求外层盒子宽度为238px，高度296px，图片和列表内容自定）

时间: 2024-12-12 13:17:24 浏览: 6

创建一个如图所示的带图片和列表内容的列表框，首先需要使用HTML和CSS来构建基础结构。在这个例子中，我会提供一个基本的HTML结构，同时设置相应的CSS样式来满足您的尺寸需求。 ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { width: 238px; height: 296px; display: flex; background-color: lightgray; /* 设置背景色 */ border-radius: 5px; /* 添加圆角 */ } .image-section { flex: 0 0 auto; /* 图片部分占位固定宽度 */ margin-right: 10px; } .list-section { flex-grow: 1; /* 列表内容自适应剩余空间 */ } .listBox { list-style-type: none; padding: 0; overflow-y: auto; /* 滚动条 */ } .listBox-item { padding: 5px; } </style> </head> <body> <div class="container"> <div class="image-section"> <img src="your-image-url" alt="图片描述">  </div> <div class="list-section"> <ul class="listBox"> <li class="listBox-item">列表项1</li> <li class="listBox-item">列表项2</li>  </ul> </div> </div> </body> </html> ```

阅读全文