整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
色大氣全屏背景通用登錄頁面html模板是一款適用于PC端和手機端的登錄界面模板、APP登錄界面模板。現在就業非常重要的一個項目你準備好了嗎？下午小編教你從無到有的敲代碼敲出自己博客最重要的項目 高薪就業輕松2倍。
<!DOCTYPE html>
<html lang="en">
<head>
<title>藍色登錄界面HTML代碼</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--圖標樣式-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--布局框架-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<!--主要樣式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="limiter">
<div class="container-login100" style="background-image: url('images/img-01.jpg');">
<div class="wrap-login100 p-t-190 p-b-30">
<form class="login100-form validate-form">
<div class="login100-form-avatar">
<img src="images/avatar-01.jpg" alt="AVATAR">
</div>
<span class="login100-form-title p-t-20 p-b-45">Hello</span>
<div class="wrap-input100 validate-input m-b-10" data-validate="請輸入用戶名">
<input class="input100" type="text" name="username" placeholder="用戶名" autocomplete="off">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
</div>
<div class="wrap-input100 validate-input m-b-10" data-validate="請輸入密碼">
<input class="input100" type="password" name="pass" placeholder="密碼">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock"></i>
</span>
</div>
<div class="container-login100-form-btn p-t-10">
<button class="login100-form-btn">登 錄</button>
</div>
<div class="text-center w-full p-t-25 p-b-230">
<a href="#" class="txt1">忘記密碼？</a>
</div>
<div class="text-center w-full">
<a class="txt1" href="#">
立即注冊
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</form>
</div>
</div>
</div>
<script src="vendor/jquery/jquery-1.12.4.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
大家需要這個項目css代碼，js，圖片做練習的可以找我免費領取，如果大家不怕麻煩可以關注我后私信我“前端學習資料”幾個字 找我領取 24小時在線！
3C制定了關于在HTML5中全屏的API但是只能由用戶事件觸發，所以不能自動全屏；用戶事件觸發方法如下：
必須用戶事件觸發（可以是鼠標事件，鍵盤事件等）
全屏樣式CSS
各種瀏覽器都提供了一個非常有用的全屏模式時的css樣式規則：
另外某些瀏覽器可以通過meta直接設置全屏
前遇到一個需要在瀏覽器全屏展示頁面的效果,我們經常使用的就是requestFullscreen和exitFullscreen，來進行全屏或者退出全屏，但有時候我們可能需要獲取打開全屏時的窗口權限信息，這種情況下就需要使用getScreenDetails了
代碼如下
<div class="wrap">
<div class="content">
Setting Screen
</div>
<div class="btn">
<button id="full-screen" onclick="fullScreen()">全屏</button>
<button id="exit-full-screen" onclick="exitFullScreen()">退出全屏</button>
</div>
</div>
<script>
//獲取全屏元素，可以是具體元素或者body
const wrap = document.querySelector('.wrap')
let primaryScreen = null
async function fullScreen () {
// 檢測網頁是否有全屏元素
if(!document.fullscreenElement){
console.log('/screen.html [43]--1','full-screen',document.fullscreenElement);
try {
if(!primaryScreen) {
//獲取可以全屏的窗口信息
primaryScreen = (await getScreenDetails()).screens.find(
(screen) => screen.isPrimary,
);
}
console.log('/screen.html [54]--1','primaryScreen',primaryScreen);
//將窗口信息傳給requestFullscreen,窗口將彈出確認彈框
await wrap.requestFullscreen({ screen: primaryScreen });
} catch (err) {
console.error(err.name, err.message);
}
}
}
function exitFullScreen () {
// 檢測網頁是否有全屏元素
if(document.fullscreenElement) {
// document 退出全屏
document.exitFullscreen()
console.log('/screen.html [43]--1','exit-full-screen',document.fullscreenElement);
}
}
如圖所示，點擊允許將獲取同意全屏窗口的信息
PS:
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
