html中写一个天猫商城的购物模块界面

最新推荐文章于 2024-05-18 20:31:13 发布
原创 最新推荐文章于 2024-05-18 20:31:13 发布 · 1w 阅读 · 85 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个商品展示页面的设计方案，包括布局、样式及元素展示等细节。页面采用固定宽度和高度的容器，内含多个商品展示区块，每个区块包含商品图片、价格、简介、店铺名称以及交易详情等信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
width: 1000px;
height: 600px;
/*border: 1px solid red;*/
margin:0px auto;
}
div{
/*border:1px solid green;*/
font-size: 12px;
}
img{
display: block;
}
.detail{
font-size:0px;
background: url(./img/con.png) no-repeat 190px center;
border:1px solid #E6E6E6;
}
.details{
display: inline-block;
padding-right: 13px;
border-right: 1px solid #E6E6E6;
text-align: center;
text-indent: 1.2em;




}
.show{
width: 220px;
display: inline-block;
margin-left: 20px;
}
        .content{
        font-size: 0px;
        margin-bottom: 10px;
        }
        .price{
        font-size: 16px;
        color: red;
        font-weight: bold;
        }
        .store{
        color: #7F7F7F;
        text-decoration: underline;
        margin-bottom: 5px;
        }
        mark{
        background-color:transparent;
        color:#E5C45A;
        }
        span{
        color: #8236E5;


        }
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="show">
<div class="imgbg">
<img src="./img/j1.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介绍字体
</div>
<div class="store">
贪玩蓝月
</div>
<div class="detail">
<div class="details">月成交<mark>2102笔</mark></div>
<div class="details">评价<span>2192</span></div>

</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j2.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介绍字体
</div>
<div class="store">
贪玩蓝月
</div>
<div class="detail">
<div class="details">月成交2102笔</div>
<div class="details">评价2192</div>
<div class="details">

</div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j3.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介绍字体
</div>
<div class="store">
贪玩蓝月
</div>
<div class="detail">
<div class="details">月成交<mark>2102笔</mark></div>
<div class="details">评价<span>2192</span></div>

</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j4.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介绍字体
</div>
<div class="store">
贪玩蓝月
</div>
<div class="detail">
<div class="details">月成交<mark>2102笔</mark></div>
<div class="details">评价<span>2192</span></div>

</div>
</div>
</div>
<div class="content">
<div class="show">
<div class="imgbg">
<img src="./img/j5.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介绍字体
</div>
<div class="store">
贪玩蓝月
</div>
<div class="detail">
<div class="details">月成交<mark>2102笔</mark></div>
<div class="details">评价<span>2192</span></div>

</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j6.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介绍字体
</div>
<div class="store">
贪玩蓝月
</div>
<div class="detail">
<div class="details">月成交2102笔</div>
<div class="details">评价2192</div>
<div class="details">

</div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j7.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介绍字体
</div>
<div class="store">
贪玩蓝月
</div>
<div class="detail">
<div class="details">月成交<mark>2102笔</mark></div>
<div class="details">评价<span>2192</span></div>

</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j8.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介绍字体
</div>
<div class="store">
贪玩蓝月
</div>
<div class="detail">
<div class="details">月成交<mark>2102笔</mark></div>
<div class="details">评价<span>2192</span></div>

</div>
</div>
</div>
</div>
</body>

</html>

 

 

