精华内容
下载资源
问答
  • 本文介绍了 CSS 简述和用 CSS 做一个注册页面的相关内容。。。


    CSS

    • CSS(Cascading Style Sheet,层叠样式表);
    • 层叠样式:对同一个标签应用不同的样式,所有样式会叠加在一起展示出效果;
    • 优点:把 HTML 内容和 CSS 样式分离,降低了耦合度,提高了样式复用性,而且还可以提供更强大的美化效果。

    1. 引入方式

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>引入方式</title>
        <!-- 告诉浏览器把解析器切换CSS解析器,type="text/css"可以省略 -->
        <style type="text/css">h2{
            color: green; /*字体颜色:绿色*/
        }</style>
        <!-- link的href属性指明样式文件的地址;
             rel属性指明外部文件是当前页面的stylesheet样式表 -->
        <link href="../css/外部样式.css" rel="stylesheet"/>
    </head>
    <body>
    <!-- CSS的引入方式有三种:
            1.行内,在标签的style属性中写样式,作用域:该标签;
            2.内部(内嵌),在页面中的style标签中写样式,style标签位置理论上任意,推荐放置在head中的底部,作用域:本页面;
            3.外部,使用link标签引入外部样式,作用域:所有引入的页面 -->
    <h1 style="color:red;">1.行内</h1>
    <h2>2.内部(内嵌)</h2>
    <h3>3.外部 </h3>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    2. 基本语法

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>语法</title>
    </head>
    <body>
    <!-- CSS语法:选择器{CSS样式},选择器:匹配标签;
         CSS样式:标签要显示的外观效果,格式:{样式名:样式值;样式名:样式值;},样式名多个单词用短杠-分割,样式值多个单词用空格分割;
         CSS注释:/*CSS注释*/ -->
    <style> font {
        color: green; /*字体绿色*/
        font-size: 20px; /*字体大小*/
        line-height: 40px; /*行高*/
        font-weight: bold; /*加粗*/
        font-style: italic; /*倾斜*/
    } </style>
    <font>床前明月光</font><br/>
    <font>疑是地上霜</font><br/>
    <font>举头望明月</font><br/>
    <font>低头思故乡</font><br/>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    a. 基本选择器

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
    </head>
    <body>
    <!-- CSS基本选择器:
            1.标签 :根据标签匹配元素,格式:标签{} ;
            2.类:根据class的值匹配元素,class属性是给标签归类添加样式,格式:.class{};
            3.ID:根据id值匹配元素,id属性是标签的唯一标志,#id{} -->
    <!-- 渲染需求:
            1.所有span标签中的文字为楷体;
            2.所有女性(class="female")的文字为红色;
            3.所有英雄(class="hero")的文字大小为50px;
            4.Java(id="main")的字体大小为100px -->
    <style>span { /*所有的span标签*/
        font-family: "楷体"; /*楷体*/
    }
    
    .female { /*所有class值中有female的标签*/
        color: red; /*字体红色*/
    }
    
    .hero { /*所有class值中有hero的标签*/
        font-size: 50px; /*字体大小*/
    }
    
    #main { /*匹配id=main的一个标签*/
        font-size: 100px; /*字体大小*/
    }</style>
    <span class="female">小红</span><span class="female">小美</span><span class="female">小娜</span><span class="female">小丽</span>
    <!-- .female + .hero -->
    <span class="female hero">小杰</span>
    <!-- span + .hero -->
    <span class="male hero">小王</span><span class="male hero">小黄</span>
    <span class="hero">小刚</span>
    <!-- #main -->
    <span id="main">Java</span>
    <!-- span -->
    <span id="east">JavaScript</span>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    b. 扩展选择器

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>扩展选择器</title>
    </head>
    <body>
    <!-- 扩展选择器,
            E,F:并列关系;
            属性 E[attribute=value] -->
    <style type="text/css"> span, p, label { /*并列关系*/
        font-family: "楷体"; /*字体类型*/
    }
    
    div span { /*div所有的后代span标签*/
        color: red; /*字体红色*/
    }
    
    input[type="text"] { /* 有type属性值等于text的input标签*/
        background-color: gold; /*背景颜色 金色*/
    } </style>
    <!-- div span -->
    <div><span>地址</span>
        <p><span id="gbl">爱好</span></p>
    </div>
    <!-- span -->
    <span id="cld">性别</span><br/>
    <!-- input -->
    <label>姓名</label><input type="text" name="userName" value="Jack"/><br/>
    <label>密码</label><input type="password" name="userPass" value="123456"/><br/>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    c. 盒子模型理论

    • 前端万物皆盒子;
      在这里插入图片描述
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>盒子模型理论</title>
    </head>
    <body>
    <!-- 盒子模型的组成:
            margin(外)边距:边框之外的距离,默认透明,可以设置:上、右、下、左的大小;
            border边框:可以设置边框的上、右、下、左的大小,类型、颜色;
            padding(内)填充:边框和内容之间的距离,默认透明,可以设置上、右、下、左的大小;
            设置宽高width和height两种方式:
                box-sizing:content-box;设置的是content所占的宽度和高度;
                box-sizing:border-box;设置的是border所占的宽度和高度 ;
            content内容:是标签中内容放置区域;-->
    <style> div {
        border: 10px solid red; /*边框 10px 实线 红色*/
        margin: 40px; /*边距 40px*/
        padding: 30px; /*填充 30px*/
        width: 300px; /*宽度*/
        height: 100px; /*高度*/
        box-sizing: content-box; /*默认:content所占的宽度和高度*/
        box-sizing: border-box; /*默认:border所占的宽度和高度*/
    } </style>
    <div>我是content内容1</div>
    <div>我是content内容2</div>
    <div>我是content内容3</div>
    </body>
    </html>
    
    • 效果图 + F12:
      在这里插入图片描述

    3. 常用样式

    a. 边距边框

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>边框边距</title>
    </head>
    <body>
    <!-- 边框border:可以设置宽度,类型,颜色;
        边距margin: 左右外边距可以取值,auto为自动居中对齐;
        边框圆角border-radius:可以设置四个角(左上,右上,右下,左下)边框从多少像素开始圆滑,一般设置一个值全部应用 -->
    <style> div {
        border: 10px solid red; /*边框 10px 实线 红色*/
        box-sizing: border-box; /*边框作为盒子大小*/
        width: 200px; /*宽度200px*/
        height: 200px; /*高度200px*/
        margin: 10px auto; /*外边距上下10px 左右自动居中*/
        border-radius: 100px; /*边框圆角*/
    }</style>
    <div>1</div>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    b. 字体文本

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>字体文本</title>
        <style type="text/css"> div p {
            color: green; /*字体绿色*/
            font-size: 20px; /*字体大小*/
            line-height: 40px; /*行高*/
            font-weight: bold; /*加粗*/
            font-family: '楷体'; /*字体类型楷体*/
        }
    
        div p span {
            font-style: italic; /*倾斜*/
            text-decoration: underline; /*文本装饰 下划线*/
        } </style>
    </head>
    <body>
    <div><p><span>学习必经三种境界:</span><br/>
        第一境界“昨夜西风凋碧树。独上高楼,望尽天涯路。”<br/>
        第二境界“衣带渐宽终不悔,为伊消得人憔悴。”<br/>
        第三境界“众里寻他千百度。蓦然回首,那人却在,灯火阑珊处。”<br/></p></div>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    i. 博客简介

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>博客简介</title>
    </head>
    <body>
    <style> h1 {
        text-align: center; /*文字水平居中*/
    }
    
    .redColor {
        color: red; /*红色字体*/
    }
    
    .boldItalic {
        font-weight: bold; /*字体重量加粗*/
        font-style: italic; /*字体样式倾斜*/
    }
    
    p {
        text-indent: 2em; /*首行缩进两个字符*/
    }
    
    .graySize {
        text-align: center; /*文字水平居中*/
        color: gray; /*灰色字体*/
        font-size: 12px; /*字体大小12px 默认不写是16px*/
        text-indent: 0em; /*首行不缩进*/
    } </style>
    <h1>博客简介</h1>
    <hr color="orange"/>
    <p><span class="redColor">“Regino的博客”</span>是Regino在<span class="boldItalic">CSDN</span>平台上的个人博客。域名为:https://blog.csdn.net/Regino,自定义域名为:qwert.blog.csdn.net。欢迎来访。</p>
    <p>个人箴言:</p>
    <p>区区二十几岁,人言后生,本应是前途坦荡之年纪,然而资质平平,见识短浅,可造之材本已难当,唯求可独立支持,笃定心之所寄,不负亲友所托,是为所愿。</p>
    <p>积土成山而兴风雨,积善成德始备圣心。古人以流水计时,时间流逝,亦是水流积累沉淀。光阴可惜,譬诸流水一去不返。岁月更改,于洗刷幼稚之时亦教导人哲思。</p>
    <p>过往实难更改,因果轮回或是注定,然当下尚未写就,未来仍未来临。把握、珍惜,是为能善其身之不二法门,与诸君共勉。</p>
    <hr color="orange"/>
    <p class="graySize">版权声明:本文为CSDN博主「Regino」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。<br/>
        原文链接:https://qwert.blog.csdn.net/article/details/105321548</p>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    c. 背景属性

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>背景属性</title>
        <style type="text/css"> div {
            border: 1px solid lightgray; /*边框 1px 实线 浅灰色*/
            box-sizing: border-box; /*边框作为盒子大小*/
            width: 1000px; /*宽度*/
            height: 250px; /*高度*/
            margin: 0px auto; /*外边距 上下0px 左右自动居中*/
        }
    
        #d1 {
            background-color: #024bd5; /*背景颜色*/
        }
    
        #d2 {
            background-image: url("./img/博客右栏.png"); /*背景图片地址*/
            background-repeat: no-repeat; /*背景图片不平铺*/
            background-position: top 0px right 0px; /*背景图片位置 右上角*/
            background-size: auto 250px; /* 设置背景图片宽度和高度。第一个值设置宽度,第 二个值设置的高度。如果只给出一个值,第二个是设置为"atuo(自动)"*/
        } </style>
    </head>
    <body>
    <div id="d1"></div>
    <div id="d2"></div>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    d. 显示属性

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>显示属性</title>
        <style> span, div {
            border: 1px solid lightgray;
            width: 500px;
            height: 100px;
        } </style>
    </head>
    <body>
    <!-- 显示属性display标签的显示方式,常用取值:
            inline显示为内联标签,内联标签设置宽高不起作用,因为它的宽高是由内容撑起来的;
            block显示为块级标签,可设置width和height;
            none隐藏不显示 -->
    <span>内联标签1</span><span style="display:inline;">内联标签2</span><span style="display:block;">内联标签3</span>
    <div>块级标签1</div>
    <div style="display:block;">块级标签2</div>
    <div style="display:none;">块级标签3</div>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    4. 综合应用:注册表单

    • 根据提供的 HTML 和 CSS 素材编写 table 和表单标签完成注册表单案例;

    a. 素材 1: HTML

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>注册表单</title>
        <link href="../css/register.css" rel="stylesheet"/>
    </head>
    <body>
    <div class="container">
        <div class="child center"></div>
    </div>
    </body>
    </html>
    

    b. 素材 2: CSS

    body {
        background-color: beige; /*背景颜色*/
    }
    
    .container {
        box-sizing: content-box; /*默认的 content 作为盒子大小*/
        width: 800px; /*宽度*/
        height: 500px; /*高度*/
        border: 10px ridge lightgray; /*边框 10px 桥梁 浅灰色*/
        margin: 50px auto; /*外边距 上下50px 左右自动居中*/
        background-color: white; /*背景颜色*/
    }
    
    .child {
        border: 1px solid red; /*边框 1px 实线 红色*/
        box-sizing: border-box; /*边框作为盒子大小*/
        height: 500px; /*高度*/
        border-color: rgba(0, 0, 0, 0); /*边框颜色 完全透明*/
    }
    
    .center {
        margin: 0px auto; /*外边距 上下0px 左右自动居中*/
        width: 400px; /*宽度*/
        font-family: '楷体'; /*字体类型*/
        color: gray; /*字体颜色*/
    }
    
    .center table tr {
        height: 50px; /*高度*/
    }
    
    input[type="text"], input[type="password"], input[type="date"] {
        border: 1px solid lightgray; /*边框 1px 实线 浅灰色*/
        width: 180px; /*宽度*/
        height: 30px; /*高度*/
        border-radius: 15px; /*边框圆角*/
        padding: 5px; /*填充*/
        box-sizing: border-box; /*边框作为盒子大小*/
    }
    
    input[name="userCode"] {
        width: 60px; /*宽度*/
    }
    
    input[name="userCode"] + img {
        vertical-align: top; /*垂直对齐方式 上对齐*/
    }
    
    .btn {
        width: 100px; /*宽度*/
        line-height: 30px; /*行高*/
        background-color: gold; /*背景金色*/
        color: white; /*字体白色*/
        border: 1px solid gold; /*边框 1px 实线 金色*/
        border-radius: 5px; /*边框圆角*/
    }
    
    input:focus { /*输入框获取焦点时*/
        outline: none; /*获取焦点时不显示轮廓*/
        border: 1px solid lightskyblue; /*边框 1px 实线 浅天蓝色*/
    }
    

    c. 具体实现:注册表单

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>注册表单</title>
        <!-- 引入css样式文件 -->
        <link href="../css/register.css" rel="stylesheet"/>
    </head>
    <body>
    <div class="container">
        <div class="child center">
            <form action="#" method="post">
                <table border="0" align="center">
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" name="userName" placeholder="请输入账号"></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input type="password" name="userPass" placeholder="请输入密 码"></td>
                    </tr>
                    <tr>
                        <td>邮箱</td>
                        <td><input type="text" name="userMail" placeholder="请输入邮箱"></td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td><input type="text" name="userName" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td>手机号</td>
                        <td><input type="text" name="userPhone" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td><input type="radio" id="male"><label for="male"></label>&emsp;
                            <input type="radio" id="female"><label for="female"></label>&emsp;</td>
                    </tr>
                    <tr>
                        <td>生日</td>
                        <td><input type="date" name="userBirth"></td>
                    </tr>
                    <tr>
                        <td>验证码</td>
                        <td><input type="text" name="userCode" placeholder="验证码">
                            <img width="90px"
                                 title="标题"
                                 src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586044277242&di=d742a7bf56fd8d991e776bd092467589&imgtype=0&src=http%3A%2F%2Fdl2.iteye.com%2Fupload%2Fattachment%2F0092%2F0152%2Fa256e0dc-35cd-389c-ad2d-12bdaba19e80.jpg"
                                 alt="加载失败"></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <button class="btn">用户注册</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    原文链接:https://qwert.blog.csdn.net/article/details/105321548

    展开全文
  • 分享一个自己学习时,用bootstrap,多方搜索做的注册页面,包括页面的非空验证。导入相关bootstrapjs和css文件就可以了。背景很丑,可以自己换一个。后面进一步完善<( ̄︶ ̄)↗[GO!] <%@ page language=...

    分享一个自己学习时,用bootstrap,多方搜索做的注册页面,包括页面的非空验证。导入相关的bootstrap的js和css文件就可以了。背景很丑,可以自己换一个。后面进一步完善<( ̄︶ ̄)↗[GO!]

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>bootstrap注册页面</title>
            <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
            <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
    
            <script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/jquery.validate.min.js" type="text/javascript"></script>
    <script>
        //自定义校验规则
        $.validator.addMethod(
        // 规则的名称
        "checkUsername",
        // 校验的函数
        function(value, element, params) {
            // 参数value代表输入的内容,element代表被校验的元素对象,params代表规则对应的参数值
            // 目的:对输入的username进行ajax异步校验
    
            // 定义一个标志
            var flag = true;
            $.ajax({
                "async" : false,// 是否异步
                "url" : "${pageContext.request.contextPath}/checkUsername",// 提交地址
                "data" : {
                    "username" : value
                },// 传输的数据
                "type" : "POST",// 提交方式
                "dataType" : "json",// 返回的数据类型
                "success" : function(data) {// 成功后的回调函数
                    flag = data.isExist;
                    alert(flag);
                }
            });
    
            // 返回false代表该校验器不通过
            return !flag;
        });
    
        $(function() {
            $("#registForm").validate({
                rules : {
                    "username" : {
                        "required" : true,
                        "checkUsername" : true
                    },
                    "password" : {
                        "required" : true,
                        "rangelength" : [ 6, 12 ]
                    },
                    "repassword" : {
                        "required" : true,
                        "rangelength" : [ 6, 12 ],
                        "equalTo" : "#password"
                    },
                    "email" : {
                        "required" : true,
                        "email" : true,
                    },
                    "sex" : {
                        "required" : true
                    }
                },
                messages : {
                    "username" : {
                        "required" : "用户名不能为空",
                        "checkUsername" : "该用户名已存在"
                    },
                    "password" : {
                        "required" : "密码不能为空",
                        "rangelength" : "密码长度为6-12位"
                    },
                    "repassword" : {
                        "required" : "确认密码不能为空",
                        "rangelength" : "密码长度为6-12位",
                        "equalTo" : "两次输入的密码不一致"
                    },
                    "email" : {
                        "required" : "邮箱不能为空",
                        "email" : "邮箱格式不正确",
                    }
                }
            });
        });
    </script>
    
    <style type="text/css">
                body{
                    /*background-image: url(img/bg8.jpg);*/
                    /*background-repeat: no-repeat;*/
                    /*background-color: #191970;*/
                    background: radial-gradient(ellipse closest-side,
          #00CC66, #006666 20%, #0066CC 50%, #0033CC);
                }
                label{
                    text-align: justify;
                    text-align-last: justify;
                    line-height: 35px;
                }
                .error {
                    color: red;
                }
            </style>
        </head>
    
        <body>
            <div class="container">
    
                <div class="col-md-4"></div>
    
                <div class="col-md-6 row" style="margin-top: 50px;background-color: whitesmoke;border-radius: 5px;">
                    
                    <div style="margin-top: 30px;margin-bottom: 30px;margin-right: 20px;">
                        <form id="registForm" action="${pageContext.request.contextPath}/register" method="post">
                            <div class="form-group row">
                                <label for="username" class="col-sm-2 col-form-label">用户名</label>
                                <div class="col-sm-10"><input type="text" class="form-control" id="username" name="username" placeholder="请输入账号">   </div>
                            </div>
                            
                            <div class="form-group row">
                                <label for="password" class="col-sm-2 col-form-label">密码</label>
                                <div class="col-sm-10"><input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"></div>
                            </div>
                            
                            <div class="form-group row">
                                <label for="password" class="col-sm-2 col-form-label">确认密码</label>
                                <div class="col-sm-10"><input type="password" class="form-control" id="repassword" name="repassword" placeholder="请确认密码"></div>
                            </div>
                            
                            <div class="form-group row">
                                <label for="password" class="col-sm-2 col-form-label">邮箱</label>
                                <div class="col-sm-10"><input type="email" class="form-control" name="email" placeholder="请输入邮箱"></div>
                            </div>
                            
                            <div class="form-group row">
                                <label for="password" class="col-sm-2 col-form-label">姓名</label>
                                <div class="col-sm-10"><input type="text" class="form-control" name="user" placeholder="请输入姓名"></div>
                            </div>
                            
                            <div class="form-group row">
                                <label for="sex" class="col-sm-2 col-form-label">性别</label>
                                <div class="col-sm-10">
                                    <div class="form-check form-check-inline" style="line-height: 35px;">
                                        <input class="form-check-input" type="radio" name="sex" id="sex1" value="male" checked>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input class="form-check-input" type="radio" name="sex" id="sex2" value="female">女
                                        <label class="error" for="sex" style="display: none;">性别必须勾选</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group row">
                                <label for="password" class="col-sm-2 col-form-label">验证码</label>
                                <div class="col-sm-8"><input type="text" class="form-control" id="repassword" placeholder="请输入验证码"></div>
                                <div class="col-sm-2"><img src="img/bg3.jpg" height="30px"/></div>
                            </div>
                            
                            <div class="form-group row">
                                <div class="col-sm-2"></div>
                                <!--给按钮加上btn-lg的class就是大号的按钮-->
                                <div class="col-sm-10"><input type="submit" value="我要注册" class="btn btn-primary btn-block" /></div>
                            </div>
                            
                            <div class="form-group row">
                                <div class="col-sm-2"></div>
                                <div class="col-sm-5" style="float: left;">已经有账号了?</div>
                                <div class="col-sm-5"><a href="login.html" style="float: right;">直接登录</a></div>
                            </div>
                        </form>
                    </div>
                </div>
    
                <div class="col-md-2"></div>
    
            </div>
        </body>
    
    </html>

    效果如下:
    4492

    转载于:https://www.cnblogs.com/zxfei/p/11055776.html

    展开全文
  • 作业:也一个登陆注册的页面,要求已经注册过的账号不能再注册:已经注册的账号才能登陆,并且登陆的密码必须和注册的密码一致 """""" path1 = r'.\01account.txt' path2 = r'.\02password.txt' def func1(): f1 ...

    作业:也一个登陆注册的页面,要求已经注册过的账号不能再注册:已经注册的账号才能登陆,并且登陆的密码必须和注册的密码一致

    """"""
    path1 = r'.\01account.txt'
    path2 = r'.\02password.txt'
    
    
    def func1():
        f1 = open(path1)
        f2 = open(path2)
        str1 = input('请输入账号;')
        str2 = input('请输入密码:')
        str3 = f'{f1.read()}'
        str4 = str3.split(' ')
        str5 = f'{f2.read()}'
        str6 = str5.split(' ')
        x1 = x2 = False
        for x in str4:
            for y in str6:
                if x == str1:
                    x1 = True
                    if y == str2:
                        x2 = True
                        break
        if x1 == True and x2 == True:
            return '登陆成功'
        elif x1 == True and x2 == False:
            return '密码输入错误'
        else:
            return '账号输入错误或者未注册'
    
    
    def func2():
        f1 = open(path1, 'a')
        f1.write(' ' + input('请输入账号;'))
        f2 = open(path2, 'a')
        f2.write(' ' + input('请输入密码;'))
        return '注册成功'
    
    
    if __name__ == "__main__":
        while True:
            print('========================================')
            print('欢迎登录xx管理系统')
            print('登   录:请输入1进入界面')
            print('注   册:请输入2进入界面')
            print('退   出:请输入3进入界面')
            print('========================================')
            n = int(input("请选择:"))
            if n == 1:
                n1 = func1()
                print(n1)
                break
            elif n == 2:
                n2 = func2()
                print(n2)
                print('注册成功,返回登录界面')
            elif n == 3:
                print('关闭程序')
                break
            else:
                print('输入无效,返回登录界面')
    
    
    """============= 01account.txt  ============"""
    a12345678 b12345678 d12345678 e12345678 f12345678
    
    
    """============= 02password.txt ============"""
    123456789 123456789 147852369 123654789 963258741
    
    展开全文
  • 用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导致用户...

    用layui做一个简易的登录注册页面

    1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导致用户体验感比较差。

      <script>
                //JavaScript代码区域
                layui.use(['element', 'layer'], function () {
                    var element = layui.element;
                    var layer = layui.layer;
    
    
                    $('#login').on('click', function () {
                        layer.open({
                            type: 2,    //弹出一个页面层
                            title: "登录",
                            content: 'login.html',
                            area: ['500px', '500px'],
                            anim: 1
                        })
    
                    })
    
    
                });
            </script>
    

    2.这样用户点击登录就会弹出login.html,就是以下页面

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>登录</title>
    
            <link rel="stylesheet" href="layui/css/layui.css">
            <style>
                .login_line1 img{
                    margin-left: 155px;
                }
                form{
                    margin-left: 15px;
                }
                .login_line3 i{
                    cursor: pointer;
                }
                .login_other_l{
                    display: inline-block;
                    transform: translateY(-90%);
                    width: 140px;
                    height: 1px;
                    border-bottom: 1px solid #eee;
                   margin-right: 20px;
                }
                .login_other_r{
                    display: inline-block;
                    transform: translateY(-90%);
                    width: 140px;
                    height: 1px;
                    border-bottom: 1px solid #eee;
                    margin-left: 20px;
                }
                .login_line3 i{
                    font-size: 50px;
    
                }
                .login_line3 i:nth-child(1){
                    margin-left: 70px;
                    color: green;
                }
                .login_line3 i:nth-child(2){
                    margin-left: 80px;
                    color: #FE5134;
                }
                .login_line3 i:nth-child(3){
                    margin-left: 80px;
                    color: #12B7F5;
                }
                .login_line7 .login_rem{
                    margin-left: 250px;
    
                }
                input{
                    max-width: 350px;
                }
                .login_rem a{
                    color: #FD5353;
                }
                .login_line8 button{
                    width: 210px;
                }
                .login_line8 button:first-child{
                    margin-left: 5px;
                    background-color: #fff;
                    border:1px solid #FD5353;
                    color: #FD5353;
                }
                .login_line8 button:last-child{
                    margin-left: 15px;
                    background-color: #FD5353;
                    border:1px solid #FD5353;
                }
                .layui-form-checked[lay-skin=primary] i{
                    border-color:#FD5353 !important;
                }
                .layui-form-checked i, .layui-form-checked:hover i{
                    background-color:  #FD5353 !important;
                }
            </style>
    
        </head>
        <body>
            <div class="layui-row">
                <form action="" class="layui-form layui-form-pane layui-col-md4 layui-col-md-offset3">
                    <!-- 第一行-->
                    <div class="layui-form-item login_line1">
                        <img src="img/logo@2x.png" alt="">
    
                    </div>
                    <!--第二行-->
                    <div class="layui-form-item login_line2">
                        <i class="login_other_l"></i>第三方账号注册/登录<i class="login_other_r"></i>
                    </div>
                    <!--带三行-->
                    <div class="layui-form-item login_line3">
                        <i class="layui-icon layui-icon-login-wechat"></i>
                        <i class="layui-icon layui-icon-login-weibo"></i>
                        <i class="layui-icon layui-icon-login-qq"></i>
                    </div>
                    <!--第四行-->
                    <div class="layui-form-item login_line4">
                        <i class="login_other_l"></i>使用手机号注册/登录<i class="login_other_r"></i>
                    </div>
                    <!--第五行-->
                    <div class="layui-form-item login_line5">
                        <label class="layui-form-label"><i
                                class="layui-icon layui-icon-username"></i></label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="username" class="layui-input"
                                   placeholder="请输入用户名"/>
                        </div>
                    </div>
                    <!-- 第六行-->
                    <div class="layui-form-item login_line6">
                        <label class="layui-form-label"><i
                                class="layui-icon layui-icon-password"></i></label>
                        <div class="layui-input-block">
                            <input type="password" name="password" lay-verify="password" class="layui-input"
                                   placeholder="请输入密码"/>
                        </div>
                    </div>
                    <!-- 第七行-->
                    <div class="layui-form-item login_line7">
                        <input type="checkbox" name="" title="下次自动登录" lay-skin="primary" checked>
                        <span class="login_rem"><a href="#">忘记密码</a></span>
                    </div>
                    <div class="layui-form-item login_line8">
                        <button class="layui-btn register">注册</button>
                        <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
                    </div>
    
                </form>
            </div>
            <script src="js/jquery-1.11.3.js"></script>
            <script src="layui/layui.js"></script>
            <script>
                layui.use(['form','layer'],function (){
                    var layer=layui.layer;
                     var form =layui.form;
                    form.verify({
                        username: function(value){
                            if(value.length ==0){
                                return '用户名不能为空';
                            }
                            if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                                return '用户名不能有特殊字符';
                            }
                            if(/(^\_)|(\__)|(\_+$)/.test(value)){
                                return '用户名首尾不能出现下划线\'_\'';
                            }
                            if(/^\d+\d+\d$/.test(value)){
                                return '用户名不能全为数字';
                            }
    
                            //如果不想自动弹出默认提示框,可以直接返回 true,这时你可以通过其他任意方式提示(v2.5.7 新增)
                            if(value === 'xxx'){
                                alert('用户名不能为敏感词');
                                return true;
                            }
                        }
                        ,password: [
                            /^[\S]{6,12}$/
                            ,'密码必须6到12位,且不能出现空格'
                        ]
                        // ,phone:[
                        //     /^[1][0-9]{10}$/
                        //     ,'手机号格式不正确'
                        // ]
                    });
                     $(".register").on('click',function (){
                         var index = parent.layer.getFrameIndex(window.name);
                         parent.layer.close(index);
                         parent.layer.open({
                             type:2,    //弹出一个页面层
                             title:"注册",
                             content:'register.html',
                             area: ['500px', '550px'],
                             anim:1
                         })
                     })
                })
            </script>
        </body>
    </html>
    

    这里面给注册绑定了一个点击事件,先关闭掉之前的弹窗,再打开一个新页面,这里面也添加了一点表单验证,这样可以减少后端数据处理的压力。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>注册</title>
    
            <link rel="stylesheet" href="layui/css/layui.css">
            <style>
                .header {
                    background: #FD5353;
                    border-radius: 10px 10px 0px 0px;
    
                }
    
                form {
                    margin: 10px 15px 15px;
                }
    
                .header h1 {
                    color: #FFFFFF;
                }
    
                .huoqu {
                    background: #fff;
                    color: #0C0C0C;
                    border: 1px solid #E6E6E6;
                }
    
                .huoqu:hover {
                    color: #0C0C0C;
                }
    
                .zhuce {
                    width: 100%;
                    background: #FD5353;
                    color: #fff;
                    font-size: 18px;
                    border-radius: 5px;
                }
    
                .zhuce:hover {
                    opacity: 1;
                }
    
                .layui-form-checked[lay-skin=primary] i {
                    border-color: #FD5353 !important;
                }
    
                .layui-form-checked i, .layui-form-checked:hover i {
                    background-color: #FD5353 !important;
                }
    
            </style>
            <script src="js/jquery-1.11.3.js"></script>
        </head>
        <body>
            <div class="layui-row">
                <form action="" class="layui-form layui-form-pane layui-col-xs11">
                    <!-- 第一行-->
                    <div class="layui-form-item layui-row header">
                        <h1 class="layui-col-xs6 layui-col-xs-offset3">注册蜻蜓FM账号</h1>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i
                                class="layui-icon layui-icon-username"></i></label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="username" class="layui-input"
                                   placeholder="请输入用户名"/>
                        </div>
                    </div>
                    <!-- 第二行-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <i class="layui-icon layui-icon-cellphone"></i></label>
                        <div class="layui-input-block">
                            <input type="tel" name="phone" lay-verify="phone" class="layui-input"
                                   placeholder="请输入手机号"/>
                        </div>
                    </div>
                    <!-- 第三行-->
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs8">
                                <label class="layui-form-label"><i
                                        class="layui-icon layui-icon-vercode"></i></label>
                                <div class="layui-input-block">
                                    <input type="text" name="vercode" lay-verify="vercode" class="layui-input"
                                           placeholder="请输入验证码"/>
                                </div>
                            </div>
                            <div class="layui-col-xs2 layui-col-xs-offset1">
                                <button class="layui-btn huoqu">发送验证码</button>
                            </div>
    
                        </div>
                    </div>
                    <!--                第四行-->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i
                                class="layui-icon layui-icon-password"></i></label>
                        <div class="layui-input-block">
                            <input type="password" id="pwd1" name="password" lay-verify="password" class="layui-input"
                                   placeholder="请输入密码"/>
                        </div>
                    </div>
                    <!--                第五行-->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i
                                class="layui-icon layui-icon-password"></i></label>
                        <div class="layui-input-block">
                            <input type="password" id="pwd2" name="password" lay-verify="password_twice" class="layui-input"
                                   placeholder="请再次输入密码"/>
                        </div>
                    </div>
    
                    <div class="layui-form-item">
                        <input type="checkbox" id="key_service" lay-verify="check"  name="" title="我已阅读并同意 <a href='#'>《用户协议》</a><a>《隐私政策》</a>"
                               lay-skin="primary">
                    </div>
                    <div class="layui-form-item layui-row ">
                        <button class="layui-btn zhuce" lay-submit>注册</button>
                    </div>
                    <div class="layui-form-item layui-row">
                        <div class="layui-col-xs4 layui-col-xs-offset4">
                            <span>已有账号?</span><a href="#" class="newlogin">直接登录</a>
                        </div>
                    </div>
                </form>
            </div>
    
            <script src="layui/layui.js"></script>
            <script>
                layui.use(['form', 'layer'], function () {
                    var form = layui.form;
                    var layer = layui.layer;
                    form.render();
                    form.verify({
                        username: function (value) {
                            if (value.length == 0) {
                                return '用户名不能为空';
                            }
                            if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                                return '用户名不能有特殊字符';
                            }
                            if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                                return '用户名首尾不能出现下划线\'_\'';
                            }
                            if (/^\d+\d+\d$/.test(value)) {
                                return '用户名不能全为数字';
                            }
    
                            //如果不想自动弹出默认提示框,可以直接返回 true,这时你可以通过其他任意方式提示(v2.5.7 新增)
                            if (value === 'xxx') {
                                alert('用户名不能为敏感词');
                                return true;
                            }
                        }
                        , password: [
                            /^[\S]{6,12}$/
                            , '密码必须6到12位,且不能出现空格'
                        ]
                        ,password_twice:function (value){
                            var newpwd=$("#pwd1").val()
                            if(value.length==0){
                                return '密码必须6到12位,且不能出现空格'
                            }
                            if(newpwd!=value){
                                return '密码必须保持一致哟'
                            }
                        }
                        , phone: [
                            /^[1][0-9]{10}$/
                            , '手机号格式不正确'
                        ]
                        , vercode: [
                            /[\S]+/,
                            '请输入验证码'
                        ]
                        ,check:function (){
                            var checked=$("#key_service").get(0)
                            if (checked.checked==false){
                                // layer.msg("请勾选协议",{icon:5,time:2000,anim: 6})
                                return '请勾选协议'
                            }
                        }
                    });
                    $(".newlogin").on('click', function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.layer.open({
                            type: 2,    //弹出一个页面层
                            title: "登录",
                            content: 'login.html',
                            area: ['500px', '500px'],
                            anim: 1
                        })
                    })
                })
            </script>
        </body>
    </html>
    

    这是注册页面,点击一下登录按钮就会重新跳转登录界面。注册页面有很重要的一点的就是必须点同意才能继续注册。在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • html动手做做一个简单的注册页面

    千次阅读 2018-08-07 12:58:25
    1.创建一个html文件 2.根据案例图片进行设计 3.写相应html代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;META http-equiv="Content-Type" content=&...
  • 使用JDBC做一个简单登录,注册页面
  • 使用Java+MySQL做的一个简单的注册登录页面

    万次阅读 多人点赞 2016-04-17 20:33:35
    昨天开始接触MySQL数据库,大概熟悉了一下在java中操作mysql数据库基本用法,今天尝试着上手一个简单的注册登录小例子,包括界面布局等,纯手工,感觉收获满满,特来分享一下。 我只用了5个类,包括 “连接...
  • 我们先来看一下效果图 大致就是背景图片+白色背景边框 在白色边框里面加元素 我们可以把里面分为三个部分:左边是一段文字、中间是form... td:表示一个单元格 input属性: 1.1.type: text:文本 ...
  • 用jQuery做一个简单用户注册页面

    千次阅读 2019-02-02 13:05:02
    作者:BerenCamlost 1 需求分析 用户登录界面涉及到基本HTML的页面、CSS样式的设计、JS的渲染。但是最重要的是分析出哪个&...2 首先搭建一个比较看得过去的页面 首先我从网上找了一些模板,取精去...
  • } } } index.jsp 登录的页面 *" pageEncoding="utf-8"%> (); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE ...
  • 用php做一个注册页面

    千次阅读 2014-06-05 11:52:09
    在appServ文件夹www文件夹中创建一个test文件夹,里面存放
  • 下面小编就为大家带来一篇JS一个简单的注册页面实例。小编觉得挺不错,现在就分享给大家,也给大家个参考。一起跟随小编过来看看吧
  • 背景页面UI给尺寸比较小情况下,如何按比例不平埔背景呢? .login { width: 100%; padding-bottom: 62.5%; height: 0; background: url('../../images/login.jpg') no-repeat center center fixed; ...
  • 1.登录页面 <%@ page language=“java” contentType=“text/html; charset=utf-8” pageEncoding=“utf-8”%> Insert title here <style type="text/css"> html{ width: 100%; height: 100%;...
  • 用JSP做个简单登录注册页面

    千次阅读 2020-10-21 23:49:32
    紧接着注册成功后跳转成功页面,这时我们需要一个注册成功的页面(registersuccess.jsp),如下: 点击返回页面后,我们就可以在登录页面登录,然后登录时有登录成功和登录失败的页面。所以还要再写两个...
  • 一个简单的注册页面

    2018-09-16 17:10:00
    这是我自己学习做的一个注册页面,较简陋。 图片自行添加。 显示效果图: html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,997
精华内容 1,198
关键字:

做一个注册的页面