首页通过DIV+CSS完成一个个人主页或者照片墙的设计。个人照片的图片路径为“pic/photo*.jpg”；样式表请采用内部定义的方式。（要求图片最多为5张，而且分别为photo1-photo5，图片类型为jpg，每张图片的原始大小为200*200）。

通过DIV+CSS完成一个个人主页或者照片墙的设计。个人照片的图片路径为“pic/photo.jpg”；样式表请采用内部定义的方式。（要求图片最多为5张，而且分别为photo1-photo5，图片类型为jpg，每张图片的原始大小为200200）。

时间: 2023-05-24 15:03:21 浏览: 108

以下是一个简单的个人主页设计示例，使用DIV和CSS进行布局和样式定义： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Personal Homepage</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; } .photo { margin: 10px; width: 200px; height: 200px; background-size: cover; background-position: center; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.3); } .photo1 { background-image: url('pic/photo1.jpg'); } .photo2 { background-image: url('pic/photo2.jpg'); } .photo3 { background-image: url('pic/photo3.jpg'); } .photo4 { background-image: url('pic/photo4.jpg'); } .photo5 { background-image: url('pic/photo5.jpg'); } </style> </head> <body> <div class="container"> <div class="photo photo1"></div> <div class="photo photo2"></div> <div class="photo photo3"></div> <div class="photo photo4"></div> <div class="photo photo5"></div> </div> </body> </html> 在这里，我们首先定义了一个名为“container”的DIV，它将所有个人照片包含在内，并使用“flex”布局将它们以列的形式排列。每个照片都是一个名为“photo”的DIV，具有200x200的固定大小，并设计为圆形，具有阴影效果。使用CSS的背景图像属性，我们将每张照片的路径分别设置为“pic/photo1.jpg”到“pic/photo5.jpg”，并分别为每个DIV分配类名“photo1”到“photo5”。最后，通过在HTML页面中使用这些类名将每个DIV与其相应的照片绑定在一起，并根据需要进行微调，例如设置边距、对齐和其他样式属性。