html+css练习（仿小米官网）

半糖不加奶

已于 2023-03-16 23:59:22 修改

阅读量452

点赞数

文章标签： css3 html5 前端

于 2023-03-16 23:56:39 首次发布

本文链接：https://blog.csdn.net/qq_51365907/article/details/129604288

版权

学习了三天的css和html模仿的写出来的，很多标签还是用的模模糊糊，希望大家学习的时候一定要多多敲代码。附源码！！！

头部的小米商城那一部分，其实是通过position: fixed;固定的，翻页的过程中他的位置不变，大家看一看，小白，代码写的比较拉跨。

两张图片分两边排列，是通过相对位置relative和absolute进行固定的;

这里用了dl标签，具体和ul和ol的区别，大家自行查，有机会再发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米</title>
		<link rel="stylesheet" href="css/xiaomi.css" type="text/css">
	</head>
	<body>
		<div id="content">
			<!-- top -->
			<div id="menu">
				
					<img id="miloge" src="img/mlogo.png" >
				
				<div id="text">
					<a href="#" id="id01" class="guanwang">小米官网</a>
					<a href="#" id="id02" class="guanwang">小米商城</a>
					<a href="#" id="id03" class="guanwang">小米影像</a>
					<a href="#" id="id04" class="guanwang">MIUI</a>
					<a href="#" id="id05" class="guanwang">IoT</a>
					<a href="#" id="id06" class="guanwang">云服务</a>
					<a href="#" id="id07" class="guanwang">天星数科</a>
					<a href="#" id="id08" class="guanwang">有品</a>
					<a href="#" id="id09" class="guanwang">小爱开放平台</a>
					<a href="#" id="id10" class="guanwang">企业团购</a>
					<a href="#" id="id11" class="guanwang">Location</a>
				</div>
				<div id="top_right">
					<a href="#" id="login" class="denglu">登录</a>
					<span class="denglu">|</span>
					<a href="#" id="regiest" class="denglu">注册</a>
				</div>
			</div>
			<!-- center -->
			<div>
				<div>
					<img src="./img/m1.jpeg">
				</div>
				<br />
				<div>
					<img src="img/2.jpg"/>
				</div>
				<br />
				<div>
					<img src="./img/m3.jpeg">
				</div>
				<br />
				<div>
					<img src="img/4.jpeg"/>
				</div>
				<br />
				<div>
					<img src="img/m5.jpeg" >
				</div>
				<br />
				<div>
					<img src="img/m6.jpeg">
				</div>
				<br />
				<div id="lr">
					<img src="img/m801.jpeg" id="l">
					<img src="img/m802.jpeg" id="r" >
				</div>
			</div>
			<!-- bottom -->
			<div id="text_bottom">
				
					<dl id="list1">
						<dt>
							<a href="#" id="a">选购指南</a>
						</dt>
						<dd>
							<a href="#" id="a1">手机</a>
						</dd>
						<dd>
							<a href="#" id="a4">手表</a>
					</dl>
					<dl id="list2">
						<dt>
							<a href="#" id="a2">服务中心</a>
						</dt>
						<dd>
							<a href="#" id="a3">申请售后</a>
						</dd>
					</dl>
					<dl id="list3">
						<dt>
							<a href="#" id="a5">线下门店</a>
						</dt>
						<dd>
							<a href="#" id="a6">小米之家</a>
						</dd>
						<dd>
							<a href="#" id="a7">服务网点</a>
						</dd>
					</dl>
					<dl id="list4">
						<dt>
							<a id="a8" >关于小米</a>
						</dt>
						<dd><a href="#"id="a7">了解小米</a></dd>
					</dl>
					<dl id="list5">
						<dt><a href="#" id="a9">联系我们</a></dt>
						<dd><a href="#" id="a7">新浪微博</a></dd>
					</dl>
			</div>
			<div class="bottom_text2">
				<h4>400-100-5678</h4>
				 <p>8:00-18:00 (仅收市话费)</p>
				
					<a href="#">联系客服</a>
			</div>
			<!-- copyright -->
			            <div class="copyright">
			                <img src="img/mlogo.png" id="loge">
			                <div class="co-nav">
			                    <a href="#">小米商城</a><span>|</span>
			                    <a href="#">MIUI</a><span>|</span>
			                    <a href="#">米家</a><span>|</span>
			                    <a href="#">米聊</a><span>|</span>
			                    <a href="#">多看</a><span>|</span>
			                    <a href="#">游戏</a><span>|</span>
			                    <a href="#">路由器</a><span>|</span>
			                    <a href="#">米粉卡</a><span>|</span>
			                    <a href="#">政企服务</a><span>|</span>
			                    <a href="#">小米天猫店</a><span>|</span>
			                    <a href="#">隐私政策</a><span>|</span>
			                    <a href="#">问题反馈</a><span>|</span>
			                    <a href="#">廉政举报</a><span>|</span>
			                    <a href="#">Select Region</a><br>
			                    <p>@mi.com 京ICP证110507号 京ICP备xxxxxxxx号 京公网安备xxxxxxxxxxxxxx号 京网文[xxxx]xxxx-xxx号 <br> 违法和不良信息举报电话: xxx-xxxx-xxx, 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
			                </div>
		
				
		</div>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
