javascript网页设计案例 插画样式登录页面

前言

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。JavaScript 非常容易学。JavaScript 控制了网页的行为。

使用HTML、CSS和JavaScript进行网页设计是一个常见的任务。以下是一个简单的JavaScript和HTML结合的网页设计案例，用于登录页面开发。

一、html创建 插画样式登录页面

<div class="container">
    <div class="img">
        <img src="../images/img-01.png">
    </div>
    <div class="login-content">
        <form action="login.html">
            <img src="../images/avatar.svg">
            <h2 class="title">欢迎登陆</h2>
            <div class="input-div one">
                <div class="i">
                    <i class="fa-user"></i>
                </div>
                <div class="div">
                    <h5>用户名</h5>
                    <input type="text" class="input">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fa-pass"></i>
                </div>
                <div class="div">
                    <h5>密码</h5>
                    <input type="password" class="input">
                </div>
            </div>
            <a href="#">忘记密码?</a>
            <input type="submit" class="btn" value="登 陆">
        </form>
    </div>
</div>

二、Javascript编写

    const inputs = document.querySelectorAll(".input");

    function addClass(){
        let parent = this.parentNode.parentNode;
        parent.classList.add("focus");
    }

    function removeClass(){
        let parent = this.parentNode.parentNode;
        if(this.value == ""){
            parent.classList.remove("focus");
        }
    }

    inputs.forEach(input => {
        input.addEventListener("focus", addClass);
        input.addEventListener("blur", removeClass);
    });

三、需要的css样式编写

这个代码比较多，可以整理一个style.css样式文件引入

.container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap :7rem;
    padding: 0 2rem;
}

.img{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.login-content{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}

form{
	width: 360px;
}

.login-content img{
    height: 100px;
}

.login-content h2{
	margin: 15px 0;
	color: #333;
	text-transform: uppercase;
	font-size: 2.9rem;
}

.login-content .input-div{
	position: relative;
    display: grid;
    grid-template-columns: 7% 93%;
    margin: 25px 0;
    padding: 5px 0;
    border-bottom: 2px solid #d9d9d9;
}

.input-div > div{
    position: relative;
	height: 45px;
}

.input-div > div > h5{
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 18px;
	transition: .3s;
}

.input-div:before, .input-div:after{
	content: '';
	position: absolute;
	bottom: -2px;
	width: 0%;
	height: 2px;
	background-color: #38d39f;
	transition: .4s;
}

.input-div:before{
	right: 50%;
}

.input-div:after{
	left: 50%;
}

.input-div.focus:before, .input-div.focus:after{
	width: 50%;
}

.btn:hover{
	background-position: right;
}


@media screen and (max-width: 1050px){
	.container{
		grid-gap: 5rem;
	}
}

@media screen and (max-width: 1000px){
	form{
		width: 290px;
	}

	.login-content h2{
        font-size: 2.4rem;
        margin: 8px 0;
	}

	.img img{
		width: 400px;
	}
}

四、实现登录页面效果图

 五、总结

这个案例将使用HTML来构建页面结构，CSS来美化页面，以及JavaScript来添加动态功能。

（1）HTML 部分定义了页面的基本结构，包括两个输入框用于输入用户名和密码，一个按钮用于点击登录功能；

（2）CSS 部分美化了页面，包括待办事项列表的样式、输入框和按钮的样式；

（3）JavaScript 部分实现了动态功能；

这个登录页面案例涵盖了网页设计的不同方面，从基本的图片展示到实用的登录表单，再到动态的数据处理。它们都是学习JavaScript网页开发的良好起点，并可以根据实际需求进行扩展和定制。