首页html里创建自己的相册网页，在网页上使用<div>标记创建一个大盒子，在大盒子中在创建四个小盒子，在小盒子中放入自己的照片，定义csds样式

html里创建自己的相册网页，在网页上使用<div>标记创建一个大盒子，在大盒子中在创建四个小盒子，在小盒子中放入自己的照片，定义csds样式

时间: 2024-09-30 20:07:49 浏览: 33

创建HTML相册网页并使用`<div>`标签来组织结构可以按照以下步骤进行： 1. 首先，在HTML文档的`<head>`部分，添加CSS链接或者`<style>`标签来定义样式，这样你可以在内部直接编写自定义样式： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>我的相册</title> <style> .album-container { display: flex; justify-content: space-between; /* 分布大盒子内的小盒子 */ padding: 20px; } .photo-box { width: calc(25% - 20px); /* 计算每个小盒子宽度，减去边距 */ height: auto; margin-bottom: 20px; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); } img { width: 100%; /* 照片适应小盒子大小 */ max-height: 300px; } </style> </head> <body> ``` 2. 接下来，在`<body>`部分，使用`<div>`标签来构建你的相册容器和小盒子： ```html <div class="album-container"> <div class="photo-box"> <img src="image1.jpg" alt="照片1"> </div> <div class="photo-box"> <img src="image2.jpg" alt="照片2"> </div> <div class="photo-box"> <img src="image3.jpg" alt="照片3"> </div> <div class="photo-box"> <img src="image4.jpg" alt="照片4"> </div> </div> ``` 这里假设你已经有了`image1.jpg`, `image2.jpg`, `image3.jpg`, 和 `image4.jpg` 这样的图片文件，将它们替换为实际的图片路径。

阅读全文