HTML+CSS实现小米登录界面

HTML+CSS实现小米登录界面
效果图如下（需要源代码的评论区留言或者加下面的QQ群，资料都在群里）

点我进群一起学习交流！(群里有许多的学习资料，我做过的一些网页我都上传在群里了，需要的直接下载就可以了)

QQ群:722384575

HTML部分源代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米账号-登录</title><link rel="stylesheet" href="register.css">
</head><body><!-- 头部部分 开始 --><div href="#" class="header"><a href="index.html" class="logo"></a><div class="logo_text"><h2>小米商城</h2><p>让每个人都能享受科技的乐趣</p></div></div><!-- 头部部分 结束 --><!-- 中间部分 开始 --><div class="middle"><div class="user"><div class="user_header"><div class="title"><a href="#">账号登录</a><span class="line"></span><a href="#">扫码登录</a></div></div><div class="user_middle"><input type="text" placeholder="邮箱/手机号码/小米ID"><input type="password" name="mima" id="password" placeholder="密码"><a href="#">登录</a><li><a href="#">手机短信登录/注册</a></li><li><a href="login.html">立即注册</a> <span>|</span> <a href="#">忘记密码</a></li></div><div class="user_footer"><img src="data:images/register_middle_last.png" alt=""></div></div></div><!-- 中间部分 结束 --><!-- 尾部部分 开始 --><div class="footer"><ul><li><a href="#">简体</a><span>|</span></li><li><a href="#">繁体</a><span>|</span></li><li><a href="#">English</a><span>|</span></li><li><a href="#">常见问题</a><span>|</span></li><li><a href="#">隐私政策</a></li></ul></div><!-- 尾部部分 结束 -->
</body></html>

CSS部分源代码如下：

*{margin: 0;padding: 0;
}
a{text-decoration: none;
}
li{list-style: none;
}
.header{display: block;width: 1130px;height: 98px;margin: 0 auto;text-align: center;
}
.logo{float: left;display: block;width: 55px;height: 55px;background-image: url(images/mi-logo.png);background-color: #FF6700;background-position: 50%;margin-top: 20px;
}
.logo_text{float: left;margin-left: 10px;margin-top: 20px;
}
.logo_text h2{font-weight: 400;letter-spacing: 5px;
}
.logo_text p{margin-top: 5px;font-size: 6px;
}
/* 中间部分开始 */
.middle{position: relative;height: 588px;background-image: url(images/register_middle_banner.jpg);background-repeat: no-repeat;background-position: 50% 0;
}
.user{position: absolute;top: 35px;right: 190px;width: 410px;height: 556px;background-color: white;
}
.user_header{height: 82px;text-align: center;line-height: 82px;
}
.user_header a{padding: 27px 0 24px;text-align: center;font-size: 24px;color: #666;
}
.user_header a:hover{color: #FF6700;
}
.line{width: 1px;height: 24px;margin: 0 35px 0 42px;border: 1px solid #e0e0e0;background: #e0e0e0;
}
.user_middle input{color: #686868;
width: 306px;
height: 25px;
border: 1px solid #e0e0e0;
padding: 13px 16px 13px 14px;
margin: 0 0 20px 35px;
}
.user_middle > a{display: block;width: 308px;
height: 25px;
background-color: #FF6700;
padding: 13px 16px 13px 14px;
margin: 0 0 15px 35px;
color: white;
font-size: 14px;
text-align: center;
line-height: 25px;
}
.user_middle li{width: 308px;padding-bottom: 35px;margin: 0 0 0 45px;font-size: 14px;text-align: center;}.user_middle li a{color: #757575;
}
.user_middle li a:hover{color: #FF6700;
}
.user_footer img{margin: 80px 0 0 80px;
}
.footer{display: block;height: 30px;margin: 100px 0 0 600px;}
.footer li{float: left;
}
.footer li a ,
.footer li span {color: #757575;font-size: 14px;
}
.footer li a{display: inline-block;height: 19px;padding: 0 10px;text-align: center;
}
.footer li a:hover{color: #FF6700;
}

HTML+CSS实现小米登录界面相关推荐

html+css 实现华为登录界面
html+css 实现华为登录界面直接放代码,是阿腾阿! html css 直接放代码,是阿腾阿! 效果图(同学们请不要完全copy) html <!DOCTYPE html> < ...
企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
盒子模型引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, ...
HTML+CSS构建移动登录界面
传统行业的商家十分重视门面的装饰,因为一个好的门面会使用户活跃度变的很高.在一个网站中,可以将用户登录视为"门面",其设计的重要性不言而喻.本项目将带领读者实现一个用户登录页面. ...
用HTML和CSS写注册登录界面
一.结果演示注册界面: 登录界面: 二.主要代码展示 1.HTML部分 1.注册界面对于注册界面,可以将其划分为三个部分,分别为左边的"新用户注册",中间的主体部分,以及右边的 ...
html注册页面美化,css登录界面美化
本篇文章主要介绍如何用css美化网站登录界面,需要的小伙伴参考下. 代码如下: 美化登录 *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .co ...
html用户登录页面设计,简洁时尚的用户登录界面设计效果
这是一款简洁时尚的用户登录界面设计效果.该用户登录效果使用CSS和JS来完成,它使用元素滑动效果来制作登录表单动画,字体效果时尚大方,是非常不错的用户登录界面UI设计效果. 使用方法 HTML结构该 ...
c#web窗体登录界面登录注册以及密码找回发送邮箱功能
c#web窗体登录界面登录注册以及密码找回发送邮箱功能效果图如下: 1.登录界面aspx代码 <%@ Page Language="C#" AutoEventWireup= ...
app登录界面背景 css_计算机毕业设计中Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）...
点击上方"蓝字",关注我们. 本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面.对用户输入的用户名和密码就行校验,校验 ...
运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
HTML+CSS实现品优购登录界面
HTML+CSS实现品优购登录界面效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...

HTML+CSS实现小米登录界面

HTML+CSS实现小米登录界面相关推荐

最新文章

热门文章