<style>
body,ul,li,p{padding:0;margin:0px;}
ul,li{list-style-type: none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
#header_app{
height:70px;
top:0px;
width:100%;
line-height: 100%;
}
#header_app .banner{
margin:0px auto;
padding: 5px;
width:320px;
height:60px;
text-align:left;
font-size:11px;
background-color:#CCC;
}
#header_app .banner .app_img{
float:left;
padding-right:5px;
}
#header_app .banner .app_img img{
width:60px;
border-radius:10px;
}
#header_app .banner .demo_btn{
float:right;
background-color:#00ab4e;
color:#FFF;
padding:5px 10px;
border-radius:10px;
font-size:11px;
margin: 5px;
}
#footer_app{
height:70px;
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#FFF;
z-index:2;
line-height: 100%;
}
#footer_app .banner{
margin:0px auto;
width:320px;
padding: 5px;
height:60px;
text-align:left;
font-size:11px;
background-color:#00ab4e;
}
#footer_app .banner .app_img{
float:left;
padding-right:5px;
}
#footer_app .banner .app_img img{
width:60px;
border-radius:10px;
}
#footer_app .banner .demo_btn{
float:right;
background-color:#0095da;
color:#FFF;
padding:5px 10px;
border-radius:10px;
border:solid 1px #FFF;
font-size:11px;
margin: 5px;
}
.header_app_close{
background-color:#999;
color:#FFF;
cursor:pointer;
width:20px;
font-size:14px;
line-height:20px;
text-align:center;
float:right;
}
.footer_app_close{
background-color:#FFF;
color:#444;
border:solid 1px #444;
border-radius:5px;
cursor:pointer;
width:20px;
font-size:14px;
line-height:20px;
text-align:center;
float:right;
}
</style>
<style>
footer {
margin-bottom: 30px;
}
</style>
<script>
$(document).ready(function(){
$("body").prepend('<div id="header_app"><div class="banner"><div class="app_img"><img src="/image/top/ki_icon144.png"></div>アプリの説明<div class="header_app_close">×</div><div class="demo_btn">ダウンロード</div></div></div>');
$(".header_app_close").click(function() {
$("#header_app").remove();
});
$(".footer_app_close").click(function() {
$("#footer_app").remove();
});
});
</script>
bodyタグの直下にバナーを挿入するパターンと
画面下部に固定するパターンを同時に掲載しています。
<div id="footer_app">
<div class="banner">
<div class="app_img"><img src="/image/top/ki_icon144.png"></div>
アプリの説明など
<div class="footer_app_close">×</div>
<div class="demo_btn">無料ダウンロード</div>
</div>
</div>