大学生HTML期末大作业——HTML+CSS+JavaScript购物商城（Oppo）
...
07-11 3226
HTML+CSS+JS【购物商城】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
html购物车
12-06
很简单的html购物车，适合刚开始学习html的同学，非常实用。
淘宝购物车界面HTML
05-30
包含淘宝购物车加减货物，清除货物，清空购物车等操作，利用js技术进行界面设计。学习HTML的典型案例，需要的朋友可以下载，里面有网页、图片等都在里面了。
html购物车页面
热门推荐
pengxiang1998的博客
05-03 3万+
今天博主给大家分享一个自己做的购物车页面，使用的是html+css实现： 话不多说，直接上图： 这个页面只是实现了其布局视图，没有使用js或者jquery相关语言，在博主看来是比较利于我们将其加入到自己的程序中的 以下是相关代码： index.html <!DOCTYPE html> <html> <head> <meta charset="utf...
Html购物车
weixin_64938628的博客
03-12 1万+
一.登陆界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆界面</title> <style type="text/css"> html,body{ height:100%;/*高度为屏幕的百分之百*/ margin: 0px;/**/ } body{/*背景图片*/
购物车html代码
03-19
青软实训《web前端设计与开发》 2-1~3-2贯穿项目代码 html5
HTML+CSS+JS的仿天猫商城APP源码
04-10
【HTML+CSS+JS的仿天猫商城APP源码】是一个基于Web技术实现的移动应用模拟项目，它利用了HTML5、CSS3以及JavaScript的核心特性，旨在重现天猫商城APP的界面和部分功能。这个项目对于学习Web前端开发，尤其是对移动...
java 仿天猫商城 带数据库
10-11
标题中的“java 仿天猫商城 带数据库”意味着这是一个使用Java编程语言开发的电子商务平台项目，其设计灵感来源于天猫商城。这个项目不仅包含了前端用户界面的实现，还集成了后端服务，与数据库进行交互，以存储和...
基于Java Server Pages的F_Tmall天猫商城设计源码学习参考
最新发布
02-27
本项目《基于Java Server Pages的F_Tmall天猫商城设计源码学习参考》是一个完整的商城系统源码，为我们提供了一个深入学习和实践JSP开发技术的极佳范例。 首先，这个项目包含丰富的文件类型，涵盖了前端和后端开发...
小型天猫商城毕业设计源码
05-08
【标题】"小型天猫商城毕业设计源码"是一款基于SpringBoot框架开发的电子商务平台，旨在为学生提供一个实践和学习的平台，适用于毕业设计项目。这个项目不仅包含了完整的源代码，还提供了详细的部署文档，帮助用户...
红色天猫商城微信综合商城程序源码.zip
10-05
【红色天猫商城微信综合商城程序源码】是一个用于构建电商网站的开源代码包，它集成了微信支付功能，旨在提供一个类似天猫商城的在线购物体验。这个程序源码的使用主要是针对开发人员和有一定编程基础的用户，允许...
html购买界面
04-11
1.物品全部由店家自己拍摄，开价十分实在，故不再议价谢谢体谅！ 2.店家发货时，会经过三重清点，尽量杜绝误发错发现象；提醒各位MM们亲自当着快递的面清点确认无误，再行签 收，避免不必要的损失。 3.江浙沪快递5元（ 其他地区8元以上不等,按实收）。 4.有任何疑问欢迎旺 旺询问店主，请尽量不要使用站内信件和店铺留言，这样回复会比较慢而且也很容易
天猫网站制作
12-31
天猫网页制作。包含了web技术，，，，其中html Javascript1 jquery css等 代码
仿天猫的静态网页，纯HTML+CSS
09-05
自己刚学时写的仿天猫 的静态网页 注册-登录-首页-搜索结果页-商品详情页-购物车侧边栏-结算页-确认收货地址页-付款页-支付完成页 电商的生老病死都在了，都是自己写的，留给需要的人。
web前端做的一个购物商城
04-22
里面有登录注册页面，个人中心页面，购物车页面，实现搜索功能，欢迎下载
信息管理界面html模板
04-08
简洁的信息管理界面，数据，图片的添加删除，工具，编辑资料，登录等功能
一个购物车界面的全部（html、js、css）
api工厂
11-05 873
<template> <div v-if="cartInfo && cartInfo.number > 0" class="shopCartContainer"> <div class="modelTit"> <span>购物车</span> <van-button plain round size="mini" type="danger" @click="emptyShopCart"
制作京东购物车，包含html+js+css完整代码
m0_74937643的博客
05-18 3418
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计（1）商城首页
杭州.黄老师
07-27 6958
html界面代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>黄菊华：H5+CSS3商城界面实战</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href..
天猫商城ShopEx4.8模板深度解析
首先，天猫商城作为中国领先的B2C（Business-to-Consumer）平台，为商家和消费者提供了一个庞大的在线购物市场。ShopEx4.8是专门为天猫商家开发的网站管理系统，允许商家管理产品、订单、用户和内容等。ShopEx4.8...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值