首页利用html语言制作一个页面，上面有浮动广告（浮动广告为插入图片且可关闭）代码

利用html语言制作一个页面，上面有浮动广告（浮动广告为插入图片且可关闭）代码

时间: 2023-06-17 12:03:20 浏览: 160

以下是一个简单的 HTML 页面，带有一个浮动广告和一个可关闭的按钮： ```html <!DOCTYPE html> <html> <head> <title>浮动广告示例</title> <style> #floating-ad { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ccc; padding: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); z-index: 9999; } #floating-ad img { max-width: 100%; display: block; } #close-btn { position: absolute; top: 0; right: 0; padding: 5px; background-color: #000; color: #fff; font-size: 16px; cursor: pointer; } </style> </head> <body> <div id="floating-ad"> <img src="https://example.com/advert.jpg" alt="广告"/> <div id="close-btn">X</div> </div> <p>这是一个浮动广告示例。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet blandit mauris. Nam vitae malesuada risus. Donec at nunc nec elit egestas interdum quis non nisl. Fusce sit amet erat vel eros hendrerit fringilla.</p> <script> document.getElementById("close-btn").addEventListener("click", function() { document.getElementById("floating-ad").style.display = "none"; }); </script> </body> </html> ``` 在这个示例中，我们使用了 CSS 的 `position` 属性来将广告固定在页面上，并使用 `top` 和 `left` 属性将其放置在页面的中心位置。我们还添加了一个黑色的关闭按钮，当用户点击它时，广告将消失。JavaScript 代码监听按钮的点击事件，并将广告的 `display` 属性设置为 `none`，从而隐藏它。请注意，这只是一个简单的示例，实际的浮动广告可能需要更复杂的代码和样式来实现。

阅读全文