前端小练————天猫国际登录页

html代码部分

<!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><link rel="stylesheet" href="./登录页.css">
</head><body><header><img class="mao" src="./img/天猫国际.png" alt=""><img class="mao1" src="./img/原装.png" alt=""></header><main><ul><a href=""><li class="x-2"><img src="./img/二维码.png" alt=""></li></a><a href=""><li class="w-sanjiao"></li></a><li><ul class="dl1"><li class="mima"><div><a href="">密码登录</a></div><div class="black-l"><a href=""></a></div><ul><form action=""><li><a href=""><img src="./img/user.png" alt=""><input type="text"placeholder="账号名/邮箱/手机号"></a></li><li><a href=""><img src="./img/锁.png" alt=""><input type="text" placeholder="请输入登录密码"></a></li><li class="border-none"><a href=""><input class="dl-red" type="submit" value="登录"></a></li></form><li><ul class="last"><li class="m-last"><a href="">免费注册</a></li><li class="m-last"><a href="">忘记用户名</a></li><li class="m-last"><a href=""> 忘记密码</a></li></ul></li><div class="san"><a href="">扫码登录更安全</a></div><div class="sanjiao"></div></ul></li><li class="dx"><div class="dx-ho"><a href="">短信登录</a></div><div class="black-l dx-l"><a href=""></a></div><ul class="dx-"><form action=""><li><a href=""><img src="./img/手机.png" alt=""><select name="" id="" placeholder=""><option value="">+86</option></select><input class="phone" type="text" placeholder="  请输入手机号"></a></li><li><a href=""><img src="./img/123.png" alt=""><input type="text" placeholder="请输入验证码"></a></li><li class="border-none"><a href=""><input class="dl-red" type="submit" value="登录"></a></li></form><li><ul class="last"></ul></li><div class="san"><a href="">扫码登录更安全</a></div><div class="sanjiao"></div><div class="shxia"><img src="./img/上下.png" alt=""></div><div class="yzm"><a href="">获取验证码</a></div></ul></li></ul><ul class="dl2"><li class="ma">手机扫码，安全登录</li><li class="big"><img src="./img/大二维码.png" alt=""></li><li class="sao"><img src="./img/Snipaste_2022-07-23_15-31-04.png" alt=""><span>打开<a href="">淘宝APP</a>|<ahref="">天猫APP</a>扫一扫登录</span></li><li class="l-t"><div>密码登录</div><div>免费注册</div></li><li class="computer"><a href=""><img src="./img/电脑.png" alt=""></a></li></ul></li></ul></main><footer> <p> 阿里巴巴集团 淘宝网 天猫 聚划算 全球速卖通 阿里巴巴国际交易市场 1688 阿里妈妈 去啊 阿里云计算 YunOS 阿里通信 万网 高德 优视 友盟 酷盘 虾米 天天动听 来往 支付宝 钉钉</p><span> © 2013-2016 Tmall.hk. 版权所有</span></footer>
</body></html>

css代码

