HTML和CSS是網頁開發的基礎技術，通過它們可以構建出美觀、響應式的網頁。下面我來分享一下我的個人相冊頁面的HTML和CSS代碼，希望能夠幫到你。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的相冊</title>
<style>
/* 頁面樣式 */
body {
margin: 0;
padding: 0;
font-family: 'Microsoft Yahei', sans-serif;
background-color: #f2f2f2;
}
h1 {
font-size: 36px;
text-align: center;
margin-top: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.photo {
max-width: 300px;
margin: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
transition: transform 0.3s ease;
}
.photo:hover {
transform: scale(1.05);
}
.photo img {
width: 100%;
height: auto;
display: block;
}
.caption {
padding: 10px;
background-color: #fff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.caption h2 {
font-size: 24px;
margin: 0;
}
.caption p {
font-size: 16px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>我的相冊</h1>
<div class="container">
<div class="photo">
<img src="photo1.jpg" alt="">
<div class="caption">
<h2>美麗的風景</h2>
<p>這是我在旅游中拍攝的美麗風景</p>
</div>
</div>
<div class="photo">
<img src="photo2.jpg" alt="">
<div class="caption">
<h2>可愛的小狗</h2>
<p>這是我家的小狗，它太可愛了</p>
</div>
</div>
<div class="photo">
<img src="photo3.jpg" alt="">
<div class="caption">
<h2>美食大pk</h2>
<p>這是我和朋友們在餐廳享受的美食大pk</p>
</div>
</div>
<div class="photo">
<img src="photo4.jpg" alt="">
<div class="caption">
<h2>健身時刻</h2>
<p>這是我在健身房鍛煉的零距離</p>
</div>
</div>
</div>
</body>
</html>以上是我的相冊頁面的HTML和CSS代碼，我通過flex布局展示了四張圖片，同時加入了一些交互效果，使頁面更加生動。你可以通過修改樣式、圖片等來定制自己的相冊頁面，祝愿你編寫出美麗的個人相冊。
上一篇new vue表格