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页面小总结
当然，还有开始动画和点击登录按钮淡入淡出的动画，而且网页会屏幕自适应。