html5 头和底部导航固定

最新推荐文章于 2025-03-16 12:43:49 发布

原创最新推荐文章于 2025-03-16 12:43:49 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.content {

}
.nav {
width:100%;
height:30px;
margin:0 auto;
background:#f00;
position:fixed;
bottom:0;
text-align:center;

}
.navtop {
width:100%;
height:30px;
margin:0 auto;
background:#f00;
position:fixed;
top:0;
text-align:center;

}
</style>
</head>
<body>
<div class="navtop">头导航</div>
<div class="content">
收快递费建设大街法律手段<br/>
收快递费建设大街法律手段<br/>
收快递费建设大街法律手段<br/>
<canvas id="myCanvas" width="200" height="100"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>

<svg width="500" height="190">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<circle cx="300" cy="50" r="40" stroke="black" stroke-width="2" fill="blue" />
</svg>
</div>
<div class="nav">导航</div>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
</body>
</html>