1. 完整的HTML结构
  2. 内嵌的CSS样式，实现了钉钉经典的深蓝色背景、卡片式登录框、Logo、输入框和按钮等核心视觉元素。
  3. 基础的JavaScript交互,用于实现输入框的焦点效果和简单的表单提交提示。

你可以直接复制以下所有代码，保存为一个 .html 文件（dingtalk-login.html）,然后用浏览器打开即可看到效果。

钉钉首页登录网页html代码模仿
（图片来源网络，侵删）

仿钉钉登录页面HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">钉钉 - 专为创造协同价值而生</title>
    <style>
        /* --- 全局样式重置和基础设置 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-color: #f7f8fa;
            color: #333;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f0f2f5"/><path d="M0 0 L50 50 L100 0" fill="%23e6e8eb"/></svg>');
            background-size: 200px 200px;
        }
        /* --- 登录容器 --- */
        .login-container {
            width: 100%;
            max-width: 400px;
            padding: 0 20px;
        }
        /* --- 登录卡片 --- */
        .login-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 40px 30px;
            text-align: center;
        }
        /* --- Logo 和标题 --- */
        .logo {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
            background-color: #1890ff; /* 钉钉蓝 */
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            color: white;
            line-height: 1.2;
        }
        .logo-text {
            font-size: 48px;
            font-weight: 700;
        }
        .slogan {
            font-size: 18px;
            color: #666;
            margin-bottom: 30px;
        }
        /* --- 表单元素 --- */
        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #333;
            font-weight: 500;
        }
        .input-wrapper {
            position: relative;
        }
        .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #a0a0a0;
        }
        .form-control {
            width: 100%;
            padding: 12px 12px 12px 40px;
            height: 44px;
            font-size: 16px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            outline: none;
            transition: all 0.3s;
        }
        .form-control:focus {
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        /* --- 登录按钮 --- */
        .login-btn {
            width: 100%;
            height: 44px;
            background-color: #1890ff; /* 钉钉蓝 */
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }
        .login-btn:hover {
            background-color: #40a9ff;
        }
        .login-btn:active {
            background-color: #096dd9;
        }
        /* --- 其他登录方式 --- */
        .other-login {
            margin-top: 30px;
            text-align: center;
        }
        .divider {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: #a0a0a0;
            font-size: 14px;
        }
        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e8e8e8;
        }
        .divider span {
            padding: 0 12px;
        }
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            color: #333;
        }
        .social-icon:hover {
            background-color: #e8e8e8;
        }
        /* --- 页脚 --- */
        .footer {
            margin-top: 30px;
            text-align: center;
            font-size: 12px;
            color: #a0a0a0;
        }
        .footer a {
            color: #1890ff;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
        /* --- 响应式设计 --- */
        @media (max-width: 480px) {
            .login-card {
                padding: 30px 20px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-card">
            <!-- Logo 和 Slogan -->
            <div class="logo">
                <span class="logo-text">钉钉</span>
            </div>
            <p class="slogan">钉一下，更高效</p>
            <!-- 登录表单 -->
            <form id="loginForm" onsubmit="handleLogin(event)">
                <div class="form-group">
                    <label for="username">手机号 / 钉钉号 / 邮箱</label>
                    <div class="input-wrapper">
                        <span class="input-icon">👤</span>
                        <input type="text" id="username" class="form-control" placeholder="请输入您的账号" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <div class="input-wrapper">
                        <span class="input-icon">🔒</span>
                        <input type="password" id="password" class="form-control" placeholder="请输入您的密码" required>
                    </div>
                </div>
                <button type="submit" class="login-btn">登 录</button>
            </form>
            <!-- 其他登录方式 -->
            <div class="other-login">
                <div class="divider">
                    <span>其他登录方式</span>
                </div>
                <div class="social-icons">
                    <a href="#" class="social-icon">📱</a>
                    <a href="#" class="social-icon">🔐</a>
                    <a href="#" class="social-icon">👤</a>
                </div>
            </div>
            <!-- 页脚链接 -->
            <div class="footer">
                <a href="#">登录遇到问题？</a> ·
                <a href="#">企业注册</a> ·
                <a href="#">钉钉客服</a>
            </div>
        </div>
    </div>
    <script>
        // 简单的登录处理函数
        function handleLogin(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            // 这里只是模拟登录，实际项目中需要发送请求到后端
            if (username && password) {
                alert(`登录成功！欢迎您，${username}`);
                // 在实际应用中，这里会跳转到主页
                // window.location.href = '/dashboard';
            } else {
                alert('请输入账号和密码！');
            }
        }
        // 为输入框添加焦点效果，使其图标颜色变化
        document.querySelectorAll('.form-control').forEach(input => {
            input.addEventListener('focus', function() {
                this.previousElementSibling.style.color = '#1890ff'; // 聚焦时图标变蓝
            });
            input.addEventListener('blur', function() {
                this.previousElementSibling.style.color = '#a0a0a0'; // 失焦时图标恢复灰色
            });
        });
    </script>
</body>
</html>

代码解析

HTML 结构

  • <body>: 整个页面的根容器，我们使用 flex 布局让内容在屏幕中居中。
  • .login-container: 一个包裹整个登录模块的容器，用于设置最大宽度，并在小屏幕上添加内边距,保证不会太贴近边缘。
  • .login-card: 这是核心的白色卡片，包含了所有登录相关的元素，它有圆角和阴影,使其从背景中凸显出来。
  • .logo: 使用一个蓝色背景的 div 来模拟钉钉的Logo，并用CSS将“钉钉”二字居中显示。
  • <form>: 登录表单，包含了两个输入框（用户名/密码）和一个提交按钮。onsubmit 事件绑定了一个JavaScript函数 handleLogin。
  • .form-group: 每个输入框的包裹容器,方便对标签和输入框进行统一的样式管理。
  • .input-wrapper: 一个相对定位的容器，用于放置图标和输入框,实现图标在输入框内部的效果。
  • .other-login: “其他登录方式”部分，包含了一个分割线和几个社交登录的图标（这里用emoji代替）。
  • .footer: 页脚,放置了一些辅助链接。

CSS 样式

  • body: 设置了背景色、字体、以及一个简单的SVG图案作为背景,模仿钉钉的质感。
  • .login-card: box-shadow 属性是创建卡片阴影效果的关键。
  • .form-control: 这是输入框的核心样式。border, border-radius, padding 等定义了它的外观。focus 伪类用于定义输入框获得焦点时的样式（边框变蓝，有蓝色光晕）,这是提升用户体验的重要细节。
  • .login-btn: 按钮样式，背景色使用了钉钉的品牌蓝色 #1890ff。hover 和 active 伪类分别定义了鼠标悬停和点击时的颜色变化,提供视觉反馈。
  • .social-icon: 社交图标的样式，圆形背景,鼠标悬停时变灰。

JavaScript 交互

  • handleLogin(event): 这个函数在点击“登录”按钮时触发。
    • event.preventDefault(): 阻止了表单默认的页面刷新行为。
    • 获取用户名和密码的值。
    • 使用 alert() 弹出一个提示框来模拟登录成功或失败，在实际项目中，这里会使用 fetch 或 axios 等工具将数据发送到服务器进行验证。
  • 输入框焦点事件: 为所有输入框添加了 focus 和 blur 事件监听器，当输入框获得焦点时，其前面的图标会变成蓝色；失去焦点时，图标恢复灰色,这是一个非常贴心的细节。

这个版本已经非常接近钉钉登录页面的外观和基本交互了,你可以基于此进行进一步的修改和扩展。

钉钉首页登录网页html代码模仿
（图片来源网络，侵删）