最近,我和我的好朋友馬上就要畢業了,我們特意選了一天去拍了一組雙人畢業照來留念,結果照片拍得非常好,讓我們非常開心。于是我決定制作一個CSS模板,在我的網站上分享這些照片。
body { font-family: Arial, sans-serif; color: #555555; background-color: #f0f0f0; } h1 { text-align: center; font-weight: bold; font-size: 36px; margin-top: 50px; margin-bottom: 30px; } .container { max-width: 1000px; margin: 0 auto; padding: 10px; } .photos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .photos img { width: 400px; height: 600px; margin: 20px; } .caption { text-align: center; font-size: 24px; margin-top: 20px; } .button { display: block; text-align: center; font-size: 18px; font-weight: bold; border-radius: 5px; margin: 50px auto 20px; padding: 15px 30px; background-color: #2e8ece; color: #ffffff; text-decoration: none; } .button:hover { background-color: #3867af; }
我使用了flexbox布局來創建一個相冊,flex-wrap屬性允許瀏覽器自動向下換行。我還添加了一些簡單的CSS效果,如圓角按鈕、懸停效果和適當的間距,使整個雙人畢業照相冊看起來更好看。
這個CSS模板可以應用到所有的照片集合上,并幫助你展示所有的照片。雙人畢業照不僅僅是一張照片,而是一段回憶。讓我們利用CSS模板,分享我們的快樂和回憶吧!
上一篇CSS模板素材視頻霸氣
下一篇css橫屏怎么寫