首页HTML网页做一个自动浮动的站点出售的飘窗

HTML网页做一个自动浮动的站点出售的飘窗

时间: 2023-11-21 16:05:14 浏览: 54

您可以使用CSS中的position属性来实现浮动窗口的效果。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>自动浮动的站点出售的飘窗</title> <style type="text/css"> #floating-window { position: fixed; bottom: 10px; right: 10px; background-color: #fff; padding: 10px; box-shadow: 1px 1px 10px #333; transition: all 0.2s ease-in-out; } #floating-window:hover { transform: translateX(-10px); box-shadow: 1px 1px 20px #333; } </style> </head> <body> <div id="floating-window"> <h3>站点出售</h3> <p>欢迎来到我们的站点出售页面，我们提供各种类型的网站出售服务。</p> <button>点击购买</button> </div> </body> </html> ``` 在上面的代码中，我们使用了CSS的`position: fixed`属性使得浮动窗口固定在页面上，同时使用`bottom`和`right`属性将浮动窗口定位在页面的右下角。当鼠标悬停在浮动窗口上时，我们使用CSS的`transform`属性和`box-shadow`属性使得浮动窗口产生动画效果和阴影效果。您可以根据自己的需求来修改代码中的样式和内容。