* {padding: 0;margin: 0;list-style: none;text-decoration: none;
}html{height: 1000px;
}
header {height: 88px;width: 1190px;margin: 0 auto;/* background-color: red; */
}.mao,
.mao1 {margin-top: 24px;
}.mao {height: 40px;
}.mao1 {height: 16px;margin: 0px 0px 15px 10px;
}/* 头部 */
main {height: 600px;background: url(./img/下载.jpg) no-repeat #7A32ED;
}.dl1 {height: 400px;width: 350px;background-color: white;border: 1px solid black;position: relative;float: right;margin: 90px 307px;
}.dx- {position: absolute;top: 0px;left: -0px;/* display: none; */
}.dx:hover .dx- {display: block;
}.mima,
.dx,
.ma{/* float: left; */font-weight: bold;margin: 30px -10px 0px 20px;position: absolute;
}.dx {right: 200px;
}.mima a,
.dx a {color: #000;
}.black-l {width: 63px;height: 2px;background-color: #000;margin: 4px 0 10px 0;visibility: hidden;
}.dx:hover .black-l,
.mima:hover .black-l {visibility: visible;
}form img {height: 40px;/* margin-top: 10px; */
}form li {float: left;height: 40px;width: 312px;margin-left: -1px;margin-top: 20px;border: 1px solid transparent;
}form li:hover {border: 1px solid #FF0036;/* display: none; */
}input {height: 38px;width: 260px;margin-left: -1px;border: 1px solid #CCCCCC;/* margin-top: 10px; */position: absolute;padding-left: 10px;}input::placeholder {color: #757575;
}input,
select {outline: none;
}.dl-red {background-color: red;color: white;height: 40px;width: 312px;border: none;border-radius: 3px;
}.border-none:hover {border: 1px solid transparent;
}.last {margin-right: 20px;
}.m-last {font-size: 12px;font-weight: normal;height: 40px;line-height: 40px;float: right;margin-right: 10px;text-align: right;
}.m-last a {color: #6C6C6C;
}.san {height: 25px;line-height: 25px;width: 100px;font-weight: normal;border: 1px solid #F3D995;text-align: center;font-size: 12px;background-color: #FEFCEE;position: absolute;top: -25px;right: 70px;z-index: 3;
}.san a {color: #FF9000;
}.sanjiao {width: 0;border: 7px solid #FEFCEE;border-color: transparent transparent transparent #FF9000;position: absolute;top: -19px;right: 57px;z-index: 20;
}.dx- .sanjiao,
.dx- .w-sanjiao {left: 192px;
}.dx- .san {left: 92px;
}.dx- .x-2 img {left: 194px;
}
.dx- .last{position: absolute;top: 224px;left: 186px;
}
.x-2{position: relative;top: 122px;right: 298px;
}.x-2 img {width: 60px;height: 60px;background-color: red;position: absolute;/* background: url(./img/二维码.png) no-repeat; */background-size: 60px;top: -30px;right: 10px;z-index: 1;cursor: pointer;
}.w-sanjiao {width: 0;border: 30px solid white;position: absolute;top: 179px;right: 308px;z-index: 4;border-color: transparent transparent white white;
}select {appearance: none;width: 63px;height: 40px;position: absolute;left: 38px;border: 1px solid #F1EEEE;border-right: transparent;z-index: 1;
}.phone {margin-left: 60px;width: 200px;border-color: #F1EEEE;border-left: transparent;
}.shxia img {width: 30px;position: absolute;top: 63px;left: 15px;z-index: 10px;
}.yzm {font-weight: normal;font-size: 12px;widows: 60px;height: 10px;/* background-color: red; */position: absolute;top: 132px;left: 160px;
}.yzm a {color: #757575;
}
.dx-{display: none;}
.dx-ho:hover .dx-{display: block;
}
.dx-ho:hover .mima .last{display: none;
}
.dx->form>li {float: left;margin-right: 30px;margin-left: -76px;
}.dx form {margin-top: 37px;
}.dx- select {margin-left: -75px;/* border-left: none; */
}
/* 反面 */.big img{width: 130px;position: absolute;top: 100px;left: 110px;box-shadow: 1px 1px 10px grey;
}
.sao{position: absolute;top: 255px;left: 82px;
}
.sao img{width: 34px;float: left;
}
.sao span{display: block;width: 140px;float: left;margin-left: 15px;margin-top: 5px;font-size: 12px;color: #6C6C6C;
}
.sao a{color: red;margin: 0 3px;
}
.l-t div{float: left;font-size: 12px;color: #6C6C6C;margin-right: 10px;
}
.l-t{position: absolute;top: 310px;left: 220px;
}
.computer img{width: 45px;position: absolute;left: 300px;
}
.dl1{/* z-index: 60; */
}
.dl2{height: 400px;width: 350px;background-color: white;border: 1px solid black;position: relative;float: right;margin: 90px 307px;border: 1px solid transparent;z-index: 50;position: absolute;top: 100px;display: none;}/* 底部 */
footer{width: 1190px;height: 51px;/* background-color: greenyellow; */margin: 0 auto;font-size: 12px;}
p{width: 1190px;/* margin-left: 10px; *//* background-color: red; */display: inline-block;position: absolute;margin: 0 auto;letter-spacing: 2px;margin-top: 50px;
}
span{margin-top: 70px;display: inline-block;
}

效果图

前端小练————天猫国际登录页相关推荐

前端小练————三国杀登录页
html部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
前端小练——CSS如何做十字图样
#box{position:absolute;/* 定位改变位置 */top:0;left:10;right:0;bottom:30;width:40px;height:30px;/* 设置宽高 */ ...
CAS登录页、登录成功页自定义实现
CAS登录页自定义实现 1.首先在themes下创建你自己的名称,将需要的前端配置文件放到下面添加配置文件读取加载的前端文件 2.创建登录页将来走你这个配置使用新建文件夹以及登录页再你的登录表单 ...
【实战 Ids4】小技巧篇：自定义登录页操作
今天的内容很简单,1分钟就能看完,5分钟就能学会,但是却是在我们平时开发中必须要学会的一个小知识点,我就不让大家走弯路了,直接看操作. 在平时的IdentityServer4开发中呢,我们都是根据官方 ...
前端如何设置浏览器网页标签页前的小图标favicon.ico
前端如何设置浏览器网页标签页前的小图标favicon.ico 步骤1: 将小图标favicon.ico文件(或者普通的icon小图片)放在项目的public或者static目录下步骤2: index ...
前端炫酷登录页，拿来就能用
一. 炫酷星空代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
前端登录页做个简单记住密码
前端登录页如何做记住密码在一般的项目中,我们需要在登录页面点击登录时记住密码,比较方便下次登录时快速登录,这个时候我们需要在点击登录时判断记住密码是否为选中状态,如果是选中状态把用户名和输入框的值存 ...
前端登录页如何做记住密码
前端登录页如何做记住密码在一般的项目中,我们需要在登录页面点击登录时记住密码,比较方便下次登录时快速登录,这个时候我们需要在点击登录时判断记住密码是否为选中状态,如果是选中状态把用户名和输入框的值存 ...
微信小程序登录页验证与页面跳转
微信小程序登录页实现验证登录和页面跳转利用js实现验证登录和页面跳转,开发工具是微信开发者工具. wxml部分登录页面的代码,需要再创建一个主页. <view class="wel ...

前端小练————天猫国际登录页

前端小练————天猫国际登录页相关推荐

最新文章

热门文章