首页用hbuilder x实现4个div页面横向排版并给每个div加上背景图

用hbuilder x实现4个div页面横向排版并给每个div加上背景图

时间: 2024-10-15 08:16:26 浏览: 46

在HBuilder X中创建一个包含四个水平排列的div，并为每个div添加背景图片，你可以按照以下步骤操作： 1. **打开HBuilder X项目**：打开已有的或新建一个HTML项目的文件夹，找到index.html（或者你想存放这个布局的文件）。 2. **设置HTML结构**：将下面的HTML代码粘贴到文件中，这是四个div的基本布局，它们会在一行中水平显示： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; /* 布局模式，使元素成为Flexbox */ justify-content: space-between; /* 子元素均匀分布 */ padding: 10px; } div { width: calc(25% - 10px); /* 防止div间留空，宽度占总宽四分之一减去外边距 */ margin-bottom: 10px; } div.background-image { background-size: cover; /* 背景图片缩放至完全覆盖div */ height: 200px; /* 设置div的高度，可以根据需要调整 */ } </style> </head> <body> <div class="container"> <div class="background-image" style="background-image: url('image1.jpg')"></div> <div class="background-image" style="background-image: url('image2.jpg')"></div> <div class="background-image" style="background-image: url('image3.jpg')"></div> <div class="background-image" style="background-image: url('image4.jpg')"></div> </div> </body> </html> ``` 3. **替换背景图片路径**：确保已经将`url('image1.jpg')`, `url('image2.jpg')`, ...替换成实际的背景图片URL，如果图片在同一目录下，可以直接用文件名；如果不在，需要提供完整的相对或绝对路径。完成以上步骤后，你应该能在浏览器预览到四个div按横向并列，每个div都有各自的背景图片。

阅读全文