HTML5電影宣傳圖需要先定義一些標簽,如下:
<html> <head> <title>HTML5電影宣傳圖</title> <meta charset="UTF-8"> </head> <body>
然后,我們需要定義一些樣式來為宣傳圖設置背景、邊框等等,代碼如下:
<style> body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; border: 2px solid black; } .poster { width: 50%; margin: 0 auto; text-align: center; padding: 20px; background-color: white; border: 1px solid black; box-shadow: 5px 5px 5px grey; } h1 { font-size: 48px; color: red; } p { font-size: 24px; color: black; margin: 20px 0; } </style>
接下來,我們就可以創建宣傳圖的HTML結構,如下:
<div class="poster"> <h1>HTML5電影之旅</h1> <p>點擊開始電影之旅,探索更多有趣的世界!</p> <button>開始</button> </div>
最后,我們將以上代碼整合到一起,即可得到一份HTML5電影宣傳圖的代碼。
<html> <head> <title>HTML5電影宣傳圖</title> <meta charset="UTF-8"> <style> body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; border: 2px solid black; } .poster { width: 50%; margin: 0 auto; text-align: center; padding: 20px; background-color: white; border: 1px solid black; box-shadow: 5px 5px 5px grey; } h1 { font-size: 48px; color: red; } p { font-size: 24px; color: black; margin: 20px 0; } </style> </head> <body> <div class="poster"> <h1>HTML5電影之旅</h1> <p>點擊開始電影之旅,探索更多有趣的世界!</p> <button>開始</button> </div> </body> </html>
下一篇php獲取css值