前言
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网页开发的良好起点,并可以根据实际需求进行扩展和定制。