作业三关于淘宝仿写

">淘宝<img src="./微信图片_淘宝登录5.png" alt="" style="height: 30px;"> <img src="../0000004.png" alt="" height="20px">康宝娜精炼橄榄油喷雾食 <br>用健身喷油西班牙进口用于野餐</div>"><img src="../0000004.png" alt="" height="20px">北月湾留心酥

又来敲代码了

903人浏览 · 2024-06-24 19:33:05

又来敲代码了 · 2024-06-24 19:33:05 发布

作业三1（淘宝登录页面仿写）

<!DOCTYPE html>

<head>

<title>淘宝登录页面</title>

<style>

.box{

display: grid;

grid-template-columns: repeat(4,1fr);

grid-template-rows: repeat(5,1fr);

height: 400px;

width: 800px;

}

.box>div{

margin: 10px;

}

.box>div:nth-child(1){

background-color: rgba(0, 255, 255, 0);

}

.box>div:nth-child(2){

background-color: rgba(0, 255, 13, 0.016);

}

.box>div:nth-child(3){

grid-column: 3/5;

background-color: rgba(255, 0, 68, 0);

}

.box>div:nth-child(4){

background-color: rgba(55, 0, 255, 0.005);

grid-column: 1/3;

}

.box>div:nth-child(5){

background-color: rgba(0, 255, 13, 0);

grid-row: 2/5;

grid-column: 3/5;

display: flex;

justify-content: center;

align-items: center;

}

.box>div:nth-child(6){

background-color: rgba(255, 0, 38, 0);

grid-column: 1/3;

}

.box>div:nth-child(7){

background-color: rgba(0, 255, 13, 0);

grid-column: 1/3;

}

.box>div:nth-child(8){

grid-column: 1/3;

background-color: rgba(255, 119, 0, 0);

}

.box>div:nth-child(9){

background-color: rgba(255, 0, 30, 0);

grid-column: 3/5;

}

.box2{

width: 800px;

height: 50px;

border: 1px;

}

.box2>div{

float: left;

width: 390px;

height: 80px;

margin: 1px;

background-color: rgba(255, 127, 80, 0);

}

.img{

max-width: 100%;

max-height: 100%;

}

</style>

</head>

<body>

<div style="display: flex; justify-content: center; align-items: center; font-size: 30px ;">手机扫码安全登录</div>

<div style="display: flex; justify-content: center; align-items: center;font-size: 10px;"><img src="./微信图片_淘宝登录27.png" alt="" style="width: 30px; height: 30px;">支付宝登录|<img src="./微信图片_淘宝登录3.png" alt="" style="height: 30px; width:30px ;">钉钉登录</div>

</div>

<div style="display: flex; justify-content: center; align-items: center;font-size: 20px;">免费注册|忘记账号名|忘记密码</div>

<div style="display: flex; justify-content: center; align-items: center;font-size: 20px;">打开<img src="./微信图片_淘宝登录4.png" alt="" style="height: 30px; width: 30px;">淘宝<img src="./微信图片_淘宝登录5.png" alt="" style="height: 30px; height: 30px;">天猫  APP扫码</div>

</div>

</body>

</html>

结果展示

作业三2（淘宝商品页面仿写）

<!DOCTYPE html>

<head>

<style>

.box{

display: grid;

width: 1600px;

height: 800px;

grid-template-columns: repeat(6,1fr);

grid-template-rows: repeat(2,1fr);

}

/* .box>div:nth-child(1){ background-color: rgb(254, 250, 246);}

.box>div:nth-child(2){background-color: rgb(238, 250, 250);}

.box>div:nth-child(3){background-color: rgb(242, 249, 247);}

.box>div:nth-child(4){background-color: rgb(244, 244, 249);}

.box>div:nth-child(5){background-color: rgb(242, 246, 238);}

.box>div:nth-child(6){background-color: chocolate;}

.box>div:nth-child(7){background-color: coral;}

.box>div:nth-child(8){background-color: darkorange;}

.box>div:nth-child(9){background-color: crimson;}

.box>div:nth-child(10){background-color: darkred;}

.box>div:nth-child(11){background-color: fuchsia;}

.box>div:nth-child(12){background-color: darkred;} */

