小米页面.css

其他 2018-05-30 13:17:35 阅读次数: 1 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		input {
			outline: 0;/* 清除外边线*/
		}
		ul {
			list-style: none;
		}
		a {
			text-decoration: none;
			font-family: "楷体";
		}
/*通栏*/		
		.daohang {
			height: 40px;
			background-color: #333333;
		}

/*版心*/		
		.daohang .nav {
			width: 1226px;
			height: 40px;
			/*background-color: pink;*/
			margin: 0 auto ;
		}
		.ul1 a {
			float: left;
			margin: 14px 0 0 8px;
			font-size: 12px;
			color: #fff;

		}
		.ul2 a {
			float: right;
			margin: 12px 10px;
			font-size: 12px;
			color: #fff;
		}
		.daohang .nav a:hover {
			background-color: #fff;
			color: #000;
			box-shadow: 0 0 20px 20px #fff;
			border-radius: 15px;
		}

/*版心第二排*/
		.one {
			width: 1226px;
			height: 100px;
			/*background-color: red;*/
			margin: 0 auto;
			box-sizing: border-box;
		}
		.one img {
			margin-top: 22px;
			float: left;
		}
		.one ul {
			margin-left: 179px;
			float: left;
			height: 100px;
			line-height: 100px;
		}
		.one li {
			float: left;
		}
		.one ul a {
			color: #000;
			margin: 0 10px;
		}
		.one ul a:hover {
			background-color: #fff;
			border-radius: 15px;
			box-shadow: 0 0 20px 20px #beefed;
		}
		.one .one1 {
			width: 294px;
			height: 49px;
			/*background-color: skyblue;*/
			float: right;
			margin: 25px 0;
			border: 1px solid #dedede;
			position: relative;
		}
		.one1 input[type=text] {
			height: 49px;
			width: 224px;
			/*background-color: red;*/
			float: left;
			border: 0;
			padding-left: 10px;
		}
		.one1 input[type=submit] {
			height: 49px;
			width: 60px;
			float: left;
			border: 0;
			background: url("sousuo.png") no-repeat center #fff;
			border-left: 1px solid #dedede;
		}
		/*.one1 img {
			width: 60px;
			height: 49px;
			float: right;
		}*/

/*版心第三排*/
		.two {
			height: 460px;
			width: 1226px;
			/*background-color: pink;*/
			margin: 0 auto;
			box-sizing: border-box;
		}
		.two1 {
			height: 435px;
			width: 234px;
			background-color: #625D58;
			float: left;
			padding-top: 25px;
		}
		.two .two1 li {
			padding: 10px 20px;
			display: block;
			padding-left: 
		}
		.two .two1 a {
			color: #fff;
		}
		.two .two1 li:hover {
			background-color: #000;
			border-radius: 15px;
			box-shadow: 0 0 20px 20px #fff;
		}
		.two img {
			float: right;
		}
		.two1 span {
			float: right;
		}

/*版心第四排*/
	.three {
		width: 1226px;
		height: 170px;
		background-color: pink;
		margin: 10px auto;
	}
	.three1 {
		height: 170px;
		width: 234px;
		background-color: #5F5750;
		float: left;
	}
	.three2 {
		height: 170px;
		width: 992px;
		/*background-color: blue;*/
		float: right;
	}
	.three2 img {
		width: 330px;
		height: 170px;
		float: left;
	}
	.three1 li {
		float: left;
		width: 78px;
		height: 85px;
		line-height: 85px;
		text-align: center;
	}
	.three1 li a {
		color: #fff;
		font-weight: 700;
	}
	.three1 li img {
		display: block;
		margin: 0 auto;
	}
	
/*版心第五排*/
	.four {
		width: 1226px;
		height: 424px;
		/*background-color: pink;*/
		margin: 0 auto 40px;
	}
	.four1 {
		width: 1226px;
		height: 84px;
	/*	background-color: red;*/
	}
	.four1 h3 {
		float: left;
		margin-top: 43px;
	}
	.four1 div {
		float: right;
		width: 70px;
		height: 22px;
		
		margin-top: 50px; 
	}
	input:nth-child(1) {
		width: 35px;
		height: 22px;
		float: left;
		background: url("zuo.png") no-repeat ;
	}
	input:nth-child(2) {
		width: 35px;
		height: 22px;
		float: left;
		background: url("you.png") no-repeat ;
	}
	.four2 {
		height: 338px;
		width: 1224px;
		/*background-color: blue;*/
	}
	.four2 div {
		width: 234px;
		height: 336px;
	/*	background-color: green;*/
		float: left;
		margin-right: 13px;
		text-align: center;
		border-top: 1px solid orange ;
	}
	.four2 div:nth-child(2n) {
		border-top: 1px solid #E53935;
	}
	.four2 div:nth-child(5) {
		margin-right: 0;
		border-top: 1px solid #00C0A5;
	}
	.four2 div img {
		margin: 46px auto 25px;
	}
	.four2 div h4 {
		font-weight: normal;
		font-size: 16px;
		margin-bottom: 10px;
	}
	.four2 div p {
		margin-bottom: 10px;
		font-size: 14px;
		color: #B0B0B0
	}
	.four2 div a {
		color: #FF6709
	}

