前端小练————天猫国际登录页
生活随笔
收集整理的這篇文章主要介紹了
前端小练————天猫国际登录页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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; }效果圖
?
總結
以上是生活随笔為你收集整理的前端小练————天猫国际登录页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 蚂蚁金服高级技术专家李福喜 ：蚂蚁开放平
- 下一篇： HTML5期末大作业：商城网站设计——仿