</style>

</head>

<body>

<div>

<div style="font-size: 20px;">大八头便签夹立式照片夹多用途<br>留言夹树形标签夹银色名片夹便</div>

</div>

<div>

<div style="font-size: 20px;"><img src="../0000004.png" alt="" height="20px">四洲即食板栗仁即食小包 <br>装甘粟仁年货送礼50克*10包燕 </div>

</div>

<div>

<div style="font-size: 20px;">欧式高档菜罩  可折叠拆细洗食物 <br>罩饭菜伞盖 打好防苍蝇餐桌罩</div>

</div>

<div>

<div style="font-size: 20px;">雀巢鹰唛炼奶350g家用蛋挞奶 <br>茶甜品沙拉炼乳甜点炼奶西米露原材料</div>

</div>

<div>

<div style="font-size: 20px;">生东食品丁桂陈皮甜咸甘草味浓 <br>回味好吃蜜饯孕妇零食250g</div>

</div>

<div>

<div style="font-size: 20px;">阿尔卑斯棒棒糖96支高级牛奶 <br>硬糖果连在一起六一儿童学生奖励零食</div>

</div>

<div>

<div style="font-size: 20px;"><img src="../0000004.png" alt="" height="20px">北月湾留心酥雪媚娘流心 <br>蛋黄酥办公室零食休闲糕点春节</div>

</div>

<div>

<div style="font-size: 20px;">飘窗垫窗台垫长毛绒阳台榻榻米 <br>卧室ins网红直播间装饰可裁剪</div>

</div>

<div>

<div style="font-size: 20px;">口乐心糖水桂花蜜果肉果酱1kg <br>商用红桂花蜜丹桂即食甜品饮品</div>

</div>

<div>

<div style="font-size: 20px;"> <img src="../0000004.png" alt="" height="20px">康宝娜精炼橄榄油喷雾食 <br>用健身喷油西班牙进口用于野餐</div>

</div>

<div>

<div style="font-size: 20px;">【4斤熟牛肉】河南特产明正酱 <br>牛肉熟食真空五香卤味小袋2斤</div>

</div>

<div>

<div style="font-size: 20px;"> <img src="../0000004.png" alt="" height="20px">小白熊婴儿奶瓶消毒器带 <br>烘干机五合一家用多功能蒸汽消</div>

</div>

</body>

</html>

结果展示

快递鸟一站式物流API解决方案

电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。

更多推荐

苹方字体跨平台解决方案：告别Windows与Mac的字体显示鸿沟

在Web开发中，我们经常面临一个令人头疼的问题：精心设计的页面在Mac上优雅精致，到了Windows设备上却因字体差异而显得平庸。今天，我们为您介绍一个专业的解决方案——PingFangSC字体包，它让苹方字体的优雅设计能够在所有平台上完美呈现。这个开源项目提供了完整的6种字重，支持ttf和woff2双格式，真正实现了跨平台字体统一。## 为什么跨平台字体一致性如此重要？🔍现代Web应用

快递鸟社区

Ascend-SACT/Mineru-Optimization后端引擎对比：Pipeline、Hybrid与VLM模式如何选择？

Ascend-SACT/Mineru-Optimization提供三种强大的后端引擎模式——Pipeline、Hybrid和VLM，帮助用户高效处理各类文档。本文将深入对比这三种模式的核心特性、性能表现和适用场景，助你快速找到最适合的解决方案。## 三大引擎模式核心特性解析 🚀### Pipeline模式：传统OCR流程的极致优化**核心架构**：采用模块化设计，包含版面分析、OCR、

快递鸟社区

如何永久保存微信聊天记录？WeChatMsg免费开源工具终极指南

你是否曾担心更换手机后，那些珍贵的微信对话会永远消失？与家人的温馨聊天、重要的工作沟通、朋友间的难忘回忆，这些数字记忆都值得被永久珍藏。**WeChatMsg**是一款完全免费的开源工具，专门用于**微信聊天记录永久保存和深度分析**，让你的每一段对话都能成为永恒的数字资产。## 🔍 你的聊天记录正在面临什么风险？微信已经成为我们日常生活中不可或缺的沟通工具，但官方并未提供完整的聊天记录