在網頁設計中,制作效果炫酷的電影票頁面是一個很好的練習。而實現這種效果的關鍵,就是掌握CSS(層疊樣式表)技術。
下面是一個簡單的CSS電影票樣式代碼,可以幫助你快速地下載并使用:
/*電影票樣式*/ .movie-ticket { width: 500px; height: 300px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 20px; font-family: Arial, sans-serif; font-size: 16px; color: #333; text-align: center; } /*電影票標題*/ .movie-ticket h2 { font-size: 24px; margin-bottom: 20px; color: #f60; } /*票價*/ .movie-ticket .price { font-size: 20px; color: #f60; margin-bottom: 10px; } /*座位信息*/ .movie-ticket .seat-info { font-size: 16px; margin-bottom: 20px; } /*時間和影院信息*/ .movie-ticket .info { font-size: 14px; color: #999; } /*底部按鈕*/ .movie-ticket .button { display: inline-block; background-color: #f60; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; margin-top: 30px; } /*鼠標放上去的效果*/ .movie-ticket .button:hover { background-color: #c50; }
使用上面的代碼,你可以快速地制作出一個非常炫酷的電影票,讓你的網頁設計更加出彩!