Html+CSS フローティング広告ストリップの実装

1.html部分

コードをコピー

コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<title>blog_floatdiv.html</title>
<meta http-equiv="キーワード" content="キーワード1,キーワード2,キーワード3">
<meta http-equiv="description" content="これは私のページです">
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">

<link rel="スタイルシート" 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>
<本文>
<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

</本文>
</html>

2.css部分

コードをコピー

コードは次のとおりです。

#fdiv{
幅:200px;
高さ: 500px;
背景: 黄色;
位置: 固定;
上: 128px;
_位置: 絶対;
_top: 式(eval(document.documentElement.scrollTop));
}
#fdiv 画像{
左マージン: 190px;
上マージン: 470px;
}

3.js部分

コードをコピー

コードは次のとおりです。

$(関数() {
$("#fdiv 画像").click(function(){
$("#fdiv").hide();
});
});

<<: Vueプラグインの書き方を説明する記事

>>: CSS トップに戻るコード例