Web前端：淘宝的三个网站-登录页-主页-商品页

已于 2024-07-15 16:49:34 修改
阅读量709 收藏 30
点赞数 29
文章标签： 前端
于 2024-07-15 16:47:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fantasy543210/article/details/140442819
版权

淘宝登录页

源代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <style>

        *{

            margin: 0px;

        }

        /* div{

            border: 1px solid red;

        } */

        .A,.C{

            height: 100px;

        }

        .B{

            width: 600px;

            height: 500px;

            margin: auto;

            /* box-shadow: 10px 10px 10px rgb(233, 233, 243); */

            background-color: rgb(233, 233, 243);

            border-radius: 20px;

        }

        .B0{

            text-align: center;

            height: 15%;

        }

        .B1{

            text-align: center;

            height: 20%;

        }

        .B2{

            text-align: center;

            height:15%;

        }

        .B3{

            text-align: center;

            height:15%;

        }

        .B4{

            text-align: center;

            height:20%;

        }

        .B5{

            text-align: center;

            height:20%;

        }

        input{

            width: 300px;

            height: 40px;

            border-radius: 10px;

        }

        button{

            width: 300px;

            height: 40px;

        }

    </style>

</head>

<body>

    <form action="https://www.taobao.com">

    <div class="A"><img src="./淘宝.jpg" alt=""></div>

    <div class="B">

        <div class="B0"></div>

        <div class="B1"><h1>密码登录|短信登陆</h1></div>

        <div class="B2">

            <p><input type="text" name="username" id="username" value="" placeholder="账户名/邮箱/手机号"></p>

        </div>

        <div class="B3">

            <p><input type="password" name="password" id="password" value="" placeholder="请输入登录密码"></p>

        </div>

        <div class="B4">

            <p><button type="submit">登录</button></p>

        </div>

        <div class="B5">

            <span>免费注册</span>

            <span>忘记账户名</span>

            <span>忘记密码</span>

        </div>

    </div>

    <div class="C"></div>

    </form>

</body>

</html

代码截图

运行画面

淘宝主页

源代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>主页面</title>

    <style>

        .H{

            /* border: 1px solid red; */

            height: 100px;

        }

        .H1,H2{

            float: left;

        }

        .H2{

            /* text-align: center; */

            margin-top: 1%;

        }

        input{

            width: 700px;

            height: 40px;

        }

        button{

            width: 50px;

            height: 40px;

        }

       

        .box{

            margin-top: 5%;

            margin-left: 15%;

            display: grid;

            width: 1200px;

            height: 1500px;

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

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

            grid-gap: 10px;

        }

        .box > div{

            border: 1px solid red;

            width: 234px;

            height: 366px;

           

        }

    </style>

</head>

<body>

    <div class="H">

        <div class="H1"><img src="./淘宝网热卖.jpg" alt="" ></div>

        <div class="H2">

            <input type="text">

            <button type="submit">搜索</button></p>

        </div>

    </div>

    <div class="box">

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

        <div><img src="./华为手机.jpg" alt="" width="220px" height="356px" style="margin-left: 10px; margin-top: 10px;"></div>

    </div>

</body>

</html>

代码截图

运行画面

淘宝商品页

