您的位置：首页 > Web前端 > HTML5

html5 头和底部导航固定

2017-01-19 11:50 204 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航