<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; list-style: none; /*-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;*/ } .two1 { width: 1300px; height: 500px; } .da { padding-left: 40px; } .one { width: 1200px; height: 80px; /*background-color: pink;*/ text-align: center; } .ul li { display: inline; line-height: 50px; } .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; } .two2 { background-color: #271e1e; width: 200px; height: 450px; } .ul2 { padding-top: 18px; } .ul2 li { /*background:green;*/ height: 40px; line-height: 40px; padding-left: 20px; font-size: 10px; margin-top: 0; } .ul a { color: #000; } .ul2 li a { text-decoration: none; color: #fff; display: block; } .ul2 li:hover { background-color: orange; } span { float: right; padding-right: 20px; } .xiaomi { width: 1200px; height: 30px; background-color: #000; } .span1 { display: inline; float: left; } .span1 a { color: #6d6a6a; font-size: 8px; text-decoration: none; margin-right: 5px; } .span2 { display: inline; /* float: right;*/ } .span2 a { text-decoration: none; color: #6d6a6a; font-size: 8px; margin-right: 5px; } /* div .two3{ background: url(xiaomi.jpg) no-repeat; width: 992px; height: 460px; float: right; }*/ a { font-family: "楷体"; } </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=""> <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"> </div> --> </div> </div> <div class="there"></div> </div> </body> </html>
x小米页面.html
猜你喜欢
转载自blog.csdn.net/xl4277/article/details/79763485
今日推荐
周排行