伪淘宝页面

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量115 收藏
点赞数 3
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81843037/article/details/140701881
版权 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

         body{

            background-color: rgb(237, 234, 229);

         }

        .login{

            width: 500px;

            height: 300px;

            border: 1px solid rosybrown;

            margin: auto;

            margin-top: 200px;

            background-color: antiquewhite;

            line-height: 4;

            text-align: center;

            border-radius: 25%;

            box-shadow: 10px 10px 10px gray;

        }

       

        .b{

            margin: 10px;

        }

        button,input{

            background-color: antiquewhite;

            border: 1px solid royalblue;

            border-radius: 25%;

        }

        input{

            border-radius: 20%;

        }

        span{

            font-size: 20px;

            color:rgb(218, 106, 32);

            text-shadow: 10px 10px 10px rgb(255, 115, 0);

        }

    </style>

</head>

<body>

    <div class=""></div>

     <div class="box"></div>

    <div class="login">

        <span class="font-sign">淘宝 </span>

        <form action="">

            用户名：<input type="text" placeholder="username"><br>

            密码：<input type="password" placeholder="password"><br>

           

        </form>

        <a href="./案例1-仿淘宝商品页面.html"> <button type="submit" class="b">sign in </button>

        </a>

    </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>

    <!--

        理解整个页面结构

            1.div-box

            2.ul-prods

            3.li-prod

                a-prod-href

                    img-prod-img

                    div-prod-introduce

                    div-prod-price

                    div-prod-boss

                    div-prod-sale

    -->  

           

       <style>

        .box{

            width: 100%;

            /* height: 1000px; */

            /* border: 1px solid #F3F6F8; */

            /* margin: auto; */

        }

        .prod{

            width: 300px;

            height: 500px;

            border: 1px solid #F3F6F8;

            /* border-right: 1px solid #F3F6F8;

            border-bottom: 1px solid #F3F6F8; */

            list-style: none;

            display: inline-block;

            line-height: 1.7;

            margin-left: -5px;

        }

        .prod-href{

            text-decoration: none;

        }

        .prod:hover{

            border-color: red;

        }

        .prod-img{

            text-align: center;

        }

        .prod-introduce-span1{

            font-size: 17px;

            color: black;

        }

        .prod-introduce-span2{

            font-size: 16dpx;

            color: rgba(242, 97, 13, 0.925);

        }

        .prod-price{

            font-size: 22px;

            color: red;

        }

        .prod-boss{

            font-size: 14px;

            color: rgb(122, 121, 121);

        }

        .prod-sale{

            font-size: 14px;

            color:  rgb(122, 121, 121);

            border-top: 1px solid #F3F6F8;

            text-align: right;

            padding-top: 10px;

        }

        .prod-text-box{

            width: 280px;

            height: 480px;

            /* border: 1px solid blue; */

            margin: auto;

            margin-top: 10px;

        }

       </style>

</head>

<body>

    <div class="box">

        <ul class="prods">

            <li class="prod">

                <a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">

                   

                   <div class="prod-text-box">

                    <div class="prod-img">

                    <img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">

                </div>

                <div class="prod-introduce">

                    <span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

                    <span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>

                </div>

                <div class="prod-price"><b>￥22.9</b></div>

                <div class="prod-boss">瓷碗批发商</div>

                <div class="prod-sale">月销1000+</div>

                   </div>

             

                </a>

            </li>

            <li class="prod">

                <a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">

                   

                   <div class="prod-text-box">

                    <div class="prod-img">

                    <img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">

                </div>

                <div class="prod-introduce">

                    <span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

                    <span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>

                </div>

                <div class="prod-price"><b>￥22.9</b></div>

                <div class="prod-boss">瓷碗批发商</div>

                <div class="prod-sale">月销1000+</div>

                   </div>

             

                </a>

            </li>

            <li class="prod">

                <a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">

                   

                   <div class="prod-text-box">

                    <div class="prod-img">

                    <img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">

                </div>

                <div class="prod-introduce">

                    <span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

                    <span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>

                </div>

                <div class="prod-price"><b>￥22.9</b></div>

                <div class="prod-boss">瓷碗批发商</div>

                <div class="prod-sale">月销1000+</div>

                   </div>

             

                </a>

            </li>

            <li class="prod">

                <a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">

                   

                   <div class="prod-text-box">

                    <div class="prod-img">

                    <img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">

                </div>

                <div class="prod-introduce">

                    <span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

                    <span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>

                </div>

                <div class="prod-price"><b>￥22.9</b></div>

                <div class="prod-boss">瓷碗批发商</div>

                <div class="prod-sale">月销1000+</div>

                   </div>

             

                </a>

            </li>

            <li class="prod">

                <a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">

                   

                   <div class="prod-text-box">

                    <div class="prod-img">

                    <img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">

                </div>

                <div class="prod-introduce">

                    <span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

                    <span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>

                </div>

                <div class="prod-price"><b>￥22.9</b></div>

                <div class="prod-boss">瓷碗批发商</div>

                <div class="prod-sale">月销1000+</div>

                   </div>

             

                </a>

            </li>

            <li class="prod">

                <a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">

                   

                   <div class="prod-text-box">

                    <div class="prod-img">

                    <img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">

                </div>

                <div class="prod-introduce">

                    <span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

                    <span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>

                </div>

                <div class="prod-price"><b>￥22.9</b></div>

                <div class="prod-boss">瓷碗批发商</div>

                <div class="prod-sale">月销1000+</div>

                   </div>

             

                </a>

            </li>

            <li class="prod">

                <a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">

                   

                   <div class="prod-text-box">

                    <div class="prod-img">

                    <img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">

                </div>

                <div class="prod-introduce">

                    <span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

                    <span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>

                </div>

                <div class="prod-price"><b>￥22.9</b></div>

                <div class="prod-boss">瓷碗批发商</div>

                <div class="prod-sale">月销1000+</div>

                   </div>

             

                </a>

            </li>

            <li class="prod">

                <a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">

                   

                   <div class="prod-text-box">

                    <div class="prod-img">

                    <img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">

                </div>

                <div class="prod-introduce">

                    <span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

                    <span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>

                </div>

                <div class="prod-price"><b>￥22.9</b></div>

                <div class="prod-boss">瓷碗批发商</div>

                <div class="prod-sale">月销1000+</div>

                   </div>

             

                </a>

            </li>

            <li class="prod">

                <a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">

                   

                   <div class="prod-text-box">

                    <div class="prod-img">

                    <img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">

                </div>

                <div class="prod-introduce">

                    <span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

                    <span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>

                </div>

                <div class="prod-price"><b>￥22.9</b></div>

                <div class="prod-boss">瓷碗批发商</div>

                <div class="prod-sale">月销1000+</div>

                   </div>

             

                </a>

            </li>

        </ul>

    </div>

