CSS 的表白相冊，能夠讓你向你喜歡的人表達你的愛意，而且還相當?shù)睦寺陀腥ぁ＿@篇文章將告訴你如何創(chuàng)建自己的 CSS 表白相冊，完整的代碼片段也將呈現(xiàn)在下面。
<html>
<head>
<title>我的表白相冊</title>
<style>
/* 背景圖片 */
body {
background-image: url("https://image.freepik.com/free-photo/heart-shaped-red-rose-petals_23-2147736111.jpg");
background-size: cover;
background-repeat: no-repeat;
}
/* 容器 */
.container {
width: 600px;
margin: 0 auto;
padding: 50px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/* 標題 */
h1 {
text-align: center;
font-size: 50px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: #d80032;
}
/* 表白文字 */
p {
text-align: center;
font-size: 24px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: #d80032;
margin-bottom: 30px;
}
/* 按鈕 */
button {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #d80032;
color: #fff;
font-size: 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
border-radius: 5px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #ff4d6e;
}
</style>
</head>
<body>
<div class="container">
<h1>表白相冊</h1>
<p>親愛的 XX，您在我心中的地位非常重要，我想對您說：“我愛你！”</p>
<button>確認</button>
</div>
</body>
</html>希望這個 CSS 表白相冊能夠幫助你成功地向你所愛的人表達你的感情。祝愿你幸福快樂！