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

最新推荐文章于 2024-04-12 08:31:08 发布

西城月老

最新推荐文章于 2024-04-12 08:31:08 发布

阅读量1.6w

点赞数 19

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html css 京东京东商城登陆

本文链接：https://blog.youkuaiyun.com/basicworld/article/details/82887570

本文通过html和css技术，详细介绍了如何模仿京东商城的登录首页。首先分析了页面的整体架构，包括header、content和footer的组成。接着展示了页面实现的各个部分，如警告区域、大图、登陆框等，并对登陆框的复杂元素进行了分解。最后，提到了代码的实现和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面整体架构

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

header有啥？

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

content有啥？

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

footer有啥？

很多链接
版权说明

登陆框是最复杂的：

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

代码架构：

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

效果

在这里插入图片描述

页面实现

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="static/login.css">
<title>京东-欢迎登陆</title>
</head>
<body>
<!-- header -->
<div class="w">
    <div class="header">
        <div id="logo"><img src="static/logo.png">
            <span>欢迎登录</span>
        </div>

    </div>
</div>

<!-- content -->
<div class="warning-wrap">
    <div class="warning">
        <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
    </div>
</div>

<div class="login-wrap">
    <div class="w">
        <div class="content">
            <div class="login-form">
                <!-- warning start -->
                <div class="warning-wrap">
                    <div class="warning"> <p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p> </div>
                </div>
                <!-- warning stop -->
                <div class="login-box h50">
                    <div class="fl login-way"> 扫码登录 </div>
                    <div class="fr login-way color-r"> 账户登录 </div>
                </div>

                <!-- form -->
                <form>
                <div class=