HTML5 Banner是一種由HTML、CSS和JavaScript組成的數字廣告,用于宣傳產品和服務。它可以在不同設備上運行,包括手機、電腦和平板電腦。
HTML5 Banner的代碼通常包括HTML、CSS和JavaScript三個部分。其中,HTML用于結構化文本和圖像;CSS用于美化布局和顏色;JavaScript用于交互和動畫效果。
下面是一個HTML5 Banner的代碼示例:
<div id="banner"> <img src="logo.png" alt="Logo"> <p>Welcome to Our Website</p> <button id="btn">Learn More</button> </div> <style> #banner { background-color: #fff; width: 300px; height: 250px; position: relative; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); } #banner img { position: absolute; top: 10px; left: 10px; width: 50px; height: 50px; } #banner p { font-size: 20px; color: #333; position: absolute; top: 80px; left: 80px; } #banner button { background-color: #20369b; color: #fff; font-size: 16px; border: none; border-radius: 4px; position: absolute; bottom: 20px; right: 20px; padding: 10px 20px; cursor: pointer; } </style> <script> var btn = document.getElementById("btn"); btn.onclick = function() { alert('Welcome to Our Website'); } </script>
該代碼包括一個div容器作為Banner的容器,內部包括一個圖片、一段文字和一個按鈕,圖片和文字使用CSS進行定位和美化,按鈕使用JavaScript綁定一個點擊事件。
HTML5 Banner廣告的優勢在于它可以在不同的設備和平臺上適應自適應的尺寸和屏幕比例,同時支持各種交互和動畫效果,能夠增強用戶的體驗和品牌的影響力。
下一篇set在vue2作用