婚禮是人生中非常重要的一個時刻,為了讓婚禮更加難忘,許多新人都會準備一份精美的請帖,而如今在設計婚禮請帖的時候,CSS技術已經成為不可或缺的一部分了。
/* 先來定義一下頁面的基本樣式 */ body { background-color: #f9f9f9; font-family: Arial, sans-serif; } .container { width: 800px; margin: 0 auto; padding-top: 50px; } .invitation { background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 30px; } .title { font-size: 24px; font-weight: bold; margin-bottom: 20px; } .info { font-size: 16px; line-height: 1.5; margin-bottom: 30px; } .date { font-size: 18px; font-weight: bold; margin-bottom: 20px; } .details { font-size: 16px; line-height: 1.5; } /* 下面就是具體的樣式了 */ .invitation { border: 5px solid #e53331; } .title { text-align: center; color: #e53331; } .info { text-align: center; color: #666; } .date { text-align: center; color: #e53331; } .details { margin-top: 30px; text-align: justify; color: #666; }
可以看到,我們首先定義了整個頁面的基本樣式,包括背景顏色、字體等等;然后定義了婚禮請帖的容器樣式和各個元素的樣式,如標題、信息、日期和詳情等等;最后是具體的樣式設置,包括容器的邊框、標題的顏色、信息的顏色等等。
通過上述CSS樣式的設置,我們就可以實現一份屬于自己的精美婚禮請帖了。