/*版心第六排*/
		.five {
			width: 1226px;
			height: 732px;
			/*background-color: pink;*/
			margin: 0 auto 0;
			overflow: hidden;
		}
/*第一个盒子*/
		.five1 {
			height: 40px;
			width: 1226px;
			/*background-color: red;*/
		}
		.five1 h4 {
			height: 40px;
			float: left;
		}
		.five1 ul li {
			float: right;
			margin-right: 30px;
		}
		.five1 ul li:nth-child(1) {
			margin-right: 0;
		}
		.five1 li .remen {
			color: #FF6700;
			border-bottom: 2px solid #FF6700;
		}
/*第二个盒子*/
		.five2 {
			width: 1226px;
			height: 614px;
			
		}
		.five2 .nav {
			width: 234px;
			height: 614px;
			background-color: blue;
			float: left;
			overflow: hidden;
		}
		.five2 .nav1 {
			width: 992px;
			height: 614px;
			/*background-color: green;*/
			float: right;
		}
		.nav1 li {
			width: 234px;
			height: 299px;
		/*	background-color: red;*/
			float: left;
			margin: 0 0 14px 14px;
			text-align: center;
		}
		.nav1 li img {
			margin: 20px auto 46px;
		}
		.nav1 li h4 {
			font-weight: normal;
			font-size: 16px;
			margin: 15px auto;
		}
		.nav1 li p {
			font-size: 14px;
			color: #B0B0B0;
		}
		.nav1 li a {
			color: #FF6700;
		}
		.nav1 li s {
			color: #B0B0B0;
		}

/*为你推荐*/
		.fast {
			height: 342px;
			width: 1226px;
			/*background-color: pink;*/
			margin: 0 auto;
		}
		.fast1 {
			width: 1226px;
			height: 40px;
			/*background-color: red;*/
		}
		.fast1 h3 {
			float: left;
		}
		.fast1 div {
			float: right;
		}
		.fast2 {
			width: 1226px;
			height: 302px;
			/*background-color: blue;*/
			overflow: hidden;
		}
		.fast2 div {
			width: 234px;
			height: 302px;
			/*background-color: pink;*/
			float: left;
			margin-right: 14px;
			text-align: center;
			padding-top: 20px;
		}
		.fast2 div h4 {
			font-weight: normal;
			margin: 14px auto ;
		}
		.fast2 div a {
			color: #FF6700;
		}
		.fast2 div p {
			color: #757575;
			margin-top: 17px;
			font-size: 14px;
		}
		.fast2 div:nth-child(5) {
			margin-right: 0;
		}
	</style>
</head>
<body>
<!-- 导航栏 -->
	<div class="daohang">
		<div class="nav">
			<ul class="ul1">
				<li><a href="#">小米商城</a></li>
				<li><a href="#">MIUI</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="#">Select Region</a></li>
			</ul>
			<ul class="ul2">
				<li><a href="#">登录</a></li>
				<li><a href="#">注册</a></li>
				<li><a href="#">消息通知</a></li>
				<li><a href="#">购物车</a></li>
			</ul>
		</div>
	</div>
<!-- 版心第2排 -->
	<div class="one">
		<img src="mi.png">
		<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>
		</ul>
		<div class="one1">
			<input type="text" placeholder="红米4x  小米Note 3直降300">
			<input type="submit" value="">
		</div>
	</div>
<!-- 版心第3排 -->
	<div class="two">
		<div class="two1">
			<ul>
				<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="two2">
			<a href="#"><img src="xiaomi.png" alt=""></a>
		</div>
	</div>
<!-- 版心第4排 -->
	<div class="three">
		<div class="three1">
			<ul>
				<li><img src="sj_r2_c2.png" alt=""><a href="#">选购手机</a></li>
				<li><img src="" alt=""><a href="#">企业团购</a></li>
				<li><img src="" alt=""><a href="#">F码通道</a></li>
				<li><img src="" alt=""><a href="#">米粉卡</a></li>
				<li><img src="" alt=""><a href="#">以旧换新</a></li>
				<li><img src="" alt=""><a href="#">话费充值</a></li>
			</ul>
		</div>
		<div class="three2">
			<a href="#"><img src="tu2.png"></a>
			<a href="#"><img src="tu3.png"></a>
			<a href="#"><img src="tu4.png"></a>
		</div>
	</div>
