前端开发学习

2023-08-24 05:31| 来源: 网络整理| 查看: 265

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

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

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

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

登录我要登录我要注册账号密码 ;记住密码找回密码 | 还没有注册账号立即注册第三方账号直接登录手机号码用户名密码短信验证码邀请码(选填) 第三方账号直接登录 window.onload=function () { let as=document.getElementsByClassName('content-header')[0].getElementsByTagName('a'); let contents=document.getElementsByClassName("dom"); for (let i=0;i // 清楚所有标签的css设置，隐藏dom标签 for(let j=0;j margin: 0; padding: 0; text-decoration: none; list-style: none; box-sizing: border-box; } .clearfix::before, .clearfix::after{ content: ''; display: block; clear: both; } input,button{ outline: none; } html{ font-size: 10px; } body{ font-size: 1.4rem; } a{ color: purple; } /*************************主体设计**************************************/ /*主体*/ #content{ width: 50rem; /*height: 60rem;*/ border: 0.1rem solid #cccccc; margin: 5rem auto; } /*头部*/ /*#content .content-header{*/ /* border: 0.1rem solid blue;*/ /*}*/ #content .content-header a{ height: 6rem; width: 50%; background-color: #ebebeb; color: #666666; display: inline-block; float: left; /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 6rem; font-size: 1.6rem; } #content .content-header a.current{ background-color: transparent; color: purple; } /*内容*/ #content .content-body{ /*background-color: red;*/ padding: 4rem; } #content .content-body .dom{ width: 100%; display: none; } #content .content-body .dom .s1{ /*background-color: red;*/ margin-bottom: 2rem; } #content .content-body .dom .s1 h4{ color:black; } #content .content-body .dom .s1 input{ width: 100%; height: 4rem; margin-top: 0.5rem; padding-left:0.5rem ; border-radius: 5px; border:1px solid #cccccc; } #content .content-body .dom .s2{ margin-bottom: 2rem; color: black; font-size: 1.4rem; } #content .content-body .dom .btn{ width: 100%; height: 3.5rem; border: none; background-color: purple; color: white; font-size: 1.8rem; margin-bottom: 2rem; text-align: center; line-height: 3.5rem; border-radius: 5px; } /*#content .content-body .dom .dom-footer{*/ /* background-color: red;*/ /*}*/ #content .content-body .dom .dom-footer .login-another{ /*background-color: red;*/ color: #666666; margin-bottom: 2rem; text-align: center; line-height: 100%; } #content .content-body .dom .dom-footer .login-another span{ margin: 0 0.5rem; } #content .content-body .dom .dom-footer .login-three{ /*background-color: red;*/ text-align: center; line-height: 100%; color: #666666; margin-top: 2rem; } #content .content-body .dom .dom-footer .login-three span{ margin-bottom: 2rem; font-size: 1.2rem; position: relative; } /*创建字体前的线条*/ #content .content-body .dom .dom-footer .login-three span::before{ content: ''; display: inline-block; width: 12rem; border: 1px solid #e0e0e0; position: absolute; top:50%; left: -125%; } /*创建字体后的线条*/ #content .content-body .dom .dom-footer .login-three span::after{ content: ''; display: inline-block; width: 12rem; border: 1px solid #e0e0e0; position: absolute; top:50%; right: -125%; } #content .content-body .dom .dom-footer .login-three img{ margin-top: 2rem; height: 3rem; width: 3rem; border-radius: 50%; } #content .content-body .dom .msg-code input{ width: 49%; } #content .content-body .dom .msg-code input:last-child{ color: #666666; cursor: pointer; }

总的来说熟悉以后应该可以很快完成类似页面，只要登录页完成后，注册页很快就可以完成。

【本文地址】

前端开发学习

前端开发学习

今日新闻

推荐新闻