Html+CSS浮動的廣告條實現(xiàn)分解

2020-03-22 19:38:42

字體：大中小

供稿：網(wǎng)友

1.html部分

復(fù)制代碼代碼如下:
!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部分

復(fù)制代碼代碼如下:
#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部分

復(fù)制代碼代碼如下:
$(function() {
$("#fdiv img").click(function(){
$("#fdiv").hide();
});
});
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：html、css和js的注釋規(guī)范用法有哪些

下一篇：Dreamweaver中CSS屬性速記