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

HTML5代码实例:HTML5全屏API

2017-10-20 15:58 387 查看

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "网页链接

<html xmlns="网页链接

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>html5-fullscreen-api</title>

<style>

*{margin:0; padding:0}

img{ display:block; margin:0 auto}

.imgContainer:-webkit-full-screen {

width:100%; height:100%; background:#060; overflow:hidden; background:#000;text-align:center;

position:fixed;

left:0; top:0;

display:table-cell;

bottom:0; right:0;

}

.imgContainer:-moz-full-screen {

width:100%; height:100%; background:#060;overflow:hidden; background:#000;text-align:center;

position:fixed;

left:0; top:0;

bottom:0; right:0;

display:table-cell;

vertical-align:middle

}

.imgContainer:-webkit-full-screen img{ max-width:100%; display:inline-block; vertical-align:middle ;cursor:url("网页链接),auto;

}

.imgContainer:-moz-full-screen img{ max-width:100%; display:inline-block;vertical-align:middle;cursor:url("网页链接),auto;

}

</style>

</head>
<body>

<h1 align="center"></h1>

<div class="imgContainer">

<a href="javascript:void(0)"><img src="网页链接

<div class="imgContainer">

<a href="javascript:void(0)"><img src="网页链接

</body>

</html>
用chrome或者firefox直接运行即可。。。

WEB前端学习交流群21 598399936

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

标签：

相关文章推荐

新的分享

章节导航