<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <!-- 最新版本的 Bootstrap 核心 CSS 檔案 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 最新的 fontawesome 核心 css 檔案 --> <link href="https://bbs.csdn.net//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://bbs.csdn.net/topics/css/style.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 檔案 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <style> body {background: #000;min-height: 768px;} html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; list-style-type: none;}body{min-width: 1200px;position: relative;}body, button, input, select, textarea { font: .9em "微軟雅黑"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow:-Scroll; overflow-x:hidden;}a {color: #000;position: relative;}*{margin: 0;padding:0;}ul, ol ,a{list-style: none;}a:link {text-decoration: none;}a:visited {text-decoration: none;}a:hover {text-decoration: none;color: #000;}a:active {text-decoration: none;}/* 設定滾動條的樣式 */::-webkit-scrollbar {width:2px;}/* 滾動槽 */::-webkit-scrollbar-track {-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radius:10px;}/* 滾動潭訓塊 */::-webkit-scrollbar-thumb {border-radius:10px;background:rgba(0,0,0,0.1);-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive {width: 3px;background:rgba(0,0,0,0.3);}/*背景虛化*/.blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } /*區域內虛化 值:像素*/ .blur { -webkit-filter: blur(2px); /* Chrome, Opera */ -moz-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); } .bg-canvas { position: absolute; z-index: 0; width: 100%; height: 100%; min-height: 768px; } .bg-canvas iframe{ border: 0px; width: 100%; height: 100%; } .cont { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; } .cont section { width: 1200px; height: 100%; margin: 0 auto; } .cont_left { position: relative; top: 46%; width: 650px; float: left; color: #fff; } .cont_left h1 { font-size: 48px; font-weight: 900; margin-bottom: 10px; letter-spacing: 4px } .cont_right { position: relative; top: 33%; right: 0px; float: right; width: 350px; height: 350px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.5); /*黑色的樣式不好使*/ /*color: #fff;*/ border-radius: 10px; padding:50px 15px; } .cont_right h2 { margin-bottom: 35px; color:#fff; } .form-group {margin-bottom: 50px;} .form-group p { position: relative; } .form-group p i { width: 34px; height: 34px; font-size: 20px; text-align: center; line-height: 34px; position: absolute; top: 0; left: 0; color:#000; /*黑色的樣式不好使*/ /*color: #fff;*/ } .form-group p a { width: 34px; height: 34px; font-size: 20px; text-align: center; line-height: 34px; position: absolute; top: 0; right: 0; color:#000; /*黑色的樣式不好使*/ /*color: #fff;*/ } .form-group input { padding-left: 34px; /*黑色的樣式不好使*/ /*background:rgba(0,0,0,.1); color:#fff; border: 1px solid rgba(255,255,255,.2);*/ } .form-group input[id="inputEmail3"] { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .form-group input[id="exampleInputPassword3"] { border-top-left-radius: 0px; border-top-right-radius: 0px; } </style> <body id="body"> <nav class="bg-canvas blur"><iframe name="htm" src="http://www.jq22.com/js/a5.html"></iframe></nav> <section class="cont"> <section> <nav class="cont_left"> <p><h1>軟體181校園網站</h1> <p style="text-align: right;font-size: 20px;">班級成員介紹 成員注冊 課表查詢等</p> </p> </nav> <nav class="cont_right"> <h2>網站登陸</h2> <div class="form-group"> <p><i class="fa fa-user"></i><input type="text" class="form-control" id="inputEmail3" name="name" placeholder="請輸入用戶名"></p> <p><i class="fa fa-key"></i> <input type="password" class="form-control" id="exampleInputPassword3" name="pwdPrompt" placeholder="請輸入密碼"> <input type="text" class="form-control" id="exampleInputPassword3" name="pwd" placeholder="請輸入密碼" style="display: none;"> <a class="eye"><i class="fa fa-eye-slash"></i></a></p> </div> <button type="button" class="btn btn-primary btn-lg btn-block">進入網站</button> </div> </nav> </section> </section> </body> <script src="https://bbs.csdn.net/topics/js/jquery.js"></script> <script src="https://bbs.csdn.net/topics/js/bootstrap/bootstrap.min.js"></script> <script> $(function (){ $("#body").height($(window).height()); }) $(".eye").mouseover(function () { $("input[name=pwd]").val($("input[name=pwdPrompt]").val()); $("input[name=pwdPrompt]").hide(); $("input[name=pwd]").show().focus(); $(".eye i").removeClass("fa-eye-slash"); $(".eye i").addClass("fa-eye"); }); $(".eye").mouseout(function () { $("input[name=pwdPrompt]").val($("input[name=pwd]").val()); $("input[name=pwdPrompt]").show().focus(); $("input[name=pwd]").hide(); $(".eye i").removeClass("fa-eye"); $(".eye i").addClass("fa-eye-slash"); }) </script></html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/129004.html
標籤：HTML(CSS)
上一篇：node遞回呼叫java介面（每次呼叫settimeout 10）導致服務器崩潰
下一篇：求教，微信小程式設計，如何實作選中不同的checkbox顯示對應不同的文字，請大家會的幫一幫忙，謝謝大家，謝謝大家，謝謝大家，希望大家提供一下程式