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>