CSS是一種廣泛應(yīng)用于網(wǎng)頁設(shè)計的樣式表語言。可以使用CSS來美化和排版網(wǎng)頁的各個元素。其中,CSS也可以用來制作電子相冊,為照片添加美觀的樣式,使照片更精美。
以上是一個簡單的電子相冊HTML代碼,其中每個照片都由一個`
為了美化這些照片,可以使用CSS。以下是一個簡單的CSS代碼,可以使用CSS中的偽元素`::before`和`::after`為每個照片添加相框和陰影效果。
.photos figure { position: relative; display: inline-block; margin: 10px; border: 5px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); } .photos figure::before, .photos figure::after { content: ''; position: absolute; top: -15px; right: -15px; bottom: -15px; left: -15px; border: 5px solid #fff; } .photos figure::after { top: -20px; right: -20px; bottom: -20px; left: -20px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } .photos figcaption { text-align: center; margin-top: 10px; font-size: 18px; font-weight: bold; }
以上CSS代碼為照片添加了相框和陰影效果,同時添加了標(biāo)題的樣式。可以調(diào)整代碼中的數(shù)值來改變每個照片的樣式。
在網(wǎng)頁中使用以上代碼,就可以創(chuàng)建一個美麗的電子相冊了。