JavaScript基础—仿千牛登录界面

最新推荐文章于 2024-11-13 17:27:29 发布

繁花落雨

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量323

点赞数

文章标签： javascript 界面

本文链接：https://blog.csdn.net/csdn2479993071/article/details/78108787

版权

本文将介绍如何使用JavaScript基础来创建一个仿千牛登录界面的实现过程，涵盖界面布局、事件监听及交互逻辑等关键点。

摘要由CSDN通过智能技术生成

这里写图片描述


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .login{
                border: 1px solid #E0E0E0;
                position: absolute;
                top: 200px;
                left: 30%;
                width: 390px;
                height: 310px;
                display: none;
            }

            .user input{
                display: block;
                margin: 20px auto;
                width: 200px;
                height: 25px;
                font-size: 14px;
                text-indent: 32px;
                border-radius: 30px;
                border: 1px solid #BABABA;
                outline: none;
            }

            .user{
                position: absolute;
                top: 130px;
                left: 90px;
            }

            .icon-user{
                display: block;
                position: absolute;
                border-radius: 50px;
                top: 21px;
                left: 5px;
                width: 25px;
                height: 25px;