模仿了小米商城，有很多小问题。不是专业学前端的，javaweb涉及前端一点点，就写了下。仅供参考，不用做商业用途。

代码写的很乱，需要的小伙伴耐心找一下相应的选择器。

html代码：

选购指南
手机
服务中心
申请售后
线下门店
小米之家
服务网点
了解小米
联系我们
新浪微博
400-100-5678
8:00-18:00 (仅收市话费)
联系客服小米商城|MIUI|米家|米聊|多看|游戏|路由器|米粉卡|政企服务|小米天猫店|隐私政策|问题反馈|廉政举报|Select Region
@mi.com 京ICP证110507号 京ICP备xxxxxxxx号 京公网安备xxxxxxxxxxxxxx号 京网文[xxxx]xxxx-xxx号 
 违法和不良信息举报电话: xxx-xxxx-xxx, 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试

css代码：

*{padding: 0;margin: 0;}
html,body{width: 100%;height: 100%;}
#content{width: 100%;height: 100%;min-width: 1440px;min-height: 600px;position: relative;
}
#top{position: fixed;width: 100%;height: 60px;top: 0px;background-color: #333 ;letter-spacing: 2px;line-height: 50px;z-index: 10;
}
#top_left{display: inline-block;margin-left: 25px;}
#top_right{display: inline-block;position: absolute;right: 180px;letter-spacing: 3px;
}
.top_left_text{font-size: 19px;color: aliceblue;
}
.top_right_text{font-size: 19px;color: aliceblue;
}
#gouche{position: absolute;right: 0px;background-color: #646464;width: 170px;height: 60px;top: 0px;text-align: center;
}
.top_right_text1{position: relative;display: inline-block;color: aliceblue;font-size: 19px;text-align: center;
}
#top1{width: 100%;min-width: 1440px;height: auto;position: relative;margin-top: 100px;
}
#image{position: absolute;width: 56px;height: 56x;left: 10px;}
#top1_center_text{text-align: center;line-height: 60px;
}
.center_text{color: black;font-size: 25px;margin-right: 20px;
}
#input{position: absolute;right: 5px;top: 0px;
}
#input_text{margin-right: 85px;width: 300px;height: 50px;padding-left: 15px;position: relative;border-right-width: 0;outline: none;}
#input_research{border-left-width: 0;font-size: 25px;text-align: center;border: 1px solid black;display: inline-block;position: relative;right: 92px;width: 65px;height: 50px;line-height: 50px;top: 5px;}
#input_research:hover{background-color: #ff6700;
}
#top3{position: relative;top: 150px;background: #6f6f6f;left: 15px;width: 25%;height: 100%;line-height: 55px;}
#text{height: 800px;position: relative;}
#list{display: inline-block;width: 100%;margin-left: 50px;list-style: none;line-height: 70px;margin-top: 20px;z-index: 10;
}
.text_list{font-size: 35px;color: aliceblue;
}
.text_list:hover{width: 100%;background-color: orange;
}
#top3_img{display: inline-block;position: absolute;left: 150px;top: -80px;z-index: -1;
}
#top4{display: inline-block;width: 100%;height: auto;position: relative;margin-top: 180px;left: 10px;
}
#image1{position: absolute;}
#a1{display: inline-block;width: 621px;height: 340px;
}
#a3{position: relative;left: -20px;
}
#a4{position: absolute;
}
#image2{display: inline-block;position:relative;margin-top: 400px;left: 15px;right: 15px;width: 100%;}
#a6{display: inline-block;width: 100%;
}#center{position: relative;background: #c3c3c3;width: 100%;
}
#phone{position: relative;top:100px;left: 85px;font-size: 50px;color: gray;
}
#shouj{position: relative;
}
#left_img{position: relative;margin-top: 105px;left: 85px;
}
#small_image{position: relative;
}
#n01{display: inline-block;background-color: white;width: 400px;height: 350px;position: absolute;text-align: center;top: -770px;left: 450px;}
#t1{/* position: relative; */}
#text1{display: block;text-align: center;font-size: 25px;
}
#text11{color: gainsboro;
}
#text12{font-weight: 15px;font-size: 20px;
}
#n02{display: inline-block;background-color: white;width: 400px;height: 350px;position: absolute;text-align: center;top: -770px;left: 950px;}
#n03{display: inline-block;background-color: white;width: 400px;height: 350px;position: absolute;text-align: center;top: -770px;right: 85px;
}
#n04{display: inline-block;background-color: white;width: 400px;height: 350px;position: absolute;text-align: center;top: -770px;right: 600px;
}
#n05{
display: inline-block;background-color: white;width: 400px;height: 350px;position: absolute;text-align: center;top: -350px;right: 600px;	
}
#n06{
display: inline-block;background-color: white;width: 400px;height: 350px;position: absolute;text-align: center;top: -350px;right: 85px;	
}
#n07{display: inline-block;background-color: white;width: 400px;height: 350px;position: absolute;text-align: center;top: -350px;left:950px;	
}
#n08{display: inline-block;background-color: white;width: 400px;height: 350px;position: absolute;text-align: center;top: -350px;left:450px;	}#text_bottom{text-align: center;display: block;position: relative;text-decoration: none;list-style: none;top: 30px;}#list1{position: absolute;left: 30%;} #list2{position: absolute;left: 35%;}#list3{position: absolute;left: 40%;}#list4{position: absolute;left: 45%;}#list5{position: absolute;left: 50%;}#a{text-decoration: none;list-style: none;line-height: 85px;font-size: 20px;color: black;position: absolute;}#a1:hover{color: orange;}#a1{text-decoration: none;color: grey;letter-spacing: 5px;line-height: 35px;}#a4:hover{color: orange;}#a4{text-decoration: none;color: grey;letter-spacing: 5px;line-height: 35px;}#a2{text-decoration: none;list-style: none;line-height: 85px;font-size: 20px;color: black;}#a3{text-decoration: none;color: grey;letter-spacing: 5px;line-height: 35px;left: 0px;}#a5{text-decoration: none;list-style: none;line-height: 85px;font-size: 20px;color: black;}#a6{text-decoration: none;color: grey;letter-spacing: 5px;line-height: 35px;}#a7{text-decoration: none;color: grey;letter-spacing: 5px;line-height: 35px;}#a8{text-decoration: none;list-style: none;line-height: 85px;font-size: 20px;color: black;}#a9{text-decoration: none;list-style: none;line-height: 85px;font-size: 20px;color: black;}.bottom_text2{position: absolute;width: 100%;left: 60%;margin-top: 15px;}.bottom_text2 h4{position: absolute;top: 15px;font-size: 40px;color: #ff6700;}.bottom_text2 p{position: absolute;font-size: 20px;top: 60px;}.bottom_text2 a{position: absolute;font-size: 35px;text-decoration: none;color: aliceblue;top: 90px;background: #ff6700;border: 2px solid #ff6700;border-radius: 10px;}.copyright{height: 55px;padding: 350px 10px 0 0;}#loge{position: absolute;width: 45px;bottom: 5px;left: 36%;}.co-nav{position: absolute;margin-left: 38%;color: gray;}.co-nav a{color: gray;}.center_text:hover{color: orange;}.top_right_text:hover{color:coral;}.top_left_text:hover{color:coral;}.top_right_text1:hover{color: coral;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！