HTML頁面小總結

本文獻運用到的JQuery和圖檔，請自行引用：
<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width user-scalable=0" />
    <title>請登入</title>
    <!--logo圖檔自行引用-->
    <link rel="shortcut icon" href="~/Content/Images/logo.png" target="_blank" rel="external nofollow"  type="image/x-icon">
    <!--jquery插件自行引用-->
    <script src="jquery.min.js"></script>
</head>
<style>
        ::-webkit-scrollbar {
          /*設定滾動條整體的屬性,不對其進行設定自定義屬性無法應用*/
          background: rgba(110, 110, 110, 0.25);
          width: 10px;
        }
        ::-webkit-scrollbar-thumb {
           /*設定滾動條滑塊的屬性*/
            border-radius: 0em; 
            background-color: #427DAE;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            /*設定滾動條滑塊僞類的屬性*/
            border-radius: 0.1em; 
            background-color: #025fac;
        }
        
        ::-webkit-scrollbar-track:hover {
          /*設定滾動條背景僞類的屬性*/
          background-color: #4ad4f9;
          width: 10px;
        }	


        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            text-align: center;
            background-color:  cornsilk;
        }

        .beijing {
            background-image: linear-gradient(to top,#025fac,#4ad4f9);
            height: 904px;
        }

        .logo {
            display: block;
            width: 149px;
            height: 152px;
            margin: 0 auto;
        }

        .header {
            padding-bottom: 50px;
            color: white;
            margin-left: -2100px;
        }

        .login {
            background-color: rgba(255,255,255,0.5);
            width: 32%;
            padding: 40px 0;
            border-radius: 5px;
            position: absolute;
            margin-left: 34%;
            margin-top: -600px;
        }

        .login input, .login button {
            padding: 15px;
            margin: 10px;
            height: 15px;
            border: 0 none;
            border-radius: 5px;
            font-weight: 600;
            font-size: 15px;
        }

        .login input {
            background: rgba(255,255,255,0.6);
            width: 60%;
            text-align: center;
            color: #757575;
        }

        .login button {
            width: 65%;
            background-color: #4786E7;
            color: white;
            height: 45px;
        }
    </style>

<body>
    <div class="beijing">
        <div style="padding-top: 5%;">
            <!--logo圖檔自行引用-->
            <div class="logo"><img style="display: none" src="~/Content/Images/logo.png"></div>
            <header class="header">
                <h1 style="letter-spacing:1px;"><a onclick="show()">XXXXXXXXXXXXXXXXXXXXX</a></h1>
                <h5>點一下彈個
                    <a href="javascript:if(confirm('然而沒反應，隻是想告訴你有這個用法而已。')){alert('另外點一下你上面的文本')}else{alert('看你還能找到什麼')}" target="_blank" rel="external nofollow" >
                        視窗
                    </a>？
                </h5>
                <!--按鈕也行<button onClick="javascript:if(confirm('哎呦，不錯哦☺')){location='http://www.網址.com'}">視窗</button>？-->
            </header>
            <div class="login">
                <ul class="text">
                    <li><input class="user" placeholder="輸入使用者名"></li>
                    <li><input class="passWord" placeholder="輸入密碼"></li>
                    <li><button onClick="login()" class="button" type="button">登 錄</button></li>
                </ul>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
        function show() {
            var name = prompt("呦呵，能找到這來，那就輸入點什麼吧", "");
            if (name) {
                $(".header h1").text("雖然你輸入的是：" + name + ",但是我就是不顯示");
                setTimeout(back, 2000);
            }
        }
        function back(){
            $(".header h1").text("XXXXXXXXXXXXXXXXXXXXX");
        }

	    function loginIn(){
		    $(".login").animate({'margin-top':"0"},"slow");
		    setTimeout(loginT,500);
	    }
	    function loginT(){
		    $(".login").animate({'padding-top':"30px"},"slow");
		    $(".header").animate({'margin-left':"50px"});
		    setTimeout(loginS,500);
	    }
	    function loginS(){
		    $(".header").animate({'margin-left':"0"});
		    $(".header h1").animate({'letter-spacing':"0"},"slow");
		    $(".logo img").fadeIn("slow");
	    }
	    loginIn();
	    function login(){
	        $("body").fadeOut("slow");
            //延時執行，執行完動畫再執行下行代碼
	        setTimeout(function () {
	            if (confirm('登入成功，是否跳轉至首頁面?')) {
	                alert("可是沒有首頁面");
	                $("body").fadeIn("slow");
	            } else {
	                alert("那就傳回喽？");
	                $("body").fadeIn("slow");
	            }
	        }, 1000);
	    }
    </script>

</html>
預覽圖：
漸變色登入頁面：
HTML頁面小總結
滾動條樣式：
HTML頁面小總結
正常
HTML頁面小總結
僞類
提示框的多種用法：
HTML頁面小總結
當然，還有開始動畫和點選登入按鈕淡入淡出的動畫，而且網頁會螢幕自适應。