x小米页面.html

朱雀 2022-05-28 06:21 138阅读 0赞

![20180330212518230][] ![20180330212528880][]

<!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>
    	</div>
    	<div class="there"></div>
    	</div>
    </body>
    </html>

[20180330212518230]: https://img-blog.csdn.net/20180330212518230
[20180330212528880]: /images/20220528/d1541712a26441acb53a1e737c03949f.png