登录注册主页面的实现

简介：

HTML是制作前端页面的主要语言，CSS是将做好的HTML页面进行美化，最终呈现给我们一个很完美的页面。

软件：HBuilder Webstorm 谷歌火狐 IE三选一（浏览器不一样，最终的界面布局也会有所差异）。

视自己情况而定，能用的软件很多，这里我只介绍了我自己用的软件，其中HBuilder的运行还需要下载tomcat，Webstorm可能需要破解，可以网上百度序列号，一般都可以用。

这里给大家提供一个很好的在线编写网站，不需要下载任何软件就可以运行代码。里面的介绍很全面，告诉我们各个标签的作用以及用法，只要认真地看，自己写一个登录主页主页面完全不在话下。

HTML 标签https://www.w3school.com.cn/tags/tag_html.asp

可以自己修改其中的内容然后运行看效果。

大家在学习过后就可以直接上手写了，别怕错，多练就好了。可以参考我的代码对自己的进行修改，当然了，我的并不是最好的，只是向大家提供一个模板。如果没有这方面的基础那就先耐心学，或者说去那个W3 school上一边学一边练，就像我前面发的那篇ps实操—基础篇一样，我也是个小白，我同样是跟着一边学一边操作的，知识那么多，一味的学很难有深刻的了解，练得多了自然就熟练了。废话不多说，直接上代码。

文件大体结构

先创建一个文件夹，在这里面继续创建三个同级的文件夹，一个放html的代码，一个放css的代码，一个放所应用的图片。

当然了，也可以把css的内容直接放入到html中， <style type="text/css"></style>放入其中即可，然后css放入<style>标签中。

我直接放在一起了，觉得这样不美观的话就按照我的那个文件结构来，把我下面的代码中css的部分直接拿出来，放在.css中就可以了。

