HTML是一種可以制作網頁的語言,它有很多強大的功能,其中漸變效果非常常用。接下來我們講解如何使用HTML的漸變功能,制作一個許愿墻。
<html> <head> <style> body { background-image: linear-gradient(to bottom right, #D9A7C7, #FFDAB9); } .wish-list{ font-size: 20px; font-family: Arial; margin: 50px auto; width: 500px; border: 1px solid black; padding: 20px; background: linear-gradient(#ffffff, #f2f2f2); } .wish-list h2{ text-align: center; font-size: 30px; } .wish-list p{ font-size: 22px; margin-bottom: 10px; } </style> </head> <body> <div class="wish-list"> <h2>我的愿望清單</h2> <p>1. 希望學好HTML</p> <p>2. 希望學好CSS</p> <p>3. 希望成為一名優秀的前端工程師</p> </div> </body> </html>
代碼解釋:
在head標簽內,設置了body的漸變背景色,利用linear-gradient屬性設置上下漸變; 設置了wish-list的樣式,包括字體和邊框等,利用background屬性設置背景漸變色; wish-list中的h2設置了標題的樣式,使其居中,并設置了字體大小; wish-list中的p設置了文本的樣式,調整字體大小和底部的margin值。
這樣就制作了一個簡單的許愿墻,如果需要添加更多的許愿,可以在wish-list中通過添加更多的p標簽來實現。利用HTML的漸變效果,可以讓許愿墻更加美觀,增加它的視覺層次感,同時也會讓用戶更加愉悅地使用它。