2019-8-24 小米商城商品展示界面

最新推荐文章于 2022-12-28 18:19:36 发布
最新推荐文章于 2022-12-28 18:19:36 发布
阅读量1.8k 收藏 21
点赞数 4
分类专栏： web前端 文章标签： web前端 js语言 制作商品管理界面 js应用 html应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44214895/article/details/100056964
版权

Java入门项目

java前端制作简易小米商城商品展示界面

项目要求制作一个小型的商品界面 ，用到js来引用json数据显示商品信息
需求如：

具体内容

界面布局及信息显示

  1. 头部展示loge 名称 及登录注册 和搜索框显示
  2. 主题 左侧为 商品图片 广告界面 右侧 为商品展示界面
  3. 界面用css设计尽量 优美

项目实施

  1. 布局 为头部 和主题 头部 内部 有三个div 分别展示，loge 名称 及登录注册 和搜索框显示
  2. 用到position的相对定位和决对定位，外部采用相对定位，内部采用绝对定位，对于商品div则不用使用
    定位
  3. 商品布局用到js中代码动态创建 商品项
    项目结构
    在这里插入图片描述

css代码

#awt{
			width: 1200px;
			height: 600px;
			background: linear-gradient(to right,rgba(256,0,256,0.5),rgba(100,256,100,1));
			position: relative;
			left: 50%;
			right: 50%;
			margin: 30px 0 0 -600px;
			border-radius: 10px;
			box-shadow:0 0 80px rgba(56,56,24,0.9);
			box-sizing: border-box;
			}
			#head{
				position: absolute;
				top: 0;
				width: 100%;
				height: 50px;
				background:linear-gradient(to right,rgba(256,0,256,0.5),rgba(256,256,0,0.9));
			}
			#body{
				position: absolute;
				top: 50px;
				left: 0;
				width: 100%;
				height: 500px;
				
			}
			#foot{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 50px;
				background:url(img1/播放条.jpg);
				background-size: 1200px;
			}
			.head-l{
				position: absolute;
				margin-top: 2px;
				margin-left: 30px;
				height: 50px;
				width: 200px;
				background-image: url(../img/miui.jpg);
				background-size: 100px ;
				background-repeat: no-repeat;
			}
			.head-c{
				position: absolute;
				left: 200px;
				
				height: 50px;
				width: 700px;
				background: rgba(255,255,255,0.5);
			}
			.head-r{
				position: absolute;
				top: 0;
				right: 0;
				height: 50px;
				width: 300px;
				padding-top: 10px;
				
				background-repeat: no-repeat;
			}
			.head-r>input{
				border: 0;
				width: 120px;
				height: 30px;
				margin-left:20px ;
			}
			.head-r>a{
				
				position: absolute;
				
				width: 100px;
				height: 20px;
				right: 10px;
				display: inline-block;
				text-decoration: none;
				
				margin-left: 10px;
			}
			ul{
				margin: 0;
				padding: 0;
			}
		
			.ul1>li{
				float: left;
				display: inline-block;
				width: 75px;
				height: 50px;
				text-align:center;
				padding-top: 15px;
				list-style: none;
				box-sizing: border-box;
				
			}
			.ul1>li>a{
				text-decoration: none;
					font-size: 15px;
					font-weight: 500;
				
					color: rgba(0,0,0,0.6);
			}
			.ul1>li:hover{
				
				background: rgba(100,220,180,0.5);
			}
			
			#left{
				position: absolute;
				left: 0;
				top: 0;
				height: 500px;
				width: 300px;		
				background-image: url(../img/aaa01.jpg);
				background-size: 300px ;
			}
			#rigth{
				position: absolute;
				right: 0;
				top: 0;
				height: 500px;
				width: 900px;
				background: #556766;
				background-size: 300px ;
				overflow-y:scroll;
			}
			.item{
				
				display: inline-block;
				height:350px;
				width: 250px;
				line-height: 50px;
				margin: 5px;
				text-align: center;
				background: #F5F5F5;
			}
			.item-img{
				height:250px;
				width: 250px;
				
			}
			.item-img>img{
				border: 0;
				margin: 0;
				width: 250px;
				height: 250px;
			}
			.item-name{
				height:30px;
				width: 250px;
				line-height: 30px;
				text-align: center;
				
			}
			.item-type{
				height:30px;
				width: 250px;
				line-height: 30px;
				text-align: center;
				
				
			}
			
			.item-foot{
				position: relative;
				top: 0;
				box-sizing: border-box;
				height:40px;
				width:250px;
				text-align: center;
			
				
			}
			.item-nprice{
				position: absolute;
				left: 0;
				padding-right: 5px;
				box-sizing: border-box;
				height:40px;
				width: 125px;
				text-align: right;
				color: rgba(255,0,0,1);
				
			}
			.item-price{
				position: absolute;
				right: 0;
				padding-left: 5px;
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				display: inline-block;
				height:40px;
				width: 125px;
				text-align: left;
				text-decoration: line-through;
				color: rgba(0,0,0,0.4);
				
			}

