WEB前端作业三

最新推荐文章于 2024-07-11 15:29:37 发布

Yk_GSDN

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量94

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Yk_GSDN/article/details/138135756

版权

1.完成学校官方网站页面制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <title>英华学堂</title>
    <link rel="shortcut icon" href="/static/favicon/yinghua.ico"/>
    <link rel="stylesheet" href="/static/login/css/login.css" type="text/css">
    <script src="/yeeui/third/jquery-3.3.1.min.js"></script>
    <script src="/yeeui/yee.js"></script>
    <script src="/static/login/js/user.js"></script>
</head>
<body>

<div class="loginnew">
    <div class="loginnew-head">
        <div class="center">
            
                <div class="logo"><a href="/index"><img onerror="this.src='/static/user/images/mooc.png'"
                                                        src="https://s2.yinghuaonline.com/upfiles/gHGwRZ3PEki79U50Y5vq.png" alt=""></a></div>
            
            <div class="back"><a href="/">返回首页</a></div>
        </div>
    </div>
    <div class="loginnew-wrap">
        <div class="mainbox" style="background-image: url('/static/login/images/loginnew-img.jpg')"></div>
        <div class="mainbox" style="background-image: url('/static/login/images/loginnew-box.jpg')">
            <div class="loginnew-main" style="margin-top: 50px;">
                <div id="login-title"  class="title">学生登录</div>
                <form id="loginForm" method="post" yee-module="ajax validate" data-mode="2">
                    <div class="list">
                        

                        <div class="item">
                            <div class="titbox">用户名</div>
                            <div class="inpbox">
                                <span class="icon"><img src="/static/login/images/login-mb.png" alt=""></span>
                                <input type="text" id="username" name="username" placeholder="请输入您的学号" class="inp">
                            </div>
                        </div>

                        <div class="item" id="pass_row">
                            <div class="titbox">密码</div>
                            <div class="inpbox">
                                <span class="icon"><img src="/static/login/images/login-pwd.png" alt=""></span>
                                <input id="password" type="password" name="password" placeholder="请输入您的密码" class="inp">
                            </div>
                        </div>


                        <div class="item">
                            <div class="notbox">
                                <label><input id="remember" type="checkbox">保持登录状态</label>
                                <a href="/user/login/forget_by_mobile" class="forget">忘记密码？</a>
                            </div>
                        </div>

                        <div class="item">
                            <div class="inpbox">
                                <input type="hidden" name="redirect" id="redirect" value="">
                                <input type="submit" value="登录" class="btn">
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--
     <div class="loginnew-foot"><span>版权所有：英华在线</span></div>
    -->
</div>


    <script>
        
        $(function () {
            if (window.localStorage) {
                var userName = window.localStorage.getItem("userName") || '';
                var passWord = window.localStorage.getItem("passWord") || '';
                var remember = window.localStorage.getItem("remember") || '';
                var schoolId = window.localStorage.getItem("schoolId") || '';
                $('#username').val(userName);
                $('#password').val(passWord);
                $('#schoolId').val(schoolId);
                if (remember == '1') {
                    $('#remember').prop('checked', true);
                }
            }
        });

        $("#loginForm").on("success", function (ev, rt) {
            console.log(rt);
            var parse_url = rt.parse_url;
            var _redirect = $('#redirect').val() || '';
            var rememberBox = $('#remember');
            if (rememberBox.is(':checked')) {
                var userName = $('#username').val() || '';
                var passWord = $('#password').val() || '';
                var schoolId = $('#schoolId').val() || '';
                if (window.localStorage) {
                    window.localStorage.setItem("schoolId", schoolId);
                    window.localStorage.setItem("userName", userName);
                    window.localStorage.setItem("passWord", passWord);
                    window.localStorage.setItem("remember", '1');
                }
            } else {
                window.localStorage.clear();
            }
            if (rt['back'] != void 0) {
                window.location.href = rt['back'];
            } else if (rt.redirect) {
                if (parse_url.port != undefined) {
                    _redirect = parse_url.scheme + '://' + parse_url.host + ':' + parse_url.port;
                } else {
                    _redirect = parse_url.scheme + '://' + parse_url.host;
                }
                window.location.href = _redirect + rt.redirect;
            } else {
                window.location.href = '/';
            }

        });
        
    </script>

</body>
</html>

2.使用动画完成过渡+变换效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>魔方</title>
	</head>
	<style>
		body {
			perspective: 800px;
		}
		@keyframes myAnimation{
			from{
				transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
			}
			to{
				transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
			}
		}

		.con {
			width: 200px;
			height: 200px;
			margin: 300px auto;
			position: relative;
			border: 1px solid rgb(89, 0, 255);
			transform-style: preserve-3d;
			transform: rotateX(30deg) rotateY(30deg);
			animation: myAnimation 10s infinite linear;
		}

		.con>img {
			width: 200px;
			height: 200px;
			position: absolute;

		}
		
		.con:hover > img:first-child{
			transform: translateZ(-200px);
		}
		
		.con > img:first-child{
			transform: translateZ(200px);
		}
		
		.con:hover > img:nth-child(2){
			transform: translateX(-200px) rotateY(90deg);
			
		}

		.con>img:nth-child(2) {
			left: -200px;
			transform: rotateY(90deg);
			transform-origin: right;
		}
		
		.con:hover>img:nth-child(3) {
			transform: translateX(200px) rotateY(-90deg);
		}

		.con>img:nth-child(3) {
			right: -200px;
			transform-origin: left;
			transform: rotateY(-90deg);
		}
		
		.con:hover>img:nth-child(4) {
			transform: translateY(-200px) rotateX(-90deg);
		}
		

		.con>img:nth-child(4) {
			top: -200px;
			transform-origin: bottom;
			transform: rotateX(-90deg);
			/* 			transform-origin:left;
			transform: rotateY(-90deg); */
		}
		
		.con:hover>img:nth-child(5) {
			transform: translateY(200px) rotateX(90deg);
		}

		.con>img:nth-child(5) {
			bottom: -200px;
			transform-origin: top;
			transform: rotateX(90deg);
		}
		
		.con:hover>img:last-child {
			transform: translateZ(400px);
		}

		.con>img:last-child {
			transform: translateZ(200px);
		}
	</style>
	<body>
		<div class="con">
			<img src="1" alt="">
			<img src="2" alt="">
			<img src="3" alt="">
			<img src="4" alt="">
			<img src="5" alt="">
			<img src="6" alt="">
		</div>
	</body>
</html>