1. 先搞清楚这个登录页到底要复刻什么Instagram 登录页是前端练手最经典的页面之一左边一台手机样机展示 App 界面右边一张白色卡片放 logo、两个输入框、登录按钮、分隔线、Facebook 登录入口和注册引导底部再压一排页脚链接。结构不复杂但细节密度高特别适合拿来练 Flex 布局、伪元素画分隔线、媒体查询做响应式。这篇要交付的不是「讲原理」而是你复制粘贴就能跑起来的一整套东西一份完整的 HTML 结构、一份带 CSS 变量的样式表、一份config.toml和一份settings.json骨架最后用本地静态服务器打开验证再顺手检查 900px 和 450px 两个断点。适合刚学完 HTMLCSS、想找一个真实页面练手的前端学习者也适合需要快速搭一个登录页壳子的同学。我试过直接双击index.html打开样式能出来但一旦你后面要接接口、要跑本地服务双击就不够用了。所以这篇会带你走「本地静态服务器 配置文件」的完整链路顺便把 TaoToken 的配置骨架也一起搭好方便你后面接模型对话或者做页面文案生成。核心检索词先摆出来HTML 复刻 Instagram 登录页、CSS 登录页面、Instagram 登录页源码、登录页响应式布局、config.toml 配置、settings.json 骨架。下面按「问题场景 → 前置准备 → 可复制配置 → 验证 → 排障 → 收尾」的顺序走。2. 动手前先把 TaoToken 这条链路准备好复刻页面本身不需要联网但你在做这类练手项目时经常会遇到两个需求一是想用模型帮你生成或改写页面文案、占位内容二是想把页面接进一个本地小工具里做自动化截图或校验。这时候有一个稳定的 API 入口会省很多事。TaoToken 在这里扮演的角色就是「统一的模型调用入口」。你注册后在控制台拿到 API Key就能用同一套地址去调不同模型不用为每个模型单独记一套域名和鉴权方式。对前端练手来说最直接的用法是页面写完了用模型对话帮你检查 HTML 语义、生成更贴近真实的占位文案或者把一段 CSS 解释清楚。具体要准备的东西不多先去官网注册账号地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册完进控制台。控制台里创建 API Key入口在 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content Key 生成后只显示一次记得先复制存好。API 的基础地址是 https://taotoken.net/api 注意这个地址不带任何查询参数配置里直接写它就行。如果你只是想验证模型能不能通用模型对话页面最快https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 在里面发一句话看有没有正常回复。如果你打算长期用模型辅助写代码、跑 Agent 流程那更适合看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 它面向的是持续编码场景不是一次性问答。接入细节和参数说明都在文档里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 遇到字段不确定就翻这里。Key 管理页面单独记一下https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 后面轮换或删除 Key 都在这。如果你用的是 Claude Code 这类工具对应的接入说明在https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 按文档填地址和 Key 即可。注意API Key 属于敏感信息不要写进前端页面里也不要提交到公开仓库。练手项目里建议放在本地配置文件并且把配置文件加进.gitignore。3. 可复制的页面结构、样式变量与配置文件这一节是全文最重的部分直接给可复制的代码。先建目录结构建议这样instagram-login/ ├── index.html ├── css/ │ └── style.css ├── config.toml ├── settings.json └── .gitignore3.1 index.html 完整结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleInstagram 登录页复刻/title meta namedescription contentHTMLCSS 复刻 Instagram 登录页 link relstylesheet hrefcss/style.css link hrefhttps://fonts.googleapis.com/css2?familyPoppins:wght300;400;500;600;700displayswap relstylesheet /head body div idwrapper div classcontainer main-container div classphone-app-demo aria-hiddentrue/div div classform-data form action# methodpost novalidate div classlogo h1Instagram./h1 /div label classsr-only forusername手机号、用户名或邮箱/label input idusername nameusername typetext placeholder手机号、用户名或邮箱 autocompleteusername label classsr-only forpassword密码/label input idpassword namepassword typepassword placeholder密码 autocompletecurrent-password button classform-btn typesubmit登录/button span classhas-separator或/span a href# classfacebook-login i classfab fa-facebook aria-hiddentrue/i 使用 Facebook 登录 /a a classpassword-reset href#忘记密码/a /form div classsign-up 还没有账号a href#注册/a /div div classget-the-app span下载 App/span div classbadge img srchttps://www.instagram.com/static/images/appstore-install-badges/badge_android_english-en.png/e9cd846dc748.png altAndroid 应用 img srchttps://www.instagram.com/static/images/appstore-install-badges/badge_ios_english-en.png/180ae7a0bcf7.png altiOS 应用 /div /div /div /div footer div classcontainer footer-container nav classfooter-nav aria-label页脚导航 ul lia href#关于我们/a/li lia href#支持/a/li lia href#招聘/a/li lia href#隐私/a/li lia href#条款/a/li lia href#语言/a/li /ul /nav div classcopyright-notice© 2024 页面复刻练习/div /div /footer /div /body /html这里比原始版本多了几个东西label配sr-only做无障碍autocomplete让浏览器能正确识别输入框aria-hidden处理纯装饰元素。这些不影响视觉但页面质量会高一档。3.2 style.css 带 CSS 变量:root { --bg-body: #fafafa; --bg-card: #ffffff; --border-color: #eeeeee; --text-main: #262626; --text-muted: #999999; --link-blue: #003569; --btn-blue: #3897f0; --fb-blue: #385185; --radius: 0.4rem; --font-base: Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 10px; } body { background-color: var(--bg-body); font-family: var(--font-base); color: var(--text-main); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #wrapper { width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding-top: 2rem; } .container { width: 100%; max-width: 93.5rem; margin: 0 auto; } .main-container { display: flex; padding: 0 8rem; margin-top: 3rem; } .phone-app-demo { flex: 1; height: 61.8rem; background: url(https://uditsolutions.in/babamachine/wp-content/uploads/2019/08/phone.png) center / contain no-repeat; } .form-data { width: 100%; max-width: 35rem; margin-top: 3rem; } .form-data form { background-color: var(--bg-card); border: 2px solid var(--border-color); display: flex; flex-direction: column; padding: 2rem 4rem; text-align: center; } .logo h1 { font-family: Pacifico, cursive; font-size: 4rem; margin-bottom: 2.5rem; } .form-data form input { padding: 0.8rem; margin-bottom: 0.5rem; border: 2px solid var(--border-color); border-radius: var(--radius); font-size: 1.4rem; background-color: var(--bg-body); } .form-data form input:focus { outline: none; border-color: var(--text-muted); } .form-btn { margin: 1rem 0 1.5rem; height: 3rem; background-color: var(--btn-blue); font-size: 1.4rem; color: #fff; font-weight: 700; border: none; border-radius: var(--radius); cursor: pointer; } .form-btn:hover { background-color: #2f86dd; } .has-separator { font-size: 1.3rem; color: var(--text-muted); text-transform: uppercase; position: relative; margin-bottom: 2.5rem; } .has-separator::before, .has-separator::after { content: ; position: absolute; background-color: var(--border-color); width: 40%; height: 1.5px; top: 50%; transform: translateY(-50%); } .has-separator::before { left: 0; } .has-separator::after { right: 0; } .facebook-login { font-size: 1.4rem; font-weight: 700; color: var(--fb-blue); margin-bottom: 2.5rem; } .password-reset { font-size: 1.2rem; color: var(--link-blue); } .sign-up { text-align: center; font-size: 1.4rem; color: var(--text-main); padding: 2rem 0; background-color: var(--bg-card); border: 2px solid var(--border-color); margin: 1rem 0; } .sign-up a { color: var(--btn-blue); font-weight: 700; } .get-the-app { font-size: 1.4rem; text-align: center; } .get-the-app span { display: block; margin: 2rem 0; color: var(--text-main); } .badge { display: flex; justify-content: center; gap: 1rem; } .badge img { max-width: 14rem; cursor: pointer; } footer { padding: 5rem 0; } .footer-container { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; padding: 0 2rem; } .footer-nav ul { display: flex; flex-wrap: wrap; list-style: none; gap: 1.6rem; } .footer-nav ul li a { color: var(--link-blue); } .copyright-notice { color: var(--text-muted); } media (max-width: 900px) { .phone-app-demo { display: none; } .form-data { margin: 0 auto; } .main-container { padding: 0; } .footer-container { justify-content: center; } .footer-nav ul { justify-content: center; } } media (max-width: 450px) { #wrapper { padding-top: 0; } .form-data form { background-color: transparent; border: none; padding: 0 2rem; } .sign-up { background-color: transparent; border: none; margin: 4rem 0; } footer { padding-bottom: 2rem; } }注意Pacifico字体我在 HTML 里没引如果你要 logo 用这个手写体在head里补一行 Google Fonts 的Pacifico就行或者直接用系统字体也够看。3.3 config.toml 骨架这个文件用来放本地工具或脚本的配置比如你后面想用脚本调模型检查页面# config.toml [app] name instagram-login-clone version 0.1.0 port 5500 [api] base_url https://taotoken.net/api api_key sk-替换成你自己的Key model gpt-4o-mini timeout 30 [build] input_dir . output_dir dist minify falsebase_url固定写https://taotoken.net/api不要加斜杠后缀。api_key从控制台拿本地测试用别提交。3.4 settings.json 骨架如果你用的是 VS Code 或者某个前端工具settings.json可以这样写{ liveServer.settings.port: 5500, liveServer.settings.root: /, files.associations: { *.toml: toml }, editor.formatOnSave: true, editor.tabSize: 2, html.format.wrapLineLength: 120, css.lint.unknownAtRules: ignore }liveServer.settings.port和config.toml里的port保持一致避免端口冲突。3.5 .gitignorenode_modules/ dist/ config.toml settings.json .env把带 Key 的文件都挡在仓库外面。4. 本地打开验证与响应式检查代码写完了别急着双击index.html。用本地静态服务器打开路径和相对引用才和真实部署一致。如果你装了 Node最省事的是npx serve . -l 5500或者用 Pythonpython3 -m http.server 5500然后浏览器访问http://localhost:5500。你应该看到左边手机样机图右边白色登录卡片底部页脚链接。如果手机图没出来多半是那张外链图挂了换成你自己的本地图片即可。响应式检查用浏览器开发者工具的设备模拟把宽度拖到 900px 以下手机样机应该消失登录卡片居中页脚链接居中排列。再拖到 450px 以下登录卡片的白色背景和边框应该去掉变成透明背景注册引导区域也去掉边框。如果你要验证 TaoToken 这条链路通不通用模型对话页面发一句「帮我把这段 HTML 的语义问题列出来」看有没有正常返回。返回正常说明 Key 和地址都对。想验证具体模型就在模型对话里切换不同模型各发一句对比响应速度。5. 本篇常见错排查手机样机图不显示外链图片有防盗链或已失效。打开控制台 Network 面板看那张图的请求状态403 或 404 就换成本地图片放到assets/目录下CSS 里改成url(../assets/phone.png)。分隔线「或」两边横线位置不对.has-separator的::before和::after用了position: absolute父元素必须有position: relative。检查这一条漏了就横线会跑到页面左上角。输入框聚焦时边框跳动默认outline和自定义border叠加会撑开尺寸。我在样式里加了outline: none并改border-color如果你自己改过确认这两条还在。450px 断点没生效媒体查询顺序要从大到小写900px 在前450px 在后。顺序反了会被覆盖。config.toml 里的 Key 报 401先确认 Key 有没有多余空格再确认base_url是不是https://taotoken.net/api不要写成带/v1或其他后缀的地址。还不行就去 API Keys 页面重新生成一个。settings.json 端口冲突liveServer.settings.port和config.toml的port改成不一样的值或者把占用端口的进程关掉。页面在手机上横向滚动多半是某个元素宽度超出视口。给body加overflow-x: hidden只是遮丑正确做法是检查.badge img的max-width和footer的padding把固定宽度改成百分比或max-width。6. 接下来怎么用这套骨架页面跑起来之后你可以做三件事让它更有用。第一把config.toml里的api_key换成你自己的写个小脚本调模型批量生成不同风格的占位文案替换页面里的中文提示。第二把settings.json里的端口固定下来配合 Live Server 做实时预览改 CSS 立刻看到效果。第三如果你要长期做这类页面练手直接上 Coding Plan 把模型接进你的编码流程比每次手动复制粘贴省事。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content Key 管理在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 模型对话验证在 https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。页面本身不依赖这些也能跑但配上之后你练手的速度会快不少。