HTML5是一種基于現代瀏覽器的標準,可以讓開發者構建更加炫酷的網站。下面是一份HTML5炫酷網站源代碼,讓我們來看看它是如何實現的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>炫酷網站</title> <style> body { background-color: #F6D5CC; margin: 0; padding: 0; } .header { background-color: #BF5E6D; height: 150px; display: flex; align-items: center; justify-content: center; } .header h1 { color: white; font-size: 60px; text-shadow: 3px 3px #885567; } .content { display: flex; flex-wrap: wrap; justify-content: center; } .card { background-color: white; margin: 20px; width: 300px; padding: 20px; border-radius: 10px; box-shadow: 3px 3px 10px #7A706E; } .card img { width: 100%; height: 200px; border-radius: 5px; margin-bottom: 10px; } .card h2 { font-size: 24px; color: #BF5E6D; margin: 0; } .card p { font-size: 16px; color: #7A706E; } </style> </head> <body> <div class="header"> <h1>炫酷網站</h1> </div> <div class="content"> <div class="card"> <img src="img1.jpg"> <h2>圖片標題</h2> <p>這里是描述文字。</p> </div> <div class="card"> <img src="img2.jpg"> <h2>圖片標題</h2> <p>這里是描述文字。</p> </div> <div class="card"> <img src="img3.jpg"> <h2>圖片標題</h2> <p>這里是描述文字。</p> </div> </div> </body> </html>
上面的代碼中,我們使用了HTML5的一些特性,如flexbox布局、陰影效果等,實現了一個簡單而又炫酷的網站。希望這份代碼可以給你一些啟發,開發出更加出色的網站。