第七章 浮动（制作京东登录页面）
2024-04-08 14:51:06
<div class="div01"><header><nav><img src="data:image/logo.png" alt=""><h1>欢迎登陆</h1></nav></header><article><div class="wrap"><div class="login-box"><div class="login-form"><h2>京东会员<a href="#"><img src="data:image/icon5.jpg">立即注册</a></h2><form action="" method="post" id="loginForm"><div class="input"><label for="nick" class="nick"></label><input type="text" name="nick" placeholder="邮箱/用户名/已验证手机"></div><div class="input"><label for="pwd" class="pwd"></label><input type="password" name="pwd"></div><div class="input2"><input type="checkbox" name="auto" id="auto"><label for="auto">自动登录</label><a href="#">忘记密码？</a></div><div class="input3"><a href="#" class="dl">登录</a></div></form></div></div></div></article><footer><div><ul><li><a href="#">关于我们</a><span>|</span></li><li><a href="#">联系我们</a><span>|</span></li><li><a href="#">人才招聘</a><span>|</span></li><li><a href="#">商家入驻</a><span>|</span></li><li><a href="#">广告服务</a><span>|</span></li><li><a href="#">手机京东</a><span>|</span></li><li><a href="#">友情链接</a><span>|</span></li><li><a href="#">销售联盟</a><span>|</span></li><li><a href="#">京东社区</a><span>|</span></li><li><a href="#">京东公益</a><span>|</span></li><li><a href="#">English Site</a></li></ul><p>Copyright©2004-2017 京东JD.com 版权所有</p></div></footer></div>
<style>*{margin: 0px;padding: 0px;}.div01 header{width: 990px;height: 60px;background: white;margin: 0px auto;overflow: hidden;}.div01 header img{display: inline-block;vertical-align: middle;}.div01 header nav h1{vertical-align: middle;display: inline-block;font-size: 24px;color: #808080;font-weight: normal;margin-left: 20px;}.div01 article {height: 475px;background-color: #e75858;}.div01 article .wrap{width: 990px;height: 475px;background: url(image/banner.png) no-repeat;margin: 0px auto;}.div01 article .login-box{display: block;border: 1px solid #808080;width: 306px;height: 238px;background: white;float: right;margin-top: 40px;padding: 23px 20px 20px 20px;box-sizing: border-box;}.div01 article .login-form h2{font-size: 16px;color: #808080;font-weight: normal;}.div01 article .login-form h2 a img{vertical-align: middle;margin-right: 4px;}.div01 article .login-form h2 a{display: block;float: right;color: #808080;font-size: 12px;text-decoration: none;}.div01 article .login-form h2 a:hover{color: red;}.div01 article .input{width: 260px;height: 38px;margin-top: 18px;border: 1px solid #BBDDBB;}.input label{overflow: hidden;float: left;width: 38px;height: 38px;border-right: 1px solid #BBDDBB;}.input input{width: 220px;height: 38px;float: right;border: 0px;}.input .nick{background: url(image/icon1.jpg);}.input .pwd{background: url(image/icon2.jpg);}.div01 article .login-form .input2{font-size: 12px;margin-top: 16px; }.div01 article .login-form .input2 a{color: #808080;text-decoration: none;float: right;}.div01 article .login-form .input2 a:hover{color: orange;}.div01 article .login-form label,input{vertical-align: middle;}.div01 article .login-form .input3{width: 260px;height: 30px;background: red;font-size: 18px;margin: 7px 0px;}.div01 article .login-form .input3 a{color: white;text-align: center;text-decoration: none;display: block;line-height: 30px;}.div01 footer{width: 990px;margin: 0px auto;}.div01 footer div ul{list-style: none;font-size: 12px;margin-top: 22px;text-align: center;}.div01 footer ul li{display: inline-block;}.div01 footer ul li span{padding-left: 12px;padding-right: 8px;}.div01 footer div p{text-align: center;font-size: 12px;color: #808080;margin-top: 10px;}.div01 footer ul li a{color: #808080;text-decoration: none;}.div01 footer ul li a:hover{color: #e75858;}
第七章 浮动（制作京东登录页面）相关推荐
- HTML第6章上机练习3(制作京东快报页面)
代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
- 制作京东快报页面html,HTML第6章上机练习3(制作京东快报页面)
代码如下: 制作京东快报页面 .title{ height: 186px; width: 230px; box-sizing: border-box; border: 1px solid gainsb ...
- 案例:京东登录页面css创建
京东登录页面 效果图 一.整体html代码 <!DOCTYPE html> <html><head><meta charset="utf-8&quo ...
- html第七章浮动 简答题5,第七章人力资源薪酬管理练习.docx
精品文档你我共享 精品文档你我共享 知识改变命运 知识改变命运 第七章薪酬管理练习 . .名词解释 1. 企业薪酬制度 2. 薪酬管理 3. 薪酬 4. 战略性薪酬管理 5. 员工福利制度 6. 员工 ...
- html （第四本书第七章浮动参考）
课上1 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8& ...
- 原创｜RSA加密详解，京东登录页面都在用加密有什么好？
前言 在以前的一个项目中,觉得登录注册的加密方式不安全,需要改造一下,就用到了RSA加密.网上都说它是最安全的,现有的技术是无法破解的.我知道的京东的登录和国寿的登录都是用的这个加密.我想整理一下,肯 ...
- Bootstrap JQuery 制作一个登录页面
使用Bootstrap和 JQuery 制作一个简单登录页面: 链接:https://pan.baidu.com/s/1wJyL1rdVST0cVPfcbuIQlw 提取码:6666 1. 实现图片的 ...
- 鸿蒙HarmonyOS的初次使用––制作一登录页面，实现跳转(DevEcoStudio)
------用DevEcoStudio实现鸿蒙开发(制做登录页面,跑马灯,页面跳转,页面选择) 环境配置 创建java项目 运行模拟器 代码部署 java代码 xml代码 layout目录下的xml文 ...
- 3、Vue+ElementUI制作用户登录页面
前面两篇简单了解了一下vue和SPA,现在来用Vue+ElementUI做一个用户登录页面,ElementUI是Element出的一套针对vue的UI库,类似的UI库非常多,ElementUI只是其中 ...
- HTML制作简易登录页面（网易笔记）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>网易邮 ...
最新文章
- bootstrap signin将邮件改成用户名_[源码和文档分享]基于VC++和Oracle数据库的邮件管理系统的设计与实现...
- 课程作业1：字符型强制转化为整型
- BASIC-4 数列特征
- thinkphp-无限分类下根据任意部门获取顶级部门ID
- 力扣19，删除链表的倒数第n个节点（JavaScript）
- Java设计模式学习记录-解释器模式
- Zabbix graph（图形 告警） 时间显示不正确的解决办法
- mysql_day02创建数据表
- vm虚拟机安装gho系统_虚拟机怎么安装gho系统
- 小程序员的不完整大学回忆3
- npm i和npm i --save没有区别
- Deep_Learn关于数组和数的操作
- [转]Mac 科研常用软件
- 换行标签＜br＞和水平线标签＜hr＞
- 1.（group by）如何让group by分组后，每组中的所有数据都显示出来
- 10M/s，保姆级教程，制作自己的网盘不限速工具！
- Robot Studio写字工作站
- Android安卓进程保活(一)1像素且透明Activity
- gradle强制刷新依赖
- WINCE6.0刷系统异常