html代码



<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8" />
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<title></title>
   	<link rel="stylesheet" type="text/css" href="css/main.css"/>
   </head>
   <body>
   	<div id="awt">
   		<div id="head">
   			<div class="head-l"></div>
   			<div class="head-c">
   				<ul class="ul1">
   					<li><a href="">小米手机</a></li>
   					<li><a href="">Redmi红米</a></li>
   					<li><a href="">电视</a></li>
   					<li><a href="">笔记本</a></li>
   					<li><a href="">家电</a></li>
   					<li><a href="">路由器</a></li>
   					<li><a href="">智能硬件</a></li>
   					<li><a href="">服务</a></li>
   					<li><a href="">社区</a></li>
   				</ul>
   				
   			</div>
   			<div class="head-r">
   				<input  type="text" placeholder="小米9">
   				<i class="fa fa-search"></i>
   				<a href="">登录/注册</a>
   			</div>
   		</div>
   		<div id="body">
   		
   			<div id="left">
   				
   			</div>
   			<div id="rigth">
   				<div class="item">
   					<div class="item-img"><img src="img/aa.jpg" alt=""></div>
   					<div class="item-name"></div>
   					<div class="item-type"></div>
   					<div class="item-foot">
   						<span class="item-nprice"></span>
   						<span class="item-price"></span>
   					</div>
   					</div>
   				
   				
   				
   			</div>
   		</div>
   		
   		<div id="foot">
   			
   		</div>
   	</div>
   	
   	<script type="text/javascript">
   		data=[{"name":"小米MIX2S","type":"四面陶瓷机身","nprice":"1799","price":"2999","imgg":"img/aa.jpg"},
   			{"name":"小米MIX3","type":"Dox百分比拍照手机","nprice":"2599","price":"3599","imgg":"img/bb.jpg"},
   			{"name":"小米9","type":"全息炫彩机身","nprice":"2599","price":"2999","imgg":"img/cc.jpg"},
   			{"name":"小米8  青春版","type":"索尼2400万自拍，超级夜景","nprice":"1299","price":"1799","imgg":"img/dd.jpg"},
   			{"name":"Ridmi7","type":"4000mAh超长续航","nprice":"699","price":"799","imgg":"img/ee.jpg"},
   			{"name":"黑鲨游戏手机2","type":"立体触控","nprice":"2699","price":"3499","imgg":"img/ff.jpg"}
   			];
   			var html = '';
   			
   			for(var i=0;i<data.length;i++){
   				var m=data[i];
   							
   					html += '<div class="item">'
   					html += '<div class="item-img"><img src="'+m.imgg+'" alt=""></div>'
   					html += '<div class="item-name">'+m.name+'</div>'
   					html += '<div class="item-type">'+m.type+'</div>'
   					html += '<div class="item-foot">'
   					html += '<span class="item-nprice">'+m.nprice+'￥'+'</span>'
   					html += '<span class="item-price">'+m.price+'￥'+'</span>'
   					html += '</div>'	
   					html += '</div>'
   				
   				
   			}
   			document.getElementById('rigth').innerHTML = html;
   			
   			
   	</script>
   </body>
</html>

在这里我们的教师学生日报管理系统已经写完了~~！
来看看成果吧 ^ v ^！

成果展示

在这里插入图片描述

