作业三关于淘宝仿写

最新推荐文章于 2024-07-19 18:46:52 发布
最新推荐文章于 2024-07-19 18:46:52 发布
阅读量662 收藏 13
点赞数 10
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81583196/article/details/139936055
版权

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <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 class="box" >

    <div style="display: flex; justify-content: center; align-items: center; font-size: 30px ; color: coral;">密码登录</div>

    <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: 30px ;">手机扫码安全登录</div>

   

    <div><input type="username" name="username" placeholder="账户名/邮箱/手机号" style="width: 371px; height: 53px;background-color: rgb(206, 216, 206);" ></div>

    <div><img src="./微信图片_淘宝登录页面1.png" alt="" style="width: 200px; height: 200px;"></div>

    <div><input type="password" name="password" placeholder="请输入登录密码" style="width: 371px; height: 53px;background-color: rgb(207, 197, 197);"></div>

    <div><button style="width: 379px; height: 59px; background-color: darkorange;">登录</button></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>

   

    </div>

    <div class="box2">

        <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;">天猫&nbsp;&nbsp;APP扫码</div>  

    </div>

</body>

</html>

结果展示

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>淘宝主页</title>

    <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 class="box">

<div>

    <div><img src="../微信图片_20240600001.png" alt=""  height="290px" "></div>

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

    <div style="color: orangered;">送运费险&nbsp;&nbsp;&nbsp;&nbsp;淘金币抵0.8元</div>

    <span style="color: orangered; font-size: 20px;">￥28.8</span><span>62人购买</span>

</div>


 

<div>

    <div><img src="../微信图片_202406000002.png" alt="" height="290px"></div>

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

    <div style="color: #ff6200;">送运费险&nbsp;&nbsp;淘金币抵1.7元</div>

    <span style="color:#ff6200 ; font-size: 20px;">￥57.9</span><span>100+人购买</span>

</div>


 

<div>

    <div><img src="../微信图片_20240600003.png" alt="" height="290px" ></div>

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

    <div>&nbsp;</div>

    <span style="color: #ff6200; font-size: 20px;">￥35.8</span><span>52人购买</span>

</div>

<div>

    <div><img src="../00002.png" alt=""  height="290px"></div>

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

    <div style="color: orangered;">送运费险</div>

    <span style="color: orangered; font-size: 20px;">￥26</span><span>100+人购买</span>

</div>

<div>

    <div><img src="../0003.png" alt=""  height="290px"></div>

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

    <div style="color: orangered;">送运费险&nbsp;&nbsp;&nbsp;&nbsp;淘金币抵1.0元</div>

    <span style="color: orangered; font-size: 20px;">￥34</span><span>82人购买</span>

</div>


 

<div>

    <div><img src="../0004.png" alt=""  height="290px"></div>

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

    <div >&nbsp;</div>

    <span style="color: orangered; font-size: 20px;">￥29.9</span><span>1000+人购买</span>

</div>


 

<div>

    <div><img src="../0005.png" alt=""  height="290px"></div>

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

    <div style="color: orangered;">送运费险</div>

    <span style="color: orangered; font-size: 20px;">￥29.9</span><span>800+人购买</span>

</div>


 

<div>

    <div><img src="../0006.png" alt=""  height="290px"></div>

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

    <div style="color: orangered;">送运费险</div>

    <span style="color: orangered; font-size: 20px;">￥22.7</span><span>100+人购买</span>

</div>


 

<div>

    <div><img src="../0007.png" alt=""  height="290px"></div>

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

    <div >;&nbsp;</div>

    <span style="color: orangered; font-size: 20px;">￥55</span><span>74人购买</span>

</div>


 

<div>

    <div><img src="../0008.png" alt=""  height="290px"></div>

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

    <div style="color: orangered;">送运费险</div>

    <span style="color: orangered; font-size: 20px;">￥76</span><span>200+人购买</span>

</div>


 

<div>

    <div><img src="../0009.png" alt=""  height="290px"></div>

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

    <div style="color: orangered;">送运费险&nbsp;&nbsp;&nbsp;&nbsp;淘金币抵1.6元</div>

    <span style="color: orangered; font-size: 20px;">￥53.9</span><span>700+人购买</span>

</div>


 

<div>

    <div><img src="../0010.png" alt=""  height="290px"></div>

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

    <div style="color: orangered;">送运费险</div>

    <span style="color: orangered; font-size: 20px;">￥359</span><span>61人购买</span>

</div>


 

    </div>

</body>

</html>

结果展示