源代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>商品页</title>

    <style>

        *{

            margin: 0px;

            background-color: rgb(225, 230, 234);

        }

        div{

             border: 1px solid red;

        }

       

        .box{

            height: 100px;

            /* background-color: antiquewhite; */

        }

        .box1,.box2{

            text-align: center;

            height: 50px;

            float: left;

            margin-top: 20px

        }

        .box1{

            width: 10%;

        }

        .box2{

            width: 40%;

            margin-left: 300px;

        }

        input{

            height: 35px;

            width: 300px;

            margin-top: 5px;

            border-radius: 10px;

        }

        button{

            height: 35px;

            margin-top: 5px;

            border-radius: 10px;

            background-color: rgb(247, 127, 8);

        }

        .B1{

            height: 80px;

            /* background-color: aqua; */

            width: 1200px;

            margin-left: 280px;

            background-color: white;

        }

        .B2{

            background-color: white;

            height: 500px;

            /* background-color: aqua; */

            width: 1200px;

            margin-left: 280px;

        }

        .B11,.B12{

            background-color: white;

            text-align: center;

            height: 450px;

            float: left;

            margin-top: 20px

        }

        .B11{

            width: 38%;

            margin-left: 5px;

        }

        .B12{

            width: 58%;

            margin-left: 30px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="box1"><img src="https://img.alicdn.com/imgextra/i2/O1CN01a69z6z1hJklCkBqOU_!!6000000004257-2-tps-174-106.png" alt="" height="50px"></div>

        <div class="box2">

            <input type="text" placeholder="搜索宝贝">

            <button type="submit">搜索</button>

            <button type="submit">搜本店</button>

        </div>

    </div>

    <div class="B">

        <div class="B1"><img src="./店铺.jpg" alt="" height="78px" width="1190px"></div>

        <div class="B2">

            <div class="B11"><img src="./手机.jpg" alt="" height="470px" width="500px"></div>

            <div class="B12">

                <ul>

                    <li>现货速发/官网正品 华为50系列16+512GB新款旗舰5G曲面屏手机1亿像素学生游戏拍照官方专卖官网正品店直降x50</li>

                    <li>已售 800+</li>

                    <li><img src="./新品促销.jpg" alt=""></li>

                    <li>配 送： 多仓发货至 广州市 从化区

                        快递: 免运费 48小时内发货

                    </li>

                </ul>

                <p><button>立即购买</button>

                    <button>加入购物车</button>

                    <button>收藏</button>

                </p>

            <div>

        </div>

    </div>

</body>

</html>

代码截图

运行画面

Web前端小白，做得不好请见谅，有错误麻烦您指正，谢谢！

Fantasy丶夜雨笙歌
关注
Python从0到100（四十）：Web开发简介-从前端到后端（文末免费送书）
Hello大家好，我是Dream，如果帮得到你，那我深感荣幸！交流学习、商务合作：https://bbs.csdn.net/topics/614347534
07-15 5万+
AI短视频生成与剪辑实战108招 ： ChatGPT 剪映》通过12个专题内容、108个实用技巧、170多分钟的教学视频，讲解了AI短视频的生成与剪辑全流程，并随书附赠了108集同步教学视频、210多个素材效果、70多个书中案例关键词、5200多个绘画关键词等。具体内容按以下两条线展开。一是技能线：详细讲解了ChatGPT、文心一格、Midjourney的使用方法，以及3种AI短视频生成方法—文本生视频、图片生视频和视频生视频。
Web前端设计与开发课程设计：简易淘宝网页设计
m0_64198455的博客
12-25 5360
本项目使用HTML5、CSS、javascript、jQuery技术，实现了淘宝网站的简易网页设计。项目设计具体的功能有登录、注册、动画播放和基本的页面跳转等。
淘宝主页+女装会场+详情页（html+css+js）
天天的博客
01-08 8624
淘宝网是中国电商行业的领军企业，其前端网站技术一直处于国内领先水平。本博客旨在分享淘宝网前端在技术方面的积累与探索。内容涵盖前端开发、性能优化、移动端适配、架构设计等诸多方面，对于前端开发人员有着较高的技术参考价值。注：不含源码
淘宝前端设计
Gavin的专栏
05-12 794
http://ued.taobao.org/blog/
前端-淘宝静态界面
Bala_lala的博客
01-21 1504
前端学习——淘宝静态界面 使用html与css完成淘宝的静态界面书写。非常适合前端学习者入门练手。不仅可以学到很多工作上用得到的知识，还能养成许多适合前端工作的习惯。
如何轻松拿到淘宝前端 offer | 掘金技术征文
weixin_34151004的博客
10-09 349
前言 从某种角度来讲，这里的 “轻松” 并不轻松，因为没有一定的技术功底，面试依然很难，可是换个角度来想，你面的又不是 P7、P8、P9、P10、P11……如果你面的仅仅是一个工作在一线的普通工程师，不需要多年工作积累的人脉和管理经验，也不一定需要很强的业务能力，只要你在技术的某些方面有过人之处，你就有机会，这样想是不是轻松了很多呢？ 准备 如果你要面试一些大厂，(这里以个人经历的淘宝面试为例)，...
淘宝主页html代码,Web前端
weixin_42588877的博客
06-14 1000
课程主题HTML5基础、CSS3基础、切图、综合项目：小U课堂、HTML5进阶、 CSS3进阶、综合项目：小U商城、综合项目：响应式布局实战项目PC端项目：小U课堂静态页面布局、移动端项目：小U商城移动端项目、响应式项目：小U商城后台管理系统培养方向1.熟练使用前端开发IDE:vscode编辑器；2.掌握HTML5基础和HTML5进阶中的常用标签；3.掌握CSS基本语法和文字字体属性；4.掌握盒模...
网页设计-仿淘宝网站Web前端大作业报告书
04-20
本项目旨在通过模仿淘宝商城的设计与实现过程，帮助学习者深入理解电商网站的前端开发技术。通过实践，不仅能够掌握HTML、CSS和JavaScript的基本用法，还能学会如何构建一个功能完整且用户友好的电商网站。此外，...
网页设计-仿淘宝网站Web前端大作业源代码
最新发布
04-20
【网页设计-仿淘宝网站Web前端大作业源代码】是一个基于前端技术实现的项目，旨在模仿淘宝网的界面和功能。这个项目的核心是利用HTML、CSS和JavaScript这三种基础前端技术来构建一个交互式的网页应用。下面将详细...
淘宝jsp项目源代码和页面
12-25
很好很强大，下号就能用，源代码 和一些常用的框架和jsp页面
HTML5手机端淘宝手指滑动验证登录代码.zip
07-04
HTML5手机端淘宝手指滑动验证登录代码，向右滑动解锁。
淘宝网简单版html+css实现
06-25
完全的用html+css实现的简单版的淘宝网站，会持续更新，到时候会加上js
淘宝首页html模板
04-06
淘宝首页html模板淘宝首页html模板淘宝首页html模板淘宝首页html模板淘宝首页html模板
HTML项目淘宝网完整代码
01-08
给以资源以及关键代码参考！ 需要的人，请放心下载！
openbmc-web1：webui开发基础
master
12-05 7100
webui-vue软件包创建于2020年6月8日，软件包地址：https://github.com/openbmc/webui-vue。webui-vue软件包是基于vue开发的，VUE是一套用于构建用户界面的渐进式JavaScript框架，其开发者是阿里巴巴Weex团队技术顾问的尤雨溪。Vue早期开发的灵感来源AngularJS，但是与AngularJS以及其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，并且在AngularJS 中存在的许多问题，在 Vue 中已经得到解。
我在淘宝做前端的这三年 — 第一年
爱前端也爱恋爱
11-07 1370
转眼已经离职半年多了，早就想写一篇工作总结，但由于一直在准备英语考试，又需要处理结婚和房子装修，没想到一拖拖了半年。在淘宝做前端是我第一份签了劳动合同的工作，在这个人才济济的大公司里，接触了非常多的人和事物，也学到了非常多的东西、开阔了眼界。所以还是有必要做一个回顾和总结，一是自己备忘，二是或许对一些前端新人有所帮助，因为这篇文章会涉及到一些入职、职业规划、招聘、晋升、离职等方面的信息。 由于篇幅过长，三年总结将会分三篇发布： 第一篇（第一年）主要总结如何进入淘宝要用什么样的策略，如何站在老板视角看问题
淘宝网首页仿写(html+css+js）
热门推荐
weixin_46811890的博客
08-10 2万+
【代码】淘宝网首页仿写(html+css+js）
web前端淘宝页面设计
11-04
web前端淘宝页面设计是指在淘宝电商平台上，为用户提供良好的视觉效果和用户体验的页面设计。在设计淘宝页面时，需要考虑以下几个方面： 1. 页面布局：通过合理的布局，使页面看起来更加整洁和易于导航。通常，淘宝...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值