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

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

具体内容

界面布局及信息显示

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

项目实施

布局为头部和主题头部内部有三个div 分别展示，loge 名称及登录注册和搜索框显示
用到position的相对定位和决对定位，外部采用相对定位，内部采用绝对定位，对于商品div则不用使用
定位
商品布局用到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 ^！

成果展示

2019-8-24 小米商城商品展示界面相关推荐

微信聊天记录导出（iOS） [2019.7.24]
博客地址:https://www.busby.com.cn/2019/07/24/微信聊天记录导出(iOS)[2019.7.24]/ 最前前不久很久,我的小傻瓜女票误删了我们俩的微信聊天记录,也没有 ...
2019 MySQL8 24小时快速入门（2）
第一天我们把环境搭好了. 接下来就可以进入实战了.工欲善其事必先利其器,首先我们要做的事情,就是找个好用的界面工具.我想你大概不想一直与这样黑漆漆的界面为伴吧: 如果没有绚丽的界面给我们,MySQL如 ...
Beta冲刺(3/7)——2019.5.24
所属课程软件工程1916|W(福州大学) 作业要求 Beta冲刺(3/7)--2019.5.24 团队名称待就业六人组 1.团队信息团队名称:待就业六人组团队描述:同舟共济扬帆起,乘风破浪万里 ...
训练日志 2019.1.24
今天上午补了两道题,然后转接线到了,就弄了一下扩展显示器,下午打比赛果真爽得很,感觉实验室越来越舒服了...下一步就该搬到实验室住了... 第一道签到题出的比较快,第二道贪心因为没注意数组范围,直接 ...
DayDayUp：2019.01.24新东方年会—俞敏洪点赞并奖励吐槽神曲《释放自我》12万元！—附全歌词(牛逼的人在哪里都不会彷徨)
DayDayUp:2019.01.24新东方年会-俞敏洪点赞并奖励员工的吐槽神曲<释放自我>12万元!-附全歌词目录新东方年会神曲亮了官微回应:放手去做,未来可期! 各家吃瓜 < ...
2019.10.24
记2019.10.24 #include <myself.h> void main() {for(date=2019.10.07;date=Today;date++){while(1){p ...
使用Vue指令实现数据展示，小米商城商品展示
使用Vue指令实现数据展示,小米商城商品展示涉及知识: (1)插值绑定 (2)实例创建 (3)常用指令效果展示代码代码gitee下载:https://gitee.com/yuhaowen/vf ...
DayDayUp：2019.01.24马云冬季达沃斯论坛(演讲)—Machine will be smarter than human beings, but will never be wiser
DayDayUp:2019.01.24马云冬季达沃斯论坛(演讲)-Machine will be smarter than human beings, but will never be wiser ...
HTML与CSS之小米商城静态界面（未用JS版本）
这是小米商城的无JS版本(纯静态页面)--如下: <!DOCTYP1E html> <html lang="en"> <head><met ...

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

Java入门项目

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

具体内容

界面布局及信息显示

项目实施

成果展示

2019-8-24 小米商城商品展示界面相关推荐

最新文章

热门文章