html+css模拟京东商城登陆首页

2024-07-08 09:53| 来源: 网络整理| 查看: 265

目录页面整体架构效果页面实现 css实现

最近学一下html+css，按照老师傅的指导，新手最好的方法不是去看书而是coding。于是大致翻阅了一些教程：

W3cschool html教程 W3cschool css教程慕课网 html+css教程

觉得入门了啊，怎么去验证下呢，做点东西吧，京东登陆页面搜出来：https://passport.jd.com/new/login.aspx 开始按这个模拟。

页面整体架构

目标：在这里插入图片描述先分析下页面架构，大三类：header、content、footer

header有啥？

logo，图片欢迎登陆，文字调查问卷链接，超链接

content有啥？

一个警告区域一张大图一个背景色的box，背景色跟图片一致一个背景色的box，背景色跟图片一致一个登陆框

footer有啥？

很多链接版权说明

登陆框是最复杂的：

警告区域登陆方式选择：扫码、账号登陆警告区域，隐藏的，账号错误时会显示账号框=icon+input框密码框=icon+input框忘记密码登陆按钮其他登陆方式：qq、微信登陆注册按钮

代码架构：

根目录子目录 index.html static文件夹 logo.png bg.jpg login.css 效果

在这里插入图片描述

页面实现

京东-欢迎登陆欢迎登录依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。京东不会以任何理由要求您转账汇款，谨防诈骗。扫码登录账户登录

【本文地址】

今日新闻