qq_44214895
关注
  • 4
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【ASP.NET Web】项目实践—网上宠物店8：制作“商品展示”页面
王迪
12-23 2263
网站通过 Products.aspx 页面展示所销售的宠物。 分析商品展示页面的界面：内容实现，要写在占位符控件中。 分析产品展示页面的功能： Products.aspx 页面使用一个 DataList 控件，以两列的形式展示商品，每个商品包括商品名称、描述、价格、图片等信息。此外，页面显示哪一类的宠物由用户单击宠物分类链接时传递的查询字符串决定。 第一步，使用母版页新建商品展示页 Products.aspx 。 第二步，展示商品。将页面切换到【设计】模式，从工具箱拖放一个 SqlDat..
仿京东的商品展示详情页面
11-16
仿照京东商品展示详情页做的demo,解压到Hbuilder或者其他IDE中即可使用,商城项目中可以直接拿过来修改使用。
用HTML+CSS完成的小米商城界面
11-23
用HTML+CSS完成的小米商城界面，用DIV+CSS搭好框架，JS写好输入框事件。内附有字体和图片
html+css仿小米商城首页搜索页和商品详情页
12-30
作业
仿小米商城的移动端页面
12-27
仿照小米商城做的移动端页面，静态页面，注册登录没做
152-微信小程序-小米商城.zip
06-11
这个名为“152-微信小程序-小米商城.zip”的压缩包很可能包含了一个完整的微信小程序项目，用于模仿或复刻小米商城的功能。这个小程序可能包含了源代码、界面设计截图和其他相关资源，帮助开发者理解和学习如何构建...
2022最新仿小米商城首页html+css+js
09-22
在仿小米商城首页的HTML代码中，我们可能看到如导航栏、轮播图（banner）、产品展示区域等常见电商页面元素的结构定义。这些元素通过不同的HTML标签进行区分，如`<header>`、`<nav>`、`<section>`、`<article>`、`...
Android仿小米商城商品详情界面UI，ScrollView嵌套ScrollView、WebView、ListView
07-05
在Android开发中，创建一个与小米商城商品详情页面相似的用户界面（UI）是一项常见的任务。这个项目名为"MoreScrollDemo"，旨在实现一个复杂的滚动布局，它涉及到ScrollView的多层嵌套，以及WebView和ListView的集成...
网页设计-仿小米商城-前端期末大作业
07-28
在仿制小米商城的过程中，开发者需要实现这些功能，包括商品分类、详情页面、加购按钮、结账流程等。这些功能的实现不仅考验前端技术，也涉及后端接口的对接和数据库的操作。 【文件名称列表】: MI "MI"可能代表...
仿小米商城html网页源码
03-31
在这个项目中，HTML文件用于构建网页的基本框架，包括各个部分如导航栏、商品展示区、购物车、页脚等。通过使用不同的HTML标签，可以创建出丰富的网页结构，如`<header>`、`<nav>`、`<section>`、`<article>`、`...
小米商城页面
12-17
小米商城页面
购物商城设计（参考小米商城）(boostrap前台JSP页面+struts2+mysql数据库)
10-29
eclipse中的gradle项目，内含gradle文件夹和mysql数据库文件，解压后导入mysql数据库，文件夹导入eclipse即可使用。 实现了功能有用户注册登录找回密码、商品轮播、添加删除购物车、加入修改删除订单，后台可添加删除商品，查看订单、发货等。 注意：发邮件找回密码需要去searchPsw.action修改
小米商城网上平台.zip
11-27
完整的javaweb商城项目源代码，附带sql数据库代码。这是一个简单的web项目，只用到servlet、jsp、jdbc。码字不易，点个赞吧。
这是一个高仿小米商城手机版的Vue项目
08-10
这是一个高仿小米商城（手机版）的Vue项目
小米商城主页
03-27
小米商城主页分享 html 实现 CSS 互相学习，互相进步，
仿小米商城电脑官网-纯HTML+CSS（含轮播图）
Zakke的博客
02-12 5455
来自作者的话 这是我第一次写博客，也是为了激励自己学习，分享一些前端学习的知识，有写的不好的多多包涵。下面是参考的一些博客的链接 https://blog.csdn.net/weixin_43976890/article/details/89473101 废话不多说下面直接开始。 1.网页的布局分析 一个网页拿到手，首先看它的整体布局，分为哪几部分，然后我们一部分一部分地去完成，对于这次的小米...
ecshop 商品详情页面显示商品简单描述
沐雪大神
08-17 247
{$goods.goods_brief}
小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
热门推荐
qq_58401483的博客
12-28 1万+
基于HTML+CSS+JS实现小米商城项目，用户通过输入账号密码进行登录，此次项目测试账号：admin 测试密码：123123。首页主要是轮播图的设计与实现（可手动轮播，也可以自动轮播），商品列表以及商品展示，浮动与按压效果是实现，此外还设计了视频专栏，小米秒杀专栏，下载app弹出窗和购物车弹出窗设计。点击导航栏购物车，或者点击工具条上的购物车可跳转到我的购物车页面，点击登录跳转到登录页，还有回到顶部效果的实现。
小米商城商品数据库
weixin_38107930的博客
05-22 4964
最近有个前端同学想做个小米商城，想委托我搭下后端，我寻思着最近也不忙，就答应了，没想到遇到的难题颇多，光数据库就研究了一星期，勉勉强强弄了个能看的出来。 本来是想着去网上找一个商城数据库改一改的，但百度了发现很难找到完善的商城数据库，基本都是简单的用于学习的，想想也是，哪个公司把他们数据库结构到处传的。被逼无奈，只好自己做了。 首先，商品肯定有分类，先贴我的分类表 ...
小米商城首页2024
最新发布
08-23
小米商城的界面和功能通常会随着技术和市场变化而调整，您可以访问小米官方网站或关注其官方新闻发布了解最新动态。 一般来说，电商平台的首页会展示热销商品、新品推荐、促销活动等，可能会有个性化的内容基于用户...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值