前端开发学习--登录和注册页面设计（html和css，可完成两个页面点击切换）

最新推荐文章于 2024-01-24 23:43:38 发布

hairong19

最新推荐文章于 2024-01-24 23:43:38 发布

阅读量1.3w

点赞数 40

分类专栏：前端开发文章标签： html css js html5 css3

本文链接：https://blog.csdn.net/weixin_43691879/article/details/104397599

版权

本文介绍了使用HTML和CSS设计登录及注册页面，并通过JS实现页面间的切换。内容涵盖页面布局设计，包括主体、头部和内容三个部分，以及利用JS进行功能实现。后续将涉及后端验证，如JSP和Servlet的数据校验。

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

今天学习了登录和注册页面的设计，主要是HTML和CSS部分，注册和切换采用了Js代码进行，后面将通过js进行填写内容的验证，进而可通过JSP跳转到Servlet进行DAO数据的校验，这属于后端部分了。

总体设计思路：整个页面设计可以分为主体（content）、头部（content-header）、内容（content-body）三个部分组成，其中是主体是根部，包含了头部和内容，头部和内容各自下设两个盒子（div）。

1、最终效果图：
登录页
注册页
2、代码部分：

（1）HTML代码部分（包含点击头部自动切换登录和注册页）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--主体-->
    <section id="content">
<!--头部-->
        <div class="content-header clearfix">
            <a href="javaScript:;" class="current">我要登录</a>
            <a href="javaScript:;" >我要注册</a>
        </div>
<!--内容-->
        <div class="content-body">
            <div class="dom" style="display: block">
                <form action="">
                    <div class="s1">
                        <h4>账号</h4>
                        <input type="text" name="user" placeholder="用户名/手机/邮箱">
                    </div>
                    <div class="s1">
                        <h4>密码</h4>
                        <input type="text" name="pwd" placeholder="请输入密码">
                    </div>
                    <div class="s2">
                        <input type="checkbox">
                        <span>&nbsp;记住密码</span>
                    </div>
                    <input type="submit" value="登&nbsp;录" class="btn">
                </form>
                <div class="dom-footer">
                    <div class="login-another">
                        <a href="#">找回密码</a>
                        <span>|</span>
                        <span>还没有注

最低0.47元/天解锁文章

hairong19

关注

40
点赞
踩
200

收藏

觉得还不错? 一键收藏
4
评论
前端开发学习--登录和注册页面设计（html和css，可完成两个页面点击切换）

今天学习了登录和注册页面的设计，主要是HTML和CSS部分，注册和切换采用了Js代码进行，后面将通过js进行填写内容的验证，进而可通过JSP跳转到Servlet进行DAO数据的校验，这属于后端部分了。总体设计思路：整个页面设计可以分为主体（content）、头部（content-header）、内容（content-body）三个部分组成，其中是主体是根部，包含了头部和内容，头部和内容各自下设两...
复制链接

扫一扫

专栏目录