</body>

</html>

2301_81843037
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 伪淘宝代码实现
03-07
"Android 伪淘宝代码实现"项目旨在提供一个基础框架，帮助开发者理解如何构建一个功能丰富的移动购物应用。虽然这个实现可能没有完全实现淘宝的所有功能，如结算功能，但它依然包含了诸多Android开发中的重要知识点...
仿淘宝页面
Z533121237的博客
07-12 449
纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br><span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭
html+css简单仿制淘宝商品界面
树下一少年的博客
02-08 5253
html+css简单仿制淘宝商品界面 一.主要思路 二.完整代码 三.最终效果
html+css仿静态淘宝页面
11-02
在仿制淘宝页面时，会用到如`<html>`、`<head>`、`<body>`、`<header>`、`<nav>`、`<section>`、`<article>`等基本结构标签。 - **链接与图像**：`<a>`标签用于创建链接，`<img>`标签用于插入图片，这两者在模拟...
伪静态的淘宝客程序 易于收录
03-13
我仔细研究了上面的这个流程，他是利用js程序获取网页关键词并将各参数传递给asp淘宝商品生成程序，然后再将生成的结果返还给js，这样就完成了一次调用。这样就解决了淘宝API程序的缺陷和弊端。注意，数据库要没点...
仿照淘宝购物车前端页面设计
05-21
本项目“仿照淘宝购物车前端页面设计”旨在训练开发者如何创建一个类似淘宝购物车的功能性页面，提供用户友好的体验。下面将详细讨论这个项目中涉及的关键知识点。 1. HTML 结构设计： - 商品列表：使用`<ul>`或`...
jquery+CSS3实现淘宝移动网页菜单效果
10-23
【jQuery + CSS3 实现淘宝移动网页菜单效果详解】 在当今的互联网环境中，移动设备的使用日益普及，因此，为移动设备设计响应式且用户体验良好的网页菜单至关重要。本篇文章将详细解析如何使用jQuery和CSS3技术来...
nodejs安装
a1241436267的博客
08-19 316
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
2024前端面试题-js篇
FormAda的博客
08-22 391
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 168
npm。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 540
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
galaxyJING的博客
08-21 258
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 890
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 1001
react详细自我学习笔记，内容包括JSX、Redux、Router等
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 756
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 190
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 220
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
????鱼干～
08-22 515
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
vue3 @antv/x6 使用画布滚动条以后的几个问题的解决
jwbabc的专栏
08-20 260
通过设置@antv/x6的插件scroller的options，来达到基本上满足项目的原型要求。
css模拟实现淘宝商品页面列表展示
05-22
实现淘宝商品页面列表展示可以使用CSS的Flexbox布局来实现。 首先，我们需要一个商品列表容器，可以使用一个div元素来作为容器，设置宽度和高度，以及设置display:flex，使其成为flex容器。 ```html <div class="goods-list"> <!-- 商品列表项 --> <div class="goods-item"></div> <div class="goods-item"></div> <div class="goods-item"></div> <div class="goods-item"></div> <div class="goods-item"></div> </div> ``` ```css .goods-list { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto; } .goods-item { width: 30%; height: 300px; margin-bottom: 20px; background-color: #f5f5f5; } ``` 上面的代码中，我们使用了flex-wrap属性将商品列表容器中的商品项进行自动换行。使用justify-content属性设置商品项之间的间距，这里我们使用space-between，表示在每个商品项之间平均分配空间。设置每个商品项的宽度为30%，高度为300px，并且设置margin-bottom属性为20px，使每个商品项之间有一定的间距。 接下来，我们可以使用CSS的伪类选择器:hover来实现商品项的鼠标悬停效果。 ```css .goods-item:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } ``` 最后，我们可以使用CSS的动画效果来为商品项添加过渡动画。 ```css .goods-item { width: 30%; height: 300px; margin-bottom: 20px; background-color: #f5f5f5; transition: box-shadow 0.3s ease-in-out; } .goods-item:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transform: translateY(-5px); } ``` 上面的代码中，我们使用了transition属性为商品项添加了一个box-shadow属性的过渡效果，使鼠标悬停时商品项上方出现阴影。使用transform属性将商品项向上移动5px，让鼠标悬停时产生一定的视觉反馈。 综上所述，我们可以使用上面的代码块来实现淘宝商品页面列表展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值