login页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><style type="text/css">body,ul,h2{margin: 0;padding: 0;}.top{width:100%;height: 100px;line-height: 100px;}.top img{position: relative;left: 50px;top: 20px;}.top h2{font-size: 22px;font-weight: 200;display: inline-block;margin-left: 150px;}.main{width: 100%;height: 500px;background-image: url("../img/b1.jpg")}.main .login-wrap{float: left;margin-left: 280px;margin-top: 70px;width: 347px;height: 340px;background-color: white;border-radius: 5px;/*opacity: 0.7;    变透明 */}.main .login-wrap h2{font-size: 22px;font-weight: bold;text-align: center;margin-top: 20px;color: #4670b5;}.main .login-wrap form{width: 80%;height: 80%;margin: 20px auto;/* border: 1px solid crimson;*/}.main .login-wrap form div{width: 100%;height: 38px;border: 1px solid #b4b4b4;margin-bottom: 30px;}.login-wrap .tubiao1{display: block;margin-top: 10px;margin-left: 5px;width:20px ;height: 20px;float: left;background-image: url("../img/yonghu.png");}.login-wrap .tubiao2{display: block;margin-top: 10px;margin-left: 5px;width:20px ;height: 20px;float: left;background-image: url("../img/mima.png");}.main .login-wrap form label{display: inline-block;width: 60px;height: 36px;line-height: 30px;font-size: 12px;color: #6e6e6e;border-right: 1px solid #b4b4b4;text-align: center;}.login-wrap form input[type=text],.login-wrap form input[type=password]{height: 30px;border: none;/*输入文本框，鼠标没有聚焦时候，本身是有边框的，去除边框*/outline: none;/*输入文本框，鼠标点击进去时候的外边框去除*/padding: 2px;}.login-wrap form input[type=submit]{width: 100%;height: 40px;background-color: #4670b5;border: none;color: white;margin-top: 10px ;}</style>    <link href="css/login.css" rel="stylesheet">
</head>
<body>
<div class="top"><img src="../img/旅游.png"height="50px" width="50px"><h2>欢迎登录</h2>
</div>
<div class="main"><div class="login-wrap"><h2>账户登录</h2><form action="menu.html"><div><span class="tubiao1"></span><label>用户名</label><input type="text"></div><div><span class="tubiao2"></span><label>密码</label><input type="password"></div><input type="submit" value="登录"></form></div>
</div>
</body>
</html>

registe页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title><style type="text/css">.d0{width: 380px;margin: 0 auto;line-height: 1.5;}.d01{font-size: 14px;line-height: 17px;padding-left: 2px;margin-bottom: 17px;text-decoration: none;color: #333333;}.d1{width: 378px;height: 38px;border: 1px solid #ccc;margin-bottom: 25px;color: #222;font: 12px "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";}.d11{float: left;width: 76px;padding-left: 11px;line-height: 38px;}.d12{margin:0;width: 200px;height: 100%;position: relative;float: left;line-height: 40px;}.d121{border: none;color: #cacaca;}.d13{width:142px;position: relative;float: left;height: 100%;line-height: 38px;}.d14{float: left;width: 148px;height: 100%;line-height: 38px;text-align: center;background: #f5f5f5;border: 1px solid #bbb;font-size: 14px;margin: -1px -1px 0 0;text-decoration: none;color: #222222;}.d1 a:hover{color: #ff6600;}.d2{background: #f50;width: 100%;line-height: 40px;font-size: 20px;color: #fff;margin: 24px 0 5px;display: block;border-radius: 2px;text-align: center;text-decoration: none;}</style></head><body>
<div class="d0"><img src="../img/libao-hover.png" width="20 "><a href="" class="d01">注册领199元大礼包</a><div class="d1"><lable class="d11">手机号码</lable><div class="d12"><input class="d121" type="text"placeholder="请输入手机号"/></div></div><div class="d1"><lable class="d11">手机验证码</lable><div class="d13"><input class="d121" type="text"placeholder="请输入手机验证码"/></div><a href="" class="d14">获取短信验证码</a></div><div class="d1"><lable class="d11">设置密码</lable><div class="d12"><input class="d121" type="password"placeholder="请输入密码"/></div></div><div class="d2"><a href="registe-success.html" class="d2">注册</a></div>
</div></body>
</html>

成品：

登录注册主页面的实现相关推荐

Django(二)精美博客搭建(1)实现登录/注册功能
前言之前我们用Django框架做了一个很简单的个人博客搭建,不论是页面还是功能都很粗糙所以从这篇开始我打算做一个比较完整的[个人博客网站],可能会分好几篇博客来讲述等所有功能完善的差不多后,再考 ...
用ajax+jquery+json+css3+html5实现登录、注册、以及主页面的增删改查
主要思路在登录界面,输入用户名和密码,失焦的时候,判断输入的用户名和密码是否符合相应的正则表达式的要求.如果符合,就发送ajax请求到服务端,服务端接受到请求,就把从页面中传来的数据和json文件里 ...
Winform中实现简单的登录成功后跳转到主页面的逻辑
场景 Winform中实现运行项目后首先启动登录窗体,验证成功之后,跳转到主页面. 注: 博客: BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot, ...
Python Socket联机自动匹配双人五子棋（含登录注册系统与界面，数据库连接，可作结课作业，可用于学习）
1.前言首先,关于源码的获取,本人提供了三种方式: 直接从文章里面Ctrl+C,Ctrl+V,然后按照我已给的文件结构搞一下即可: 通过积分下载上传到CSDN的资源: 点开本人的主页,点击" ...
javaweb+servlet+mysql登录+注册+增删改查源码
一.项目功能简介功能流程图源码: 百度网盘链接:https://pan.baidu.com/s/1QpbX1Sz0nZJwlvzEvx7zEw 提取码:ynzu 数据库: 链接:https:// ...
Vue项目之登录注册
Vue项目之登录注册 1. 注册 1.1 注册页面的布局 1.2 注册业务逻辑的实现 2. 登录 3.导航守卫 3.1全局导航守卫,全部路由都会经过这里.一定要调用next方法向下执行 3.2 路由独 ...
2020-2-15一个web登录注册小程序与Spring初始+作业
文章目录建立一个Web登录注册小程序 1.先在Mysql数据库中新建一个数据库 2.在IDEA中新建一个工程 3.对项目进行简单分层 4.设计一个实体类 5.引入一个jdbc工具类 6.写一个测试类 ...
React + nodemailer + koa-jwt 实现登录注册邮箱验证
完整源码在github,下载server和react部分最近在做一个JSPatch后台管理系统.起初只是自己内部用,后来买了阿里云的免费服务器,用docker+jenkins完成了一个自动化部署,于 ...
前端基础第四天项目社交媒体黑马头条项目-登录注册和个人中心
一.项目初始化目标能使用 Vue CLI 创建项目了解 Vant 组件库的导入方式掌握制作使用字体图标的方式掌握如何在 Vue 项目中处理 REM 适配理解 axios 请求模块的封装使 ...

登录注册主页面的实现

登录注册主页面的实现相关推荐

最新文章

热门文章