HTML案例登录页面

本人是菜鸟，刚入前端坑想记录一下自己写过的页面，也希望能帮到跟我一样的你，加油鸭~~~

简单的登录页面

<input

id="username"

type="text"

autocomplete="off"

placeholder="手机号"

</div>

<input

id="password"

type="password"

autocomplete="off"

placeholder="登录密码"

</div>

</div>

</div>

以上是html的代码可以直接复制粘贴就好！!!!!~~~~

.www{

max-width: 640px;

margin: 0 auto;

min-height: 100%;

}

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

max-width: 1226px;

margin: 0 auto !important;

height: 100%;

background: #fff url(img/backgroud.png) 50% 50% no-repeat;

background-size: cover;

}

.content {

margin-bottom: 15px;

}

.dowebok {

position: absolute;

left: 50%;

top: 50%;

width: 430px;

height: 100%;

margin: -300px 0 0 -215px;

border: 1px solid #fff;

border-radius: 20px;

overflow: hidden;

}

.logo {

width: 104px;

height: 104px;

margin: 50px auto 80px;

background: url(img/login.png) 0 0 no-repeat;

}

.form-item {

position: relative;

width: 360px;

margin: 0 auto;

padding-bottom: 30px;

}

.dowebok .form-item input {

width: 100%;

height: 48px;

padding-left: 20px;

border: 1px solid black;

border-radius: 25px;

font-size: 18px;

color: #fff;

background-color: transparent;

outline: none;

}

.form-item button {

width: 360px;

height: 50px;

border: 0;

border-radius: 25px;

font-size: 18px;

color: #1f6f4a;

outline: none;

cursor: pointer;

background-color: #fff;

border: 1px solid black;

}

.form-item button a{

text-decoration: none;

}

#username {

background: url(img/emil.png) 20px 14px no-repeat;

}

#password {

background: url(img/password.png) 23px 11px no-repeat;

}

.tip {

display: none;

position: absolute;

left: 20px;

top: 52px;

font-size: 14px;

color: #f50;

}

.reg-bar {

width: 360px;

margin: 20px auto;

font-size: 14px;

}

.reg-bar a {

color: #000;

text-decoration: none;

}

.reg-bar a:hover {

text-decoration: underline;

}

.reg-bar .reg {

float: left;

}

.reg-bar .forget {

float: right;

}

.dowebok ::-webkit-input-placeholder {

font-size: 18px;

line-height: 1.4;

color: rgb(145, 138, 138);

}

.dowebok :-moz-placeholder {

font-size: 18px;

line-height: 1.4;

color: rgb(145, 138, 138);

}

.dowebok ::-moz-placeholder {

font-size: 18px;

line-height: 1.4;

color: rgb(145, 138, 138);

}

.dowebok :-ms-input-placeholder {

font-size: 18px;

line-height: 1.4;

color: rgb(145, 138, 138);

}

@media screen and (max-width: 500px) {

.dowebok {

position: static;

width: auto;

height: 100%;

margin: 0 30px;

border: 0;

border-radius: 0;

}

.logo {

margin: 50px auto;

}

.form-item {

width: auto;

}

.form-item input,

.form-item button,

.reg-bar {

width: 100%;

}

以上就是整个啦，加油呀小蒋~！！！

HTML案例登录页面相关推荐

用HTML做一个简单的web登录页面,简单的JavaWeb注册登录案例
简单的JavaWeb注册登录案例 1.注册页面register.html register 姓名: 电话: 邮箱: qq: 2.注册案例实现程序register.java /** * 注册案例实现程序 ...
高品位登录页面，优秀案例给你灵感！
网页的登录注册页所包含的信息非常有限,但通过使用图片.插画等内容,针对信息巧妙地产生视觉引导,就能让原本单调的页面更加丰富和统一. 看看集设网www.ijishe.com设计师交流社区带来的优秀案例能 ...
软件测试案例｜Python+Selenium+unittest完成对登录页面的自动化测试
软件测试案例:Python+Selenium+unittest完成对登录页面的自动化测试 01.实验简介本实验使用Python语言结合Selenium UI测试工具,利用unittest组织测试用例 ...
Web APIs 正则表达式综合案例丨小兔仙儿登录页面
目录综合案例:小兔鲜登录页面案例代码:CSS丨common 案例代码:CSS丨index 案例代码:CSS丨login 案例代码:CSS丨register 案例代码:HTML丨index 案例代码 ...
案例:京东登录页面css创建
京东登录页面效果图一.整体html代码 <!DOCTYPE html> <html><head><meta charset="utf-8&quo ...
react登录页面_「开源」React-Admin终极后台管理项目解决方案
前端chenghao大神的作品,页面非常完善漂亮,不折不扣的企业级作品.学习react的小伙伴不可错过的好东西. 功能模块首页完整布局换肤(全局功能,暂时只实现了顶部导航的换肤,后续加上其他模块 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
figma下载_我如何使用Figma，CSS Grid和CSS Flexbox构建登录页面
figma下载 I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they ...
测试篇(三)：测试用例的万能公式、对水杯和登录页面设计测试用例、测试用例的设计方法
目录一.测试用例的万能公式二.对登录页面设计测试用例三.测试用例的设计方法 3.1 基于需求的设计方法 3.2 等价类 3.3 边界值 3.4 判定表 3.5 正交排列 3.6 场景设计法 3. ...
Android开发实现简单QQ登录页面
Android开发实现极为简单的QQ登录页面设计一个简单QQ登录页面,无任何功能.然后打包安装到手机. 1.首先创建一个空白页面 2.打开样式设计的页面在activity_main.xml中写入代 ...

HTML案例登录页面

HTML案例登录页面相关推荐

最新文章

热门文章