Html+CSS浮动的广告条实现分解

2020-03-22 19:38:42

字体：大中小

来源：转载

供稿：网友

1.html部分

复制代码代码如下:
!DOCTYPE html
html
head
title blog_floatdiv.html /title
meta http-equiv="keywords" content="keyword1,keyword2,keyword3"
meta http-equiv="description" content="this is my page"
meta http-equiv="content-type" content="text/html; charset=UTF-8"
!-- link rel="stylesheet" type="text/css" href="./styles.css" --
link rel="stylesheet" type="text/css" href="./css/blog_floatdiv.css"
script type="text/javascript" src="./js/jquery-1.9.1.js" /script
script type="text/javascript" src="./js/blog_floatdiv.js" /script
/head
body
div id="fdiv"
我是浮动的div img src="images/logingb.png"
/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

/body
/html

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、css和js的注释规范用法有哪些

下一篇：Dreamweaver中CSS属性速记