您现在的位置是：网站首页> 编程资料编程资料

Html+CSS浮动的广告条实现分解_HTML/Xhtml_网页制作_

2023-11-11 300人已围观

简介广告条想必大家并不陌生吧，在本文将为大家详细介绍下如何使用Html+CSS实现浮动的广告条，感兴趣的朋友可以参考下

1.html部分

复制代码

代码如下:

blog_floatdiv.html

我是浮动的div

浮动的div
浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div 浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div
浮动的div

2.css部分

复制代码

代码如下:

#fdiv{
width:200px;
height: 500px;
background: yellow;
position: fixed;
top: 128px;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop) );
}
#fdiv img{
margin-left: 190px;
margin-top: 470px;
}

3.js部分

复制代码

代码如下:

$(function() {
$("#fdiv img").click(function(){
$("#fdiv").hide();
});
});

上一篇：HTML页面加载和解析流程详细介绍_HTML/Xhtml_网页制作_

下一篇：使select在选中/聚焦时列出所有选项目前比较好的处理方式_HTML/Xhtml_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

Html+CSS浮动的广告条实现分解_HTML/Xhtml_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