如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
html如何让body占满整个屏幕
来源：互联网
2023-03-16 19:13:16 399
超文本标记语言，标准通用标记语言下的一个应用。是 网页制作必备的编程语言
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
工具/原料
- 电脑
- HTML编辑器
方法/步骤
第一步：编写HTML页面主要包括是窗口全屏（类似F11的功能）让body独占整个空间。
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>demo/title>
script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">/script>
/head>
body>
button onclick="requestFullScreen(document.documentElement)">body全屏/button>
button onclick="exitFull()">退出全屏/button>
div>
ul >
li>
img src="img/cartoon/1116422.gif"/>br />
魁拔1/
/li>
li>
img src="img/cartoon/A011.jpg"/>br />
血色苍穹/
/li>
li>
img src="img/cartoon/A018.jpg"/>br />
纳米核心/
/li>
li>
img src="img/cartoon/海贼王.jpeg"/>br />
海贼王/
/li>
/ul>
/div>
script>
// 窗口状态改变事件
fullscreenchange(document, function(isFull) {
console.log(isFull);
});
/* 封装 */
// 窗口状态改变
function fullscreenchange(el, callback) {
el.addEventListener("fullscreenchange", function () {
callback && callback(document.fullscreen);
});
el.addEventListener("webkitfullscreenchange", function () {
callback && callback(document.webkitIsFullScreen);
});
el.addEventListener("mozfullscreenchange", function () {
callback && callback(document.mozFullScreen);
});
el.addEventListener("msfullscreenchange", function () {
callback && callback(document.msFullscreenElement);
});
}
// 全屏
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome等
element.mozRequestFullScreen || //FireFox
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
}else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏
function exitFull() {
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //Chrome等
document.webkitExitFullscreen || //FireFox
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
}else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
/script>
/body>
/html>
素材如下：
第二步：测试F11的功能。
打开页面，按F11键全屏页面再次按下F11键返回
第三步：测试body全屏功能。
F11实现的功能和按钮body全屏实现的功能基本 一致，区别是F11全屏只能F11返回。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTMLJAVASCRIPT
上一篇：html5如何让js特效显示在视频背景上层 下一篇：layui使用搜索选择框
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 438 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)