练习：仿小米静态登录页面

效果图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.father {margin: 50px auto;}.pic {/* 设置背景颜色、插入图片、图片不重复、图片居中 */background: #ff5b00 url(use/mi-logo.png) no-repeat center center;width: 50px;height: 50px;/* 图标边角的圆弧度 */border-radius: 5%;margin: auto;}.title {margin-top: 20px;/* 其内子元素是h1，我转化为行内块，方便居中 */text-align: center;}h1 {/* 字体不加粗 */font-weight: 400;/* 块元素转化为行内块 */display: inline-block;}.uname,.pwd {width: 330px;height: 50px;/* 重置边框的边框样式 */border: 1px #e6e6e6 solid;margin-top: 15px;/* 设置内边距，使输入框内的字体距离左边框20px */padding-left: 20px;}.input {margin-top: 30px;/* 其内三个都是表单元素，也就是行内元素，用text-align设置居中 */text-align: center;}button {width: 356px;height: 50px;background-color: #ff5b00;color: white;margin-top: 20px;/* 按钮自带边框线，border：none去掉默认边框 */border: none;}</style>
</head>
<body><div class="father"><div class="pic"></div><div class="title"><h1>小米账号登录</h1></div><div class="input"><input type="text" placeholder="邮箱/手机号码/小米ID" class="uname"><br><input type="password" placeholder="密码" class="pwd"><br><button>登录</button></div></div>
</body>
</html>

练习：仿小米静态登录页面相关推荐

HTML前端仿京东静态登录页面
HTML前端仿京东静态登录页面很多小伙伴在学习前端静态布局的时候总是一头雾水不知版图从何构造今天就写了一篇这个京东登录页面和大家一快学习! <!DOCTYPE html> <h ...
canvasnest 移动距离_GitHub - XiaoxinJiang/canvas-nest: 仿知乎登录页面canvas-nest
canvas-nest 仿知乎登录页面canvas-nest 首先上效果图: 因为使用gif图片的原因,线条不是很清晰,大家可以到我的博客观看效果:http://cherryblog.site/ ,( ...
HBuilderX uni-app简单实现静态登录页面（实例）
本章用到......uni-app页面跳转uni.navigateTo方法.uni.navigateBack方法.uni-app简单实现邮箱验证码发送点击后读秒样式.登录账号.密码正则表达式验证等适 ...
微信小程序相关一、模仿京东静态登录页面
一.培训的第一天,基本上没有什么最新的东西,但是看到老师的代码收获的确实是不少. 1.1.首页代码很简洁,将共有的样式都提取的很好. 1.2.其次是每一个小块写样式的时候用到了好多子代选择器和后代选择 ...
仿京东商城登录页面_京东e卡如何使用？
一.使用京东E卡可以在 www.jd.com ("本网站")上购买自营商品,部分特殊商品除外,详细可见"购卡章程",具体有效期请登录京东商城,在"我 ...
vue纯静态登录页面
两个组件login组件和app组件两张图片第一个组件App <template><div class="background"><login cl ...
.net程序员转战android第三篇---登录模块之静态登录
这一篇我将分2个部分记录登录界面,第一部分是静态登录, 这部分将如何从界面布局.控件使用.文件关系.数据验证.登陆实现等5小块记录. 第二部分是动态登录,这块会基于上面的4小块,在数据验证不是静态数据 ...
仿小米商城和登录的静态页面
仿小米商城和登录的静态页面以下仅为参考,下载学习请前往本人gitee仓库主页(index).html index.css search.js login.html login.css login. ...
ThinkPHP6项目基操（11.实战部分部署后台静态页面模板及后台登录页面）
实战部分部署后台静态页面模板及后台登录页面前言一.部署静态资源到项目 1.新建后台静态资源文件夹二.后台登录页面 1. 目录结构 2. 模板字符串替换配置前言网站后台一般是在基础静态页面上 ...

练习：仿小米静态登录页面

效果图：

练习：仿小米静态登录页面相关推荐

最新文章

热门文章