小米官网(HTML5+CSS3)"/>
课程设计之小米官网(HTML5+CSS3)
引言
大家好,当你搜索到了这个文章,我相信你在为你的课程大作业而困扰,不用担心,遇见我,就相当于遇见了救星!!!因为我曾经也这样苦恼。
这是一个用html5+css3实现的小米官网。
最让你高兴的就是,文章末尾附有项目完整源代码哦!!!
这是直接进行效果展示,让你看看符合你的要求不,如果不符合可以及时与我联系哦!!!
一、项目展示
二、部分代码展示
因为文章长度受限, 这里仅展示部分代码,如果需要完整代码,可以在文章末尾提取!
<div class="laster" style="background-color: #ffffff;width:100% ;"><div class="laster1" style="margin: 0 auto;"><div class="er1_div2"><table class="er1_tab" cellspacing="9px" ;><tr><td>选购指南 </td><td>服务中心 </td><td>线下门店 </td><td>关于小米 </td><td>关注我们 </td></tr><tr><td> </td></tr><tr><td class="er1_td"><a class="er1_td_a">手机</a></td><td class="er1_td"><a class="er1_td_a">申请售后</a> </td><td class="er1_td"><a class="er1_td_a">小米之家</a> </td><td class="er1_td"><a class="er1_td_a">了解小米</a> </td><td class="er1_td"><a class="er1_td_a">新浪微博</a> </td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">电视</a></td><td class="er1_td"><a class="er1_td_a" href="#">售后政策</a></td><td class="er1_td"><a class="er1_td_a" href="#">服务网点</a></td><td class="er1_td"><a class="er1_td_a" href="#">加入小米</a></td><td class="er1_td"><a class="er1_td_a" href="#">官方微信</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">笔记本</a></td><td class="er1_td"><a class="er1_td_a" href="#">维修服务价格</a></td><td class="er1_td"><a class="er1_td_a" href="#">授权体验店/专区</a></td><td class="er1_td"><a class="er1_td_a" href="#">投资者关系</a></td><td class="er1_td"><a class="er1_td_a" href="#">联系我们</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">平板</a></td><td class="er1_td"><a class="er1_td_a" href="#">订单查询</a></td><td class="er1_td"><a href="#"></a></td><td class="er1_td"><a class="er1_td_a" href="#">企业社会责任</a></td><td class="er1_td"><a class="er1_td_a" href="#">公益基金会</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">穿戴</a></td><td class="er1_td"><a class="er1_td_a" href="#">以旧换新</a></td><td class="er1_td"><a href="#"></a></td><td class="er1_td"><a class="er1_td_a" href="#">廉洁举报</a></td><td class="er1_td"><a class="er1_td_a" href="#"></a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">耳机</a></td><td class="er1_td"><a class="er1_td_a" href="#">保障服务</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">家电</a></td><td class="er1_td"><a class="er1_td_a" href="#">防伪查询</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">路由器</a></td><td class="er1_td"><a class="er1_td_a" href="#">F码通道</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">音箱</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">配件</a></td></tr></table><div class="er1_div3"><p class="er1_div3_p1">400-100-5678</p><p class="er1_div3_p2">8:00-18:00(仅收市话费)</p><a href="#" class="er1_div3_a">人工客服</a></div></div></div></div><div><div class="laster2" style="margin: 0 auto;"><div class="er2"><img src="../imgs/logo.png" style="width: 56px;height:56px; float: left;"><div class="er2_div1"><p><a href="#">小米商城</a><span>|</span><a href="#">MIUI</a><span>|</span><a href="#">米家</a><span>|</span><a href="#">米聊</a><span>|</span><a href="#">多看</a><span>|</span><a href="#">游戏</a><span>|</span><a href="#">政企服务</a><span>|</span><a href="#">小米天猫店</a><span>|</span><a href="#">小米集团隐私政策</a><span>|</span><a href="#">小米公司儿童信息保护规则</a><span>|</span><a href="#">小米商城隐私政策</a><span>|</span><a href="#">小米商城用户协议</a><span>|</span><a href="#">问题反馈</a><span>|</span><a href="#">Select Location</a></p><p><a href="#">北京互联网法院法律服务工作站</a><span>|</span><a href="#">中国消费者协会</a><span>|</span><a href="#">北京市消费者协会</a></p></div><div class="er2_div11"><p><span>@</span><a href="#">mi</a><span>京ICP证110507号</span><a href="#">京ICP备10046444号</a><a href="#">京公网安备11010802020134号</a><a href="#">京网文[2020]0276-042号</a></p><p><a href="#">(京)网械平台备字(2018)第00005号</a><a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a><a href="#">营业执照</a><a href="#">医疗器械质量公告</a></p><p><a href="#">增值电信业务许可证</a><span>网络食品经营备案 京食药网食备202010048</span><a href="#">食品经营许可证</a></p><p><span>违法和不良信息举报电话:171-5104-4404</span><a href="#">知识产权侵权投诉</a><span>本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</span></p></div><div class="er2_div2"><a href="#"><img style="width:83px;height:28px;" src="../imgs/last1.png"></a><a href="#"><img style="width:83px;height:28px;" src="../imgs/last2.png"></a><a href="#"><img style="width:83px;height:28px;" src="../imgs/last3.png"></a><a href="#"><img style="width:83px;height:28px;" src="../imgs/last4.png"></a><a href="#"><img style="width:83px;height:28px;" src="../imgs/last5.png"></a></div><div class="er2_div3"><img style="width:450px;height:28px;" src="../imgs/last6.png"></div></div></div></div>
.laster {width: 1518px;height: 500px;background-color: #ffffff;/* background-color: purple; */}.laster1 {width: 1226px;height: 475px;background-color: #ffffff;margin-left: 146px;margin-right: 146px;}.er1_div1 {width: 1226px;height: 25px;padding-top: 27px;padding-bottom: 27px;border-bottom: 1px solid #e2e2e2;}.er1_li {width: 238px;height: 27px;/* margin: 0 auto; */display: inline-block;border-right: 2px solid #e7e7e7;}.er1_li1 {width: 238px;height: 27px;/* margin: 0 auto; */display: inline-block;}.er1_a {text-decoration: none;color: #847261;margin-left: 60px;}.er1_a:hover {color: #ff6700;}.er1_img {width: 24px;height: 24px;position: relative;top: 6px;}.er1_div2 {width: 1226px;height: 313px;padding-top: 40px;padding-bottom: 40px;}.er1_tab {margin-left: 155px;float: left;}.er1_td {font-size: 13px;}.er1_td_a {color: #75767d;text-decoration: none;}.er1_td_a:hover {color: #ff6700;cursor: pointer;}.er1_div3 {width: 230px;height: 80px;border-left: 2px solid #e7e7e7;/* display: inline-block; */float: left;}.er1_div3_p1 {color: #ff6700;font-size: 19px;margin-left: 100px;}.er1_div3_p2 {font-size: 12px;color: #6f6b68;margin-top: 7px;margin-left: 100px;}.er1_div3_a {text-decoration: none;color: #ff6700;border: 1px solid #ff6700;margin-left: 129px;position: relative;top: 10px;}.laster2 {width: 1518px;height: 210px;padding-top: 30px;padding-bottom: 30px;background-color: #f5f5f5;}.er2 {margin-left: 146px;margin-right: 146px;width: 1226px;height: 210px;}.er2_div1 {padding-left: 77px;height: 45px;width: 1150px;}.er2_div1 a {text-decoration: none;font-size: 13px;color: #7c7e7f;}.er2_div1 a:hover {color: #ff6700;}.er2_div1 span {color: #7c7e7f;font-size: 13px;}.er2_div11 {padding-left: 77px;height: 85px;width: 1150px;}.er2_div11 span {font-size: 12px;color: #b7b8bb;}.er2_div11 a {text-decoration: none;font-size: 12px;color: #b7b8bb;}.er2_div11 a:hover {color: #ff6700;}
三、项目完整源代码
链接:=1215
提取码:1215
四、有任何问题及时联系我!
更多推荐
课程设计之小米官网(HTML5+CSS3)
发布评论