您所在的位置:首页 - 热点 - 正文热点
浮动标识广告
垣苠
2024-05-08
【热点】
226人已围观
摘要###制作浮动广告的HTML与CSS代码浮动广告是网页中常见的一种广告形式,它可以吸引用户的注意力并提高广告的曝光率。下面是一个简单的示例,演示如何使用HTML和CSS创建一个浮动广告:```html
制作浮动广告的HTML与CSS代码
浮动广告是网页中常见的一种广告形式,它可以吸引用户的注意力并提高广告的曝光率。下面是一个简单的示例,演示如何使用HTML和CSS创建一个浮动广告:
```html
/* 整体容器样式 */
.adcontainer {
position: fixed;
bottom: 20px; /* 距离底部的距离 */
right: 20px; /* 距离右侧的距离 */
width: 300px; /* 广告容器宽度 */
backgroundcolor: f2f2f2;
border: 1px solid ddd;
borderradius: 5px;
boxshadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
padding: 10px;
zindex: 9999; /* 确保广告浮在其他元素之上 */
}
/* 广告样式 */
.adtitle {
fontsize: 18px;
fontweight: bold;
color: 333;
marginbottom: 10px;
}
/* 广告内容样式 */
.adcontent {
fontsize: 14px;
color: 666;
}

/* 关闭按钮样式 */
.closebtn {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
fontsize: 14px;
color: 999;
}
.closebtn:hover {
color: 333;
}
×
// 关闭广告的函数
function closeAd() {
var adContainer = document.querySelector('.adcontainer');
adContainer.style.display = 'none';
}