HTML模拟唯品会登陆和注册页面
2024-05-09 15:09:27
登陆页面：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {padding: 0;margin: 0;}/*div {*//*border: 1px solid red;*//*}*/.header {width: 100%;height: 100px;}.logo {background: url("img/logo.png");width: 174px;height: 79px;float: left;margin-left: 200px;margin-top: 10px;}.service {margin-top: 20px;background: url("img/service.png");width: 321px;height: 55px;float: right;margin-right: 200px;}.content {width: 100%;height: 600px;background: url("https://img.vipstatic.com/upload/flow/2018/06/15/157/15290438491111.jpg");background-repeat: no-repeat; /*图片不能让嗯填充满的时候， 不重复显示*/}.main {width: 360px;height: 300px;float: right; /*将div标签向右对齐*/margin-right: 150px;margin-top: 100px;padding: 20px 20px 30px 20px; /*内边距: 上右下左*/background: white;text-align: center;}#registerText {font-size: 20px;font-weight: bold;}#loginText {float: right; /*div向右偏移*/display: inline; /*块级元素变为行内元素*/}.main input {margin-top: 20px;height: 40px;width: 300px;border: 1px solid darkgray;border-radius: 10px;text-align: left;padding-left: 20px;}.main .code {width: 140px;}.main input[type='checkbox'] {width: 2px;height: 2px;}.main input[type='submit'] {background: #f10180;color: white;border: 1px solid #f10180;margin-top: 30px;text-align: center;}.main a {text-decoration: none;color: #1d94d1;font-size: 13px;}.main #loginText a {color: #f10180;font-size: 15px;}.footer {width: 100%;height: 100px;text-align: center;padding-top: 50px;}</style></head>
<body>
<!--导航栏部分(logo/图标)-->
<div class="header"><div class="logo"></div><div class="service"></div></div>
<!--页面主体-->
<div class="content"><!--注册表单界面--><div class="main"><span id="registerText">会员登录</span><div id="loginText"><a href="#">直接注册</a></div><hr/><input type="text" placeholder="请输入电话号码"><br/><input type="password" placeholder="请输入密码"><br/><input type="submit" value="立即登录"><br/></div></div><!--脚标-底部设置(商标/备案信息)-->
<div class="footer">Copyright 2008-2018 vip.com，All Rights Reserved ICP证：粤 B2-20080329</div></body>
</html>
注册页面：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {padding: 0;margin: 0;}/*div {*//*border: 1px solid red;*//*}*/.header {width: 1920px;height: 100px;margin: 0 auto;}.logo{background: url("img/logo.png");width: 174px;height: 79px;float: left;margin-left: 200px;margin-top: 10px;}.service{margin-top: 20px;background: url("img/service.png");width: 321px;height: 55px;float: right;margin-right: 200px;}.content {width: 1920px;height: 600px;background: url("https://img.vipstatic.com/upload/flow/2018/06/15/157/15290438491111.jpg");background-repeat: no-repeat; /*图片不能让嗯填充满的时候， 不重复显示*/margin: 0 auto;}.main {width: 360px;height: 450px;float: right; /*将div标签向右对齐*/margin-right: 150px;margin-top: 50px;padding: 20px 20px 30px 20px; /*内边距: 上右下左*/background: white;text-align: center;}#registerText {font-size: 20px;font-weight: bold;}#loginText {float: right; /*div向右偏移*/display: inline; /*块级元素变为行内元素*/}.main input {margin-top: 20px;height: 40px;width: 300px;border: 1px solid darkgray;border-radius: 10px;text-align: left;padding-left: 20px;}.main .code {width: 140px;}.main input[type='checkbox'] {width: 2px;height: 2px;}.main input[type='submit'] {background: #f10180;color: white;border: 1px solid #f10180;text-align: center;}.main a {text-decoration: none;color: #1d94d1;font-size: 13px;}.main #loginText a{color: #f10180;font-size: 15px;}.footer {width: 1920px;height: 100px;text-align: center;padding-top: 50px;margin: 0 auto;}</style></head>
<body>
<!--导航栏部分(logo/图标)-->
<div class="header"><div class="logo"></div><div class="service"></div></div>
<!--页面主体-->
<div class="content"><!--注册表单界面--><div class="main"><span id="registerText">会员注册</span><div id="loginText">已注册可<a href="#">直接登录</a></div><hr/><input type="text" placeholder="请输入电话号码"><br/><input type="text" class="code" placeholder="请输入验证码"> <input type="button" class="code" value="获取验证码"><br/><input type="password" placeholder="请输入密码"><br/><input type="password" placeholder="请重新输入密码"><br/><input type="checkbox">我已阅读并接受以下条款：<a href="#">《唯品会服务条款》 </a><a href="#">《隐私条款》 </a><a href="#">《唯品支付用户服务协议》 </a><a href="#">《唯品信用服务协议》 </a><br/><input type="submit" value="立即注册"><br/></div></div><!--脚标-底部设置(商标/备案信息)-->
<div class="footer">Copyright 2008-2018 vip.com，All Rights Reserved ICP证：粤 B2-20080329</div></body>
</html>
css样式：
body {margin: 0; /*去掉默认的外边距*/padding: 0; /*去掉默认的内边距*/
}.content {background-color: pink;margin-top: 200px;height: 400px;}.main {/*border: 1px solid red;*/width: 600px;height: 400px;margin: 0 auto; /*块级标签居中的方式*/padding-top: 30px;text-align: center;}.main h1 {font-size: 60px;color: white;
}input[type='text'], input[type='password'] {width: 400px;height: 46px;border-radius: 25px;border: 0;margin-top: 15px;text-align: center;}
input[type='submit'] {background: #f31239;border-radius: 25px;margin-top: 15px;width: 200px;height: 46px;border: 0;color: white;}input:hover {background: deeppink;
}
HTML模拟唯品会登陆和注册页面相关推荐
- 12月11日，12月12日登陆注册页面的进度
12月11日晚 抽出时间读学姐给的登录注册页面代码,有不懂的地方就百度,基本搞清楚了点登陆注册页面的基本框架和元素的作用.重点学习了<input><button><for ...
- 班级页面设计——【1-登陆注册页面】
登陆页面前言 对于一个页面来说,一般都会设计登陆/注册页面,借鉴于网络上面好多登陆与注册页面做出了一款小编自己的登陆注册页面,下面是相关的页面效果和小编的代码部分. 1.登陆页面 页面效果展示: 制作 ...
- 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用 核心就是用localStorage存.取数据,这 ...
- javaweb 登陆注册页面
视图的数据修改,表中也修改 引用工具类用<%@ page import=""%> <%@ page import="java.util.Date&quo ...
- html制作唯品会登陆页面,login.html
唯品会登陆 * { padding: 0; margin: 0; } a { text-decoration: none; color: #666; } body { font-size: 12px; ...
- JavaEE学习之jsp编写登陆注册页面
JavaEE学习之jsp编写登陆注册页面 刚开始学习javaee,好多东西需要一点点积累.最近用jsp和简单的JavaScript写的登录注册界面,简单做一下记录. 准备–页面布局 登录和注册界面的H ...
- 图书管理系统之登陆注册页面布局（一）
图书管理系统之登陆注册页面布局(一) 相关源码下载连接:https://download.csdn.net/download/baidu_39378193/85033291 前言,创建一个新的MVC项 ...
- html制作登陆注册页面
html制作登陆注册页面 源代码如下 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- jsp mysql登录注册实验报告_登陆注册页面实验报告.doc
登陆注册页面实验报告 兰州理工大学 二.数据库设计 本系统采用mysql数据库,只有一个表:数据表userinfoinfo用来存储后台会员名称,密码和基本资料. 2.1用户信息表: 下面是用户信息表表 ...
最新文章
- 机器学习的数学基础 - 期望，方差与协方差
- hitTest和pointInside如何响应用户点击事件
- C++保存不同的图片格式
- LVM使用手册简化命令
- GDCM：gdcm::Codec的测试程序
- mysql 报表统计sql使用实例_mysql 案例~mysql元数据的sql统计
- C++中栈内存和堆内存
- 大学计算机专业绩点在3.5算好,大学绩点3.5算什么水平 绩点低有哪些补救方法...
- 导出无法正常启动的VMware虚拟机中的文件
- div内文本(text)居中对齐
- csm和uefi_传统bios引导与uefi引导之比较
- 优启通制作系统u盘_EasyU优启通U盘启动盘制作工具BIOS+UEFI双启无捆绑
- oracle只有dbf文件能不能恢复,Oracle 误删DBF文件恢复
- javaScript学习手册：JS对象
- lowB三人组代码示例
- MES系统功能在石油化工行业的应用
- Elasticsearch启动报错：warning: ignoring JAVA_HOME=C:\Program Files\Java\jdk1.8.0_191； using bundled JDK
- SpringBoot - 配置 Filter 的几种方式
- Python滚动条如果滚不动
- 向外国大师学习敏捷式开发？嫦娥掩面而笑