通过DIV+CSS完成一个个人主页或者照片墙的设计。个人照片的图片路径为“pic/photo*.jpg”;样式表请采用内部定义的方式。
时间: 2024-06-03 22:07:52 浏览: 6
<!DOCTYPE html>
<html>
<head>
<title>个人主页</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
margin: 20px;
text-align: center;
font-size: 36px;
font-weight: bold;
color: #555;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
}
.photo {
width: 300px;
height: 300px;
margin: 20px;
background-size: cover;
background-position: center;
border-radius: 50%;
box-shadow: 0 0 10px #ccc;
}
.photo:hover {
transform: scale(1.1);
box-shadow: 0 0 20px #ccc;
}
.photo:nth-of-type(2n) {
transform: rotate(15deg);
}
.photo:nth-of-type(3n) {
transform: rotate(-15deg);
}
.photo:nth-of-type(4n) {
transform: rotate(30deg);
}
.photo:nth-of-type(5n) {
transform: rotate(-30deg);
}
</style>
</head>
<body>
<h1>个人照片墙</h1>
<div class="container">
<?php
for ($i=1; $i<=10; $i++) {
echo '<div class="photo" style="background-image: url(pic/photo'.$i.'.jpg)"></div>';
}
?>
</div>
</body>
</html>