纯CSS+HTML顶部悬浮 底部悬浮

网站建设小技巧 2019-10-09 16:42:57 评论

效果图

纯CSS+HTML顶部悬浮 底部悬浮

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淮安SEO www.huaianseo.cn</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=yes"/>
<meta name="msapplication-tap-highlight" content="no" />
<meta name="applicable-device" content="mobile">
<style type="text/css">
*{margin:0;padding:0}
#toubu{height:60px;background:#FF3F05;position:fixed;top:0px; width:100%;}
#dbnav{height:60px;position:fixed;bottom:0px; width:100%;}
#dbnav img{width:100%;}
#zbu{margin:60px auto;background:#ddd;}
</style>
</head>
<body>
<div>
  <div id="toubu"><center>淮安SEO www.huaianseo.cn</center></div>
  <div id="zbu"><br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
  <div id="dbnav"><a href="/"><img src="图片地址" /></a>
</div>
</div>
</body>

评论

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!