破舊的小米頁面.css

來源:互聯網
上載者:User
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;list-style: none;text-align: center;/*-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;*/}.two1 {width: 1200px;height: 418px;/*float: left;*/}.da {padding-left: 40px;/*margin: 0 auto ;*/}.one {width: 1300px;height: 80px;/*background-color: pink;*/text-align: center;}.ul li {display: inline;line-height: 70px;}.ul a:hover {background-color: #79756d;box-shadow: 0px 0px 20px 13px #000000;}.one img {float: left;padding-top: 20px;}.one a {text-decoration: none;margin-right: 8px;font-size: 14px;}.mi {float: right;height: 30px;margin: 6px;margin: 20px 100px 0 0 ;}.two2 {background-color: #625D58;width: 200px;height: 450px;float: left;}.ul2 {margin: 5px auto 0;border-radius: 10px;transition: 0.4s;}.ul2 li {/*background:green;*/height: 44px;line-height: 40px;font-size: 10px;}.ul a {color: #000;}.ul2 li a {text-decoration: none;color: #fff;/*display: block;*/}.ul2 li:hover {background-color: orange;box-shadow: 0px 0px 20px 13px #ffffff;}span {float: right;padding-right: 20px;}.xiaomi {width: 1300px;height: 30px;background-color: #000;}.span1 {display: inline;float: left;}.span1 a:hover {background-color: white;box-shadow: 0px 0px 20px 13px #00f4ff;}.span1 a {color: #6d6a6a;font-size: 8px;text-decoration: none;margin-right: 5px;}.span2 {display: inline;margin-right: 90px;/*float: right;*/}.span2 a:hover {background-color: white;box-shadow: 0px 0px 20px 13px #00f4ff;}.span2 a {text-decoration: none;color: #6d6a6a;font-size: 8px;margin-right: 5px;}a {font-family: "楷體";}.two3 .tu {width: 1000px;height: 450px;float: left;}.there .there1 {width: 200px;height: 170px;float: left;}.there {width: 1300px;height: 200px;/*background: pink;*/margin-top: 60px;}.there .there1 {width: 200px;float: left;/*display: inline-block;*//*background: blue;*/}.there .tu1 {width: 200px;height: 170px;}.there2 {width: 300px;height: 170px;background: pink;float: left;margin: 0 15px;}.four1  {/*background: pink;*/height: 60px;/*font-weight: normal;*/}.four1 h2 {margin-top: 14px;font-family: "楷體";float: left;}.four3 img {float: left;width: 230px;margin-right: 10px;}.five {width: 1200px;height: 500px;background: pink;float: left;}.six {width: 1200px;height: 500px;background: blue;float: left;}.seven {width: 1200px;height: 500px;background: skyblue;float: left;}.eight {width: 1200px;height: 500px;background: green;float: left;}.nine {width: 1200px;height: 500px;background: pink;float: left;}.ten {width: 1200px;height: 200px;background: blue;float: left;}</style></head><body><div class="da"><div class="xiaomi"><span class="span1"><a href="#" class="a1">小米商城</a><a href="#" class="a1">MUI</a><a href="#" class="a1">米聊</a><a href="#" class="a1">遊戲</a><a href="#" class="a1">多看閱讀</a><a href="#" class="a1">雲端服務</a><a href="#" class="a1">金融</a><a href="#" class="a1">米幣</a><a href="#" class="a1">小米商城手機版</a>><a href="#" class="a1">問題反饋</a><a href="#" class="a1">Select Region</a></span><span class="span2"><a href="#" class="a2">登入</a><a href="#" class="a2">註冊</a><a href="#" class="a2">訊息通知</a><a href="#" class="a2">購物車(0)</a></span></div><div class="one"><img src="mi.bmp" alt="" class="tu"><ul class="ul"><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><li><a href="#">服務</a></li><li><a href="#">社區</a></li><li><a href="#">筆記本</a></li><li><input type="text" class="mi" placeholder="紅米4x 小米Note 直降三百"></li></ul></div><div class="two1"><div class="two2"><ul class="ul2"><li><a href="#">手機電話卡<span>></span></a></li><li><a href="#">筆記本<span>></span></a></li><li><a href="#">電視盒子<span>></span></a></li><li><a href="#">路由器<span>></span></a></li><li><a href="#">移動電源<span>></span></a></li><li><a href="#">耳機 音響<span>></span></a></li><li><a href="#">保護套 貼膜<span>></span></a></li><li><a href="#">錢財 支架 <span>></span></a></li><li><a href="#">箱包 服飾<span>></span></a></li><li><a href="#">生活周邊<span>></span></a></li></ul></div><div class="two3"><a href="#"><img src="xiaomi.png" alt="小米"></a></div></div><div class="there"><div class="there1"><a href="#"><img src="tu1.png" alt="" class="tu1"></a></div><div class="there2"><a href="#"><img src="tu2.png" alt=""></a></div><div class="there2"><a href="#"><img src="tu3.png" alt=""></a></div><div class="there2"><a href="#"><img src="tu4.png" alt=""></a></div></div><div class="four"><div class="four1"><h2>小米明星單品</h2></div><div class="four2"><div class="four3"><a href="#"><img src="four3.1.png" alt=""></a></div><div class="four3"><a href="#"><img src="four3.2.png" alt=""></a></div><div class="four3"><a href="#"><img src="four3.3.png" alt=""></a></div><div class="four3"><a href="#"><img src="four3.4.png" alt=""></a></div><div class="four3"><a href="#"><img src="four3.5.png" alt=""></a></div></div></div><div class="five"></div><div class="six"></div><div class="seven"></div><div class="eight"></div><div class="nine"></div><div class="ten"></div></div></body></html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.