小米商城浮动练习 html5css"/>
小米商城浮动练习 html5css
第一步制作导航栏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>mi商城</title><style>*{margin: 0;padding:0;}.box{height: 40px;background: rgb(51,51,51);}.box .nav{height: 40px;width: 1240px;margin: auto;}.box .nav .left{float: left;}.box .nav .right{float: right;}.left li {float: left;list-style-type: none;line-height: 40px;margin-left: 20px;color: white;}.right li{float: right;list-style-type: none;line-height: 40px;margin-right: 20px;color: white;}</style></head>
<body><div class="box"><div class="nav"><ul class="left"><li>小米商城</li><li>MIUI</li><li>IoT</li><li>云服务</li><li>金融</li><li>有品</li><li>小爱开放平台</li><li>企业团购</li></ul><ul class="right"><li>资质证照</li><li>协议规则</li><li>下载app</li><li>Select Location</li></ul></div></div>
</body>
</html>
第二步图片浮动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>手机</title><style>*{margin: 0px;padding: 0px;}body{background:rgb(245,245,245) ;}.box{text-align: center;width: 230px;height: 300px;background: white;float: left;margin-left: 15px;border-radius: 5px;margin-top: 5px;}.box .img{margin: 8px auto;width: 200px;height: 200px;}.box .text1{font-size: 15px;}.box .text2{font-size: 12px;margin-top: 3px;color:rgb(194,194,194);}.box .text3{font-size: 13px;margin-top: 5px;color: rgb(255,137,47);}.box .text3 span{color: rgb(174,174,174);font-size: 12px;margin-left: 2px;text-decoration: line-through;}.left{width: 230px;height: 640px;float: left;margin-top: 5px;margin-left: 60px;}.box.buttom{margin-top: 20px;}</style></head>
<body><div class="left"><img src="img/img.png" height="620" width="230"/></div><div class="box"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box "><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box buttom"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box buttom"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box buttom"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box buttom"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div>
</body>
</html>
第三步组合一起
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>mi商城</title><style>*{margin: 0;padding:0;}.box1{height: 40px;background: rgb(51,51,51);}.box1 .nav{height: 40px;width: 1240px;margin: auto;}.box1 .nav .left{float: left;}.box1 .nav .right{float: right;}.left li {float: left;list-style-type: none;line-height: 40px;margin-left: 20px;color: white;}.right li{float: right;list-style-type: none;line-height: 40px;margin-right: 20px;color: white;}body{background:rgb(245,245,245) ;}.box{text-align: center;width: 230px;height: 300px;background: white;float: left;margin-left: 15px;border-radius: 5px;margin-top: 5px;}.box .img{margin: 8px auto;width: 200px;height: 200px;}.box .text1{font-size: 15px;}.box .text2{font-size: 12px;margin-top: 3px;color:rgb(194,194,194);}.box .text3{font-size: 13px;margin-top: 5px;color: rgb(255,137,47);}.box .text3 span{color: rgb(174,174,174);font-size: 12px;margin-left: 2px;text-decoration: line-through;}.left.img{width: 230px;height: 640px;float: left;margin-top: 5px;margin-left: 60px;}.box.buttom{margin-top: 20px;}</style></head>
<body><div class="box1"><div class="nav"><ul class="left"><li>小米商城</li><li>MIUI</li><li>IoT</li><li>云服务</li><li>金融</li><li>有品</li><li>小爱开放平台</li><li>企业团购</li></ul><ul class="right"><li>资质证照</li><li>协议规则</li><li>下载app</li><li>Select Location</li></ul></div><div class="left img"><img src="img/img.png" height="620" width="230"/></div><div class="box"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box buttom"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box buttom"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box buttom"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div><div class="box buttom"><div class="img"><img src="img/img02.jpg" height="200" width="200"/></div><div class="text1">米家互联网空调C1 ( -级能效)</div><div class="text2">1.5匹，自清洁,全直流变频</div><div class="text3">2299元 <span>2799元</span></div></div>
</div>
</body>
</html>
效果展示
更多推荐
小米商城浮动练习 html5css
发布评论