<!-- 版心第5排 -->
	<div class="four">
		<div class="four1">
			<h3>小米明星单品</h3>
			<div>
				<input type="submit" value="">
				<input type="submit" value="">
			</div>
		</div>
		<div class="four2">
			<div>
				<img src="tou.png" alt="">
				<h4>米家智能摄像机云台版</h4>
				<p>红外夜视 720P分辨率</p>
				<a href="#">199元</a>
			</div>
			<div>
				<img src="shouhuan.png" alt="">
				<h4>小米手环 2</h4>
				<p>OLED显示屏幕 升级计步算法</p>
				<a href="#">149元</a>
			</div>
			<div>
				<img src="yali.png" alt="">
				<h4>米家智能摄像机云台版</h4>
				<p>红外夜视 720P分辨率</p>
				<a href="#">199元</a>
			</div>
			<div>
				<img src="kong.png" alt="">
				<h4>米家空气净化器Pro</h4>
				<p>OLED显示屏幕 激光颗粒物传感器</p>
				<a href="#">1499元</a>
			</div>
			<div>
				<img src="lutouqi.png" alt="">
				<h4>小米路由器3</h4>
				<p>更快更强 不止四天线</p>
				<a href="#">149元</a>
			</div>
		</div>
	</div>
<!-- 版心第6排 -->
	<div class="five">
		<div class="five1">
			<h4>家电</h4>
			<ul>
				<li><a href="#">家居</a></li>
				<li><a href="#">电脑</a></li>
				<li><a href="#">电视影音</a></li>
				<li><a href="#" class="remen">热门</a></li>
			</ul>
		</div>
		<div class="five2">
			<div class="nav">
				<a href="#"><img src="kongqi.png" alt=""></a>
			</div>
			<div class="nav1">
				<ul>
					<li>
						<img src="dianshi.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="dianshi.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="dianshi.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="dianshi.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="dianshi.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="dianshi.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="dianshi.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="dianshi.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
				</ul>
			</div>
		</div>
	</div>
<!-- 版心第7排 -->
	<div class="five">
		<div class="five1">
			<h4>智能</h4>
			<ul>
				<li><a href="#">路由器</a></li>
				<li><a href="#">酷玩</a></li>
				<li><a href="#">健康</a></li>
				<li><a href="#">出行</a></li>
				<li><a href="#" class="remen">热门</a></li>
			</ul>
		</div>
		<div class="five2">
			<div class="nav">
				<a href="#"><img src="xiangji.png" alt=""></a>
			</div>
			<div class="nav1">
				<ul>
					<li>
						<img src="che.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="che.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="che.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="che.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="che.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="che.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="che.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="che.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
				</ul>
			</div>
		</div>
	</div>
<!-- 版心第8排 -->
	<div class="five">
		<div class="five1">
			<h4>周边</h4>
			<ul>
				<li><a href="#">箱包</a></li>
				<li><a href="#">生活周边</a></li>
				<li><a href="#">居家</a></li>
				<li><a href="#">服装</a></li>
				<li><a href="#" class="remen">热门</a></li>
			</ul>
		</div>
		<div class="five2">
			<div class="nav">
				<a href="#"><img src="yanjing.png" alt=""></a>
			</div>
			<div class="nav1">
				<ul>
					<li>
						<img src="yifu.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">19元<s>1199元</s></a>
					</li>
					<li>
						<img src="yifu.png" alt="">
						<h4>小米电视4A 32"<yifu.png/h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">2299元<s>1199元</s></a>
					</li>
					<li>
						<img src="yifu.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="yifu.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="yifu.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="yifu.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="yifu.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
					<li>
						<img src="yifu.png" alt="">
						<h4>小米电视4A 32"</h4>
						<p>64位四核处理器/1GB+4GB大内存</p>
						<a href="#">199元<s>1199元</s></a>
					</li>
				</ul>
			</div>
		</div>
	</div>
<!-- 收尾1 -->
	<div class="fast">
		<div class="fast1">
			<h3>小米明星单品</h3>
			<div>
				<input type="submit" value="">
				<input type="submit" value="">
			</div>
		</div>
		<div class="fast2">
			<div>
				<img src="xiaomi5x.png" alt="">
				<h4>小米5x 全网通版 4GB内存</h4>
				<a href="#">1499元</a>
				<p>1911人好评</p>
			</div>
			<div>
				<img src="Note3.png" alt="">
				<h4>小米Max2 全网通版 4GB内存</h4>
				<a href="#">1699元</a>
				<p>3.1万人好评</p>
			</div>
			<div>
				<img src="max2.png" alt="">
				<h4>小米6 全网通版 4GB内存</h4>
				<a href="#">2299元</a>
				<p>1好评</p>
			</div>
			<div>
				<img src="xiaomi6.png" alt="">
				<h4>小米Note3 全网通版 4GB内存</h4>
				<a href="#">2299元</a>
				<p>1.1万人好评</p>
			</div>
			<div>
				<img src="qianbao.png" alt="">
				<h4>小米简约头层小牛皮钱包</h4>
				<a href="#">129元</a>
				<p>6488人好评</p>
			</div>
		</div>
	</div>
</body> 
</html>

猜你喜欢

转载自blog.csdn.net/xl4277/article/details/79824981
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022