html,body{
	width: 100%;
	height: 100%;
}
#content{
	width: 100%;
	height: auto;
	min-width: 1440px;
	position: relative;
}
#menu{
	width: 100%;
	min-width: 1440px;
	position: fixed;
	
}
#miloge{
	width: 60px;
	height: 60px;
	position: absolute;
	top: 10px;
	left: 10px;
}
#text{
	
	text-align: center;
	margin-top: 30px;
	position: relative;
}
.guanwang{
	margin-left:25px ;
	color:white;
	text-decoration: none;
}
#top_right{
	position: absolute;
	right: 10px;
	top: 30px;
}
.denglu{
	margin-right: 25px;
	color: white;
	text-decoration: none;
}
.guanwang:hover{
	color: darkorange;
}
#id01{
	color: orange;
}
.denglu:hover{
	color: darkorange;
}
#lr{
	position: relative;
	
}

#r{
	position: absolute;
	
}
#text_bottom{
	text-align: center;
	display: block;
	position: relative;
	text-decoration: none;
	list-style: none;
	
}

 #list1{
	position: absolute;
	display:inline-block;
	left: 20%;
	
	text-decoration: none;
	} 
#list2{
	position: absolute;
	left: 30%;
}
#list3{
	position: absolute;
	left: 40%;
}
#list4{
	position: absolute;
	left: 50%;
}
#list5{
	position: absolute;
	left: 60%;}
#a{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
	
}
#a1:hover{
	color: orange;
}
#a1{
	text-decoration: none;
	color: grey;
	letter-spacing: 5px;
	line-height: 35px;
}
#a4:hover{
	color: orange;
}
#a4{
	text-decoration: none;
		color: grey;
		letter-spacing: 5px;
		line-height: 35px;
	
}
#a2{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
}
#a3{
	text-decoration: none;
		color: grey;
		letter-spacing: 5px;
		line-height: 35px;
}
#a5{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
}
#a6{
	text-decoration: none;
			color: grey;
			letter-spacing: 5px;
			line-height: 35px;
	
}
#a7{
	text-decoration: none;
			color: grey;
			letter-spacing: 5px;
			line-height: 35px;
	
}
#a8{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
}
#a9{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
}
.bottom_text2{
	position: absolute;
	width: 100%;
	left: 70%;
}
.bottom_text2 h4{
	position: absolute;
	top: 15px;
	font-size: 40px;
	color: #ff6700;
}
.bottom_text2 p{
	position: absolute;
	font-size: 20px;
	top: 60px;
}
.bottom_text2 a{
	position: absolute;
	font-size: 35px;
	text-decoration: none;
	color: aliceblue;
	top: 90px;
	background: #ff6700;
	border: 2px solid #ff6700;
	border-radius: 10px;
	
}
.copyright{
	height: 55px;
	    padding: 350px 10px 0 0;
}
#loge{
	position: absolute;
    width: 45px;
	bottom: 5px;
	left: 36%;
}
.co-nav{
	position: absolute;
	margin-left: 38%;
	color: gray;
	}
.co-nav a{
	color: gray;
}