2301_81583196
关注
  • 10
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html仿写简易淘宝购物页面
07-14
在本项目中，“html仿写简易淘宝购物页面”是一个基于HTML、CSS和Bootstrap技术的实践教程，旨在帮助初学者或开发者了解如何构建一个类似于淘宝网的简单购物平台的前端界面。我们将深入探讨这三个核心技术，以及它们...
淘宝网首页轮播图仿写
02-03
【淘宝网首页轮播图仿写】是一个典型的网页动态效果实现项目，主要目的是通过编程技术来复制淘宝网首页的轮播图功能。在这个项目中，我们将会探讨如何使用JQuery这一流行的JavaScript库来创建一个高效、流畅的轮播图...
第三次作业学校官网加淘宝仿写
wsmhjw的博客
06-20 178
2.1.1外部引入css。1.2学校官网个人界面。2.1淘宝商品展示页。
HTML,CSS仿写类淘宝三个页面（作业练习）
2301_80632538的博客
07-15 212
【代码】HTML,CSS仿写类淘宝三个页面（作业练习）
网页设计——仿淘宝网站Web前端大作业
tangxiaox的博客
07-25 420
自己写的参考写的代码。仅供学习使用无其他用途。
第三次作业
n_u_r07的博客
07-01 184
作业一：自学css盒子模型。作业二：仿做淘宝登录界面。作业三：仿做淘宝购物界面。作业四：仿做淘宝个人中心。
淘宝首屏仿写
06-07
在本项目中，我们将专注于“淘宝首屏仿写”，这是一个前端开发练习，旨在通过CSS、HTML和原生JavaScript技术来复刻淘宝网站首屏的视觉效果和交互功能。以下是对这个项目的详细阐述： 首先，我们需要了解淘宝首屏的...
html网页设计作业-土巴兔的仿写
12-29
在"html网页设计作业-土巴兔的仿写"这个主题中，我们将深入探讨HTML的基本概念、元素、属性以及如何通过模仿土巴兔网站的设计来学习和提升HTML技能。 1. HTML基本结构： HTML文档通常以`<!DOCTYPE html>`开头，...
html+css淘宝网站仿写.zip
05-08
个人仿写的淘宝网站首页，资源包含完整html+css代码和图片字体等资源，适合新手查看和仿写练习，涉及如何引用icon图标，relative和absolute定位以及精灵图等知识点，由于是自己仿写的，可能不够完美，所以有问题请...
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1334
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 591
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 738
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
拖拽上传（预览图片）
喵喵的博客
07-18 361
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
Html_Css问答集(11)
白话魔法师
07-16 848
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 759
介绍css和xpath，设置相对定位的基础使用
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 359
屏幕四周出现律动的红色边框，产生报警提示的效果。
如何利用 CSS 动画和过渡效果来增强用户交互体验？
xy520521的博客
07-16 171
动态交互效果：通过结合CSS动画和JavaScript，可以实现动态的交互效果。通过定义关键帧，在不同的时间点改变元素的样式，可以创建各种复杂的动画效果。过渡延迟与持续时间：通过调整CSS过渡的延迟和持续时间，可以实现不同的交互效果。延迟可以用来创建一定的悬停效果，持续时间可以用来控制过渡的速度。渐变过渡：使用CSS过渡属性，比如transition，来实现元素的平滑过渡效果。淡入淡出效果：使用CSS的opacity属性来实现元素的淡入淡出效果。可以通过改变元素的透明度来实现平滑的淡入淡出过渡效果。
编织文字的魔法：探索WebKit的CSS文本效果
最新发布
2401_85341950的博客
07-19 538
WebKit，作为众多浏览器的核心引擎，支持一系列CSS文本效果，使开发者能够创造出引人注目的文本样式。本文将深入探讨WebKit对CSS文本效果的支持，并提供详细的解释和代码示例。请注意，本文提供了一个关于WebKit CSS文本效果的概述，包括代码示例和关键概念的解释。通过本文的介绍，你应该对WebKit的CSS文本效果有了基本的了解。通过本文，我们希望能够帮助开发者更好地利用WebKit的CSS文本效果，创造出更加丰富和吸引人的Web页面。通过媒体查询，可以为不同屏幕尺寸的设备应用不同的文本效果。
用vue3 仿写淘宝页面
06-10
要使用Vue 3仿写淘宝页面，您需要掌握以下技能： 1. Vue 3的基础知识，包括组件、指令、响应式数据等。 2. HTML、CSS、JavaScript的基础知识，包括布局、样式、事件处理等。 3. 了解淘宝页面的设计和结构，包括主页、商品详情页、购物车页面等。 下面是一个简单的示例，展示了如何使用Vue 3仿写淘宝的主页： 1. 创建一个Vue组件来表示淘宝主页： ``` <template> <div class="container"> <header> <!-- 头部导航栏 --> </header> <section class="banner"> <!-- 轮播图 --> </section> <section class="recommend"> <!-- 推荐商品列表 --> </section> <section class="flash-sale"> <!-- 限时秒杀商品 --> </section> <section class="new-arrivals"> <!-- 新品上市商品 --> </section> <section class="hot-sales"> <!-- 热卖商品列表 --> </section> <footer> <!-- 底部导航栏 --> </footer> </div> </template> <script> export default { name: 'TaobaoHome' }; </script> <style> .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; } </style> ``` 2. 在您的Vue应用程序中，您可以使用这个组件来创建一个类似淘宝主页的页面。例如，您可以使用以下代码创建一个TaobaoHome组件： ``` <template> <div> <taobao-home></taobao-home> </div> </template> <script> import TaobaoHome from './TaobaoHome.vue'; export default { components: { TaobaoHome } }; </script> ``` 3. 创建各个子组件，如头部导航栏、轮播图、推荐商品列表等，然后将它们添加到TaobaoHome组件中。 4. 使用Vue 3提供的响应式数据和事件处理机制，实现动态更新和交互效果。 总之，使用Vue 3仿写淘宝页面需要一定的前端开发经验和技能，需要您花费一定的时间和精力来学习和实践。但是，如果您能够掌握这些技能，您将能够创建出美观、交互丰富的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值