用html设计一个静态网页_学生个人静态网页制作模板

用html设计一个静态网页_学生个人静态网页制作模板用HTML和CSS制作简单的静态网页(小米商城)网页效果如下:代码如下(第一次写静态网页,中间css代码和html代码没有分离,所以代码可能有点乱还请见谅)1、css代码 /*——————————————–01———————————————————–*/ *{ margin:0; padding:0; } /*清除标

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

用HTML和CSS制作简单的静态网页(小米商城)

网页效果如下:
在这里插入图片描述

代码如下

(第一次写静态网页,中间css代码和html代码没有分离,所以代码可能有点乱还请见谅)
1、css代码

	/*--------------------------------------------01-----------------------------------------------------------*/
			*{ 
   
				margin: 0;
				padding: 0;
			}
			
			/*清除标志*/
			li{ 
   
				list-style: none;
				
			}
			
			/*清除下划线*/
			a{ 
   
				text-decoration: none;
				
				
			}
			.tp{ 
   
				height: 120px;
				width: 1360px;
			}
			
			/*把li向左浮动,然后设置一个右边的外边距(就是空格)*/
			.ul li{ 
   
			
				float: left;
				padding-right: 15px;
				
			}
			.ul li a{ 
   
				color: rgb(176,176,176);
			}
			.ul li a:hover{ 
   
				color: white;
			}
			
			/*------------------------------------------02-------------------------------------------------------------*/
			
			.shopping{ 
   
				
				float: right;
			}
			
			/*a是内联元素,先改成块元素,然后设置外边距*/
			.shopping a{ 
   
				display: block;
				padding: 0px 50px;
				color: rgb(176,176,176);
			}
			.shopping a:hover{ 
   
				background-color: saddlebrown;
			}
			
			.right{ 
   	
				float: right;				
			}
			.right a{ 
   
				padding-right: 10px;
				color: rgb(176,176,176);
			}
			.right a:hover{ 
   
				color: white;
			}
			
			
			
			.all{ 
   
				width: 90%;/* 只占父标签的百分之90的宽度 */
				margin: 0 auto;
				overflow: hidden;/*清除浮动*/
			}
			.top-boss{ 
   
				background-color: black;
				line-height: 40px;
			}
			
			
			
			
			/*-------------------------------------------03------------------------------------------------------------*/
			
			
			.img{ 
   
				float: left;
				margin: 23px 190px 0 0;
				
			}
			
			.second-ul li{ 
   
				float: left;
				padding-right: 25px;
			}
			.second-ul li a:hover{ 
   
				color: coral;
			}
			
			.input{ 
   
				float: right;
			}
			.input input{ 
   
				width: 249px;
				height: 45px;
				border:1px solid #dfdfdf;
			}
			
			.input input:focus{ 
   
				 background-color: whitesmoke;
				 
			}
			.ss{ 
   
				float: right;
				margin: 27px 0 0 0;
			}
			.all2{ 
   
				/*解决高度塌陷*/
				overflow: hidden;
				background-color: white;
				
				height: 100px;
				/*li高度居中*/
				line-height: 100px;
				width: 90%;
				/*宽度居中*/
				margin: 0 auto;
			}
			
			
			
			/*---------------------------------------------04----------------------------------------------------------*/
			
			.center-img{ 
   
				float: right;
			}
			.left0 ul{ 
   
				margin: 20px 0 ;
			}
			
			.left0 li a { 
   
				display: block;
				line-height: 42px;
				background-color: rgb(114,135,157);
				color: white;
				
				
			}
			
			.left0 li a:hover{ 
   
				background-color: rgb(255,103,0);
			}
			
			.center-boss{ 
   
				overflow: hidden;
				width: 90%;
				height: 460px;
				/*宽度居中*/
				margin: 0 auto;
				background-color: rgb(114,135,157);
			}
			
			
			
			/*----------------------------------------------05---------------------------------------------------------*/
			
			
			
			.center-two{ 
   
				background-color: rgb(95,87,80);
				height: 170px;
				width: 220px;
				margin: 15px 15px 15px 0;
			}
			.center-two ul div li{ 
   
				font-size: 12px;
			}
			.center-two ul div { 
   
				float: left;
				margin: 5px;
				
			}
			
			.center-two ul{ 
   
				overflow: hidden;
				margin: 0 0 0 15px;
			}
			
			
			
			
			.center-two-one ul li{ 
   
				float: right;
				margin: 15px 0 0 15px;
				
			}
			.center-two-one ul li img{ 
   
				height: 170px;
				width: 317px;
			}
			#a{ 
   
				overflow: hidden;
				width: 90%;
				/*height: 170px;*/
				margin: 0 auto;
				
				
			}
			#a{ 
   
				background-color: white;
			}
			
			
			/*----------------------------------------------小米闪购---------------------------------------------------------*/
			.zifu{ 
   
				height: 58px;
				background-color: rgb(245,245,245);
				overflow: hidden;
			}
			.zifu h2{ 
   
				float: left;
				line-height: 58px;
				font-size: 22px;
				font-weight: 200;
			}
			.zifu a{ 
   
				line-height: 58px;
				display: block;
				float: right;
				background-color: rgb(245,245,245);
			}
			.sangou-one{ 
   
				float: left;
				/*margin: 0 0 15 0px;*/
				width: 100px;
			}
			.sangou-two ul li{ 
   
				float: right;
				margin: 0 0 10px 10px;
			}
			.sangou{ 
   
				overflow: hidden;
				background-color: rgb(245,245,245);
				width: 90%;
				margin: 0 auto;
			}
			#q a img{ 
   
				
				margin: 0 0 10px 0;
				
			}
			/*----------------------------------------------手机---------------------------------------------------------*/
			.phone-one{ 
   
			height: 58px;
			background-color: rgb(245,245,245);
			overflow: hidden;
			}
			.phone-one h2{ 
   
				float: left;
				line-height: 58px;
				font-size: 22px;
				font-weight: 200;
			}
			.phone-one a{ 
   
				display: block;
				color: black;
				float: right;
				line-height: 58px;
				
			}
			.phone-one a:hover{ 
   
				color: orangered;
			}
			
			.phone-two{ 
   
				float: left;
			}
			
			.phone-three a img{ 
   
				padding:  0 0 10px 9px;
				float: right;
			}
			.phone{ 
   
				overflow: hidden;
				background-color: rgb(245,245,245);
				width: 90%;
				margin: 0 auto;
			}
			.phone-bottom{ 
   
				margin-bottom: 9px;
			}
			
			
			/*----------------------------------------------家电-搭配--智能-----------------------------------------------------*/
			.jiadian-top{ 
   
				background-color:  rgb(245,245,245);
				overflow: hidden;
			}
			.jiadian-top h2{ 
   
				float: left;
				line-height: 58px;
				font-size: 22px;
				font-weight: 200;
			}
			.jiadian-top a{ 
   
				/*display: block;*/
				color: black;
				float: right;
				line-height: 58px;
			}
			.jiadian-top a:hover{ 
   
				color: orange;
				text-decoration: underline;
				
			}
			
			.jiadian{ 
   
				overflow: hidden;
				background-color:  rgb(245,245,245);
				width: 90%;
				margin: 0 auto;
			}
			
			.jiadian-left{ 
   
				float: left;
			}
			.jiadian-left a img{ 
   
				margin-bottom: 9px;
			}
			.jiadian-right a img{ 
   
				float: right;
				margin: 0 0 9px 9px;
			}
			.much{ 
   
				float: right;
				margin: 0 0 9px 9px;
			}
			.jiadian-buttom{ 
   
				margin-bottom: 9px;
			}
			
			
			/*--------------------------------------------底部导航条----------------------------------------*/
			
			.last-top{ 
   
				overflow: hidden;
				background-color: white;
				width: 90%;
				margin: 0 auto;
			}
			.last-top ul li { 
   
			
				float: left;				
				height: 80px;
				line-height: 80px;
				margin: 0 70px;
			}
			.last-top ul li a{ 
   
				color: rgb(97,97,97);
			}
			.last-top ul li a:hover{ 
   
				color: orange;
			}
			
			.last-center .dl dt{ 
   
				margin: 40px 0 26px;
				font-size: 14px;
				
			}
			.last-center .dl{ 
   
				float: left;
				width: 160px;
			}
			.last-center .dl dd{ 
   
				font-size: 12px;
				margin: 10px 0 0 0;
				
			}
			
			.last-center{ 
   
				overflow: hidden;
				width: 90%;
				margin: 0 auto;
				background-color: white;
				margin-bottom: 45px;
			}
			.last-center .dl a dd{ 
   
				color: rgb(97,97,97);
			}
			.last-center .dl a dd:hover{ 
   
				color: orange;
			}
			
			/*--------------------------------------最底部----------------------------------------*/
			.img{ 
   
				
				float: left;
				margin: 30px 13px 0 0;
				
			}
			
			.list{ 
   
				margin: 30px 0 0 0 ;
				float: left;
				
			}
			.p a{ 
   
				font-size:11px ;
				color: rgb(97,97,97);
			}
			.p a:hover{ 
   
				color: orange;
			}
			.p1 a{ 
   
				font-size:11px ;
				color: rgb(97,97,97);
			}
			.p1 a:hover{ 
   
				color: orange;
			}
			.p2 a{ 
   
				font-size:11px ;
				color: rgb(176,176,176);
			}
			.p2 a:hover{ 
   
				color: orange;
			}
			.p2 span{ 
   
				font-size:11px ;
				color: rgb(176,176,176);
			}
			.last-last{ 
   
				overflow: hidden;
				/*background-color: deepskyblue;*/
				width: 90%;
				margin: 0 auto;
				
			}

2、HTML代码

<!--/*----------------------------------------1---------------------------------------------------------------*/-->
		<div class="tp">
			<img src="img/tp.png"/>
		</div>
		<!--/*----------------------------------------2---------------------------------------------------------------*/-->
		<div class="top-boss">
			<div class="all">
				<div class="left">
					<ul class="ul">
						<li><a href="">小米商城</a></li>
						<li><a href="">MIUI</a></li>
						<li><a href="">loT</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="">下载app</a></li>
						<li><a href="">智能生活</a></li>
					</ul>
				</div>
				<div class="shopping">
					<a href="" >购物车</a>
				</div>
				<div class="right">
					<a href="">登录</a>
					<a href="">注册</a>
					<a href="">消息通知</a>
				</div>
			</div>
		</div>
		<!--/*--------------------------------------------3-----------------------------------------------------------*/-->
		<div class="top-boss-2">
			<div class="all2">
				<div class="img">
					<a href=""><img src="img/logo-footer.png"/></a>
				</div>	
				
				
				<div class="second-ul">
					<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>
				
				<div class="ss">
					<a href=""><img src="img/ss.png" style="display: block;"/></a>
				</div>
				<div class="input">
					<form action="" method="post">
						<input type="text" size="1"/>
					</form>
					
				</div>
					
			</div>
		</div>
	<!--/*------------------------------------------4-------------------------------------------------------------*/-->
		<div >
			<div class="center-boss">
				<div class="center-img">
					<img src="img/cen.png"/>
				</div>
				
				<div class="left0">
					<ul>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机 电话卡</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电视 盒子</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;笔记本 平板</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家电 插线板</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出行 穿戴</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能 路由器</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电源 配件</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;健康 儿童</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;耳机 音响</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						<li><a href=""><span class="li">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生活 箱包</span><span id="litwo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></span></a></li>
						
					
					</ul>
				</div>
				
				
			</div>
				
		</div>
	 <!--/*----------------------------------------------5---------------------------------------------------------*/-->
		<div >
			<div id="a">


				
				<div class="center-two-one">
					<ul>
						<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340"/></a></li>
						<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340"/></a></li>
						<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340"/></a></li>
					</ul>
					
				</div>
				
				<div class="center-two"">
					<ul>
						<div >						
							<li><a href="" id="lia"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48"/></a></li>
							<li><a href=""style=" color: rgb(207,204,202);;"id="lia">企业团购</a></li>
						</div>
						<div>
							
							<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"/></a></li>
							<li><a href=""style="color: rgb(207,204,202);">小米秒杀</a></li>
						</div>
						<div>
							
							<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48"/></a></li>
							<li><a href=""style="color: rgb(207,204,202);">F码通道</a></li>
						</div>
						<div>
							
							<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48"/></a></li>
							<li><a href=""style="color: rgb(207,204,202);">米粉卡</a></li>
						</div>
						<div>
							
							<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"/></a></li>
							<li><a href=""style="color: rgb(207,204,202);">以旧换新</a></li>
						</div>
						<div>
							
							<li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48"/></a></li>
							<li><a href=""style="color: rgb(207,204,202);">话费充值</a></li>
						</div>
					</ul>
					
				</div>
		
				
			</div>	
			
		</div>
	<!--/*----------------------------------------------小米闪购--------------------------------------------------------*/-->
	
	<div style="background-color: rgb(245,245,245);">

			<div class="sangou">
				<div class="zifu">
					<h2>小米闪购</h2>
					<a href="">< ></a>
				</div>
				<div class="sangou-one">
					<img src="img/5.png"/>
				</div>
				<div class="sangou-two">
					<ul>
						<li><a href=""><img src="img/1.png"/></a></li>
						<li><a href=""><img src="img/2.png"/></a></li>
						<li><a href=""><img src="img/3.png"/></a></li>
						<li><a href=""><img src="img/4.png"/></a></li>
					</ul>
				</div>
				<div id="q">
					<a href=""><img src="img/1.1.png"/></a>
				</div>
			</div>
	</div>
		
		
	<!--/*----------------------------------------------手机--------------------------------------------------------*/-->

	<div style="background-color: rgb(245,245,245);" >
			<div class="phone">
				<div class="phone-one">
					<h2>手机</h2>
					<a href="">查看全部</a>
				</div>
				<div class="phone-two">
					<a href=""><img src="img/phone-left.png"/></a>
				</div>
				<div class="phone-three">
					<a href=""><img src="img/phone1.png"/></a>
					<a href=""><img src="img/phone1.png"/></a>
					<a href=""><img src="img/phone1.png"/></a>
					<a href=""><img src="img/phone1.png"/></a>
					<a href=""><img src="img/phone1.png"/></a>
					<a href=""><img src="img/phone1.png"/></a>
					<a href=""><img src="img/phone1.png"/></a>
					<a href=""><img src="img/phone1.png"/></a>
				</div>
				<div class="phone-bottom">
					<a href=""><img src="img/phont-bottom.png"/></a>
				</div>
				
			</div>
	</div>
	<!--/*----------------------------------------------家电--------------------------------------------------------*/-->
	
	<div style="background-color: rgb(245,245,245);">
		<div class="jiadian">
			<div class="jiadian-top">
				<h2>家电</h2>
				<a href="">热门影音</a>
				<a href="" style="margin: 0 20px 0 0 ;">家电</a>				
			</div>
			
			<div class="jiadian-left" style="width: 235px;">
				<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c4de5f15f6dc9946e5d0827fd96d71.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
				<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7e03c0fe4af4d613603f22aaa8e0ea00.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
			</div>
			<div class="jiadian-right">
				
				<a href=""><img src="img/jiadian.png"/></a>
				<a href=""><img src="img/jiadian.png"/></a>
				<a href=""><img src="img/jiadian.png"/></a>
				<a href=""><img src="img/jiadian.png"/></a>
				
				<div class="much" style="width: 235px;">
					<a href=""><img src="img/jia.png"/></a>
					<a href=""><img src="img/much.png"/></a>
				</div>
				
				<a href=""><img src="img/jiadian.png"/></a>
				
				<a href=""><img src="img/jiadian.png"/></a>
				<a href=""><img src="img/jiadian.png"/></a>
				
			</div>
			<div class="jiadian-buttom">
				<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a>
			</div>
		</div>
	</div>
	<!--/*----------------------------------------------智能--------------------------------------------------------*/-->
	<div style="background-color: rgb(245,245,245);">
		<div class="jiadian">
			<div class="jiadian-top">
				<h2>智能</h2>
				<a href="">安防</a>
				<a href="" style="margin: 0 20px 0 0;">出行</a>
				<a href="" style="margin: 0 20px 0 0 ;">热门</a>				
			</div>
			
			<div class="jiadian-left" style="width: 235px;">
				<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c23f5b9a927b2dc49c25277e07727c.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
				<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a660ce095e8f553a9ed1515265f4e9fc.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
			</div>
			<div class="jiadian-right">
				
				<a href=""><img src="img/zhi.png"/></a>
				<a href=""><img src="img/zhi.png"/></a>
				<a href=""><img src="img/zhi.png"/></a>
				<a href=""><img src="img/zhi.png"/></a>
				
				<div class="much" style="width: 235px;">
					<a href=""><img src="img/zhin.png"/></a>
					<a href=""><img src="img/much.png"/></a>
				</div>
				
				<a href=""><img src="img/zhi.png"/></a>
				<a href=""><img src="img/zhi.png"/></a>
				<a href=""><img src="img/zhi.png"/></a>
				
			</div>
			<div class="jiadian-buttom">
				<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45207e414f661234bfc3909d11ad2bab.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a>
			</div>
		</div>
	</div>
	
	<!--/*----------------------------------------------搭配--------------------------------------------------------*/-->
	<div style="background-color: rgb(245,245,245);">

		<div class="jiadian">
			<div class="jiadian-top">
				<h2>搭配</h2>
				<a href="">耳机音箱</a>
				<a href="" style="margin: 0 20px 0 0 ;">热门</a>				
			</div>
			
			<div class="jiadian-left" style="width: 235px;">
				<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a00bdd568dbc2b02f8fe0fa8d1b46f28.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
				<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6874615b3c50e837ffe532eb6ea4ef1a.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a>
			</div>
			<div class="jiadian-right">

				<a href=""><img src="img/jiadian.png"/></a>
				<a href=""><img src="img/jiadian.png"/></a>
				<a href=""><img src="img/jiadian.png"/></a>
				<a href=""><img src="img/jiadian.png"/></a>
				
				<div class="much" style="width: 235px;">
					<a href=""><img src="img/jia.png"/></a>
					<a href=""><img src="img/much.png"/></a>
				</div>
				
				<a href=""><img src="img/jiadian.png"/></a>
				
				<a href=""><img src="img/jiadian.png"/></a>
				<a href=""><img src="img/jiadian.png"/></a>
				
			</div>
			<div class="jiadian-buttom">
				<a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1615d1842fe85914a545297836a44271.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a>
			</div>
		</div>
	</div>	
	
	<!-----------------------------------------------------------底部导航条----------------------------------------->
	<div >
		<div class="last">
			<div class="last-top">
				<ul>
					<li><a href="">预约维修服务</a></li>
					<li><a href="">7天无理由退货</a></li>
					<li><a href="">15天免费换新</a></li>
					<li><a href="">满99包邮</a></li>
					<li><a href="">520余家售后网点</a></li>
				</ul>
				
				
				
			</div>
				<hr />
			<div class="last-center">
				<dl class="dl">
					<dt>帮助中心</dt>
					<a href=""><dd>账户管理</dd></a>
					<a href=""><dd>购物指南</dd></a>
					<a href=""><dd>订单操作</dd></a>
					
				</dl >
				<dl class="dl">
					<dt>服务支持</dt>
					<a href=""><dd>售后政策</dd></a>
					<a href=""><dd>自动服务</dd></a>
					<a href=""><dd>相关下载</dd></a>	
				</dl>
				<dl  class="dl">
					<dt>线下门店</dt>
					<a href=""><dd>小米之家</dd></a>
					<a href=""><dd>服务网点</dd></a>
					<a href=""><dd>授权体验店</dd></a>	
				</dl>
				<dl class="dl">
					<dt>关于小米</dt>
					<a href=""><dd>加入小米</dd></a>
					<a href=""><dd>了解小米</dd></a>
					<a href=""><dd>投资者关系</dd></a>
					<a href=""><dd>企业社会责任</dd></a>
					<a href=""><dd>廉洁举报</dd></a>		
				</dl>
				<dl  class="dl">
					<dt>关注我们</dt>
					<a href=""><dd>新浪微博</dd></a>
					<a href=""><dd>官方微信</dd></a>
					<a href=""><dd>联系我们</dd></a>
					<a href=""><dd>公益基金会</dd></a>	
				</dl>
				<dl  class="dl">
					<dt>特色服务</dt>
					<a href=""><dd>F码通道</dd></a>
					<a href=""><dd>礼物码</dd></a>
					<a href=""><dd>防伪查询</dd></a>
				</dl>
			</div>
		</div>
		
	</div>
	<!---------------------------------------------------最底部---------------------------------------------------------------------------->
	<div style="background-color: rgb(245,245,245); ">
			<div class="last-last">
				<div class="img">
					<img src="img/logo-footer.png"/>
				</div>
				<div class="list">
					<p class="p">
						<a href="">小米商城</a>
						<a href="">MIUI</a>
						<a href="">米家</a>
						<a href="">米聊</a>
						<a href="">多看</a>
						<a href="">游戏</a>
						<a href="">政企服务</a>
						<a href="">小米天猫店</a>
						<a href="">小米集团隐私政策</a>
						<a href="">小米公司儿童信息保护规则</a>
						<a href="">小米商城隐私政策</a>
						<a href="">小米商城用户协议</a>
						<a href="">问题反馈</a>
	
					</p>
					
						
					<p class="p1">
						<a href="">北京互联网法院法律服务工作站</a>
						<a href="">中国消费者协会</a>
						<a href="">北京市消费者协会</a>
					</p>
					
					
					<p class="p2">
						<a href="">Mi.com</a>
						<span>京ICP证110507号</span>
						
						<a href="">京icp备10046444号</a>
						<a href="">京公网安备11010802020134号</a>
						<a href="">京网文[2020]0276-042号</a>
						<br />
						<a href="">(京)网械平台备字(2018)第00005号</a>
						<a href="">互联网药品信息服务资格证 ()-非经营性-2014-0090</a>
						<a href="">营业执照</a>
						<a href="">医疗器械质量公告</a>
						<br />
						<a href="">增值电信业务许可证</a>
						<a href=""> 网络食品经营备案 京食药网食备202010048  </a>
						<a href="">食品经营许可证</a>
						<br />
						
               			<span>违法和不良信息举报电话:171-5104-4404</span> 
						<a href="">知识产权侵权投诉</a>
						<a href="">本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</a>
						
					</p>
				</div>
					
		</div>		
	</div>
	</body>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/197395.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 为什么要设置环境变量,设置环境变量的作用在哪里[通俗易懂]

    为什么要设置环境变量,设置环境变量的作用在哪里[通俗易懂]1、什么是环境变量引用百度百科里面的解释:环境变量是在操作系统中一个具有特定名字的对象,它包含了一个或者多个应用程序所将使用到的信息。看到这里我相信大家可能还是有所疑惑,但是,不急,接着看。2、为什么需要环境变量windows系统下,假如我们安装了某一款软件,安装结束后,在安装目录会生成一个该软件的.exe文件,双击该文件,我们就能启动软件。但是难道我们每次要运行该软件的时候都要先找到该.e

    2022年10月29日
  • java 流水线模式_流水线设计模式实现

    java 流水线模式_流水线设计模式实现这是关于管道实现的设计问题。以下是我的天真实施。流水线设计模式实现接口在管道的各个步骤/阶段:在流水线的步骤/阶段的publicinterfaceStep{publicUexecute(Tinput);}具体实现:publicclassStepOneimplementsStep{@OverridepublicIntegerexecute(Integerinput){r…

  • 傅里叶变换、拉普拉斯、Z变换、离散傅里叶变换的关系[通俗易懂]

    傅里叶变换、拉普拉斯、Z变换、离散傅里叶变换的关系[通俗易懂]本帖子为本人基于网络资源整理的笔记,很大部分来源于帖子:傅里叶变换https://blog.csdn.net/shenziheng1/article/details/53363436傅里叶变换了解三种变换前我们先要简单的了解一下时域和频域的概念:**什么是傅里叶变换高等数学中一般是从周期函数的傅里叶级数开始介绍的,这里也不例外。简单的说,从高中我们就学过一个理想的波可…

    2022年10月27日
  • 钉钉E应用开发踩过的小坑之钉钉官网有两个全局错误码链接,啥区别??

    钉钉E应用开发踩过的小坑之钉钉官网有两个全局错误码链接,啥区别??童鞋们注意下:做钉钉平台内部开发的有没有注意到官网有两个全局错误码链接(我只看到两个目前):https://open-doc.dingtalk.com/microapp/serverapi2/npfg02这是一个含错误码和说明(我一直看的是这个全局错误码,只看说明的话满脑子是问号啊O(∩_∩)O哈哈~)而https://open-doc.dingtalk.com/doc2/detai…

  • matlab超前滞后校正装置设计_matlab劳斯判据

    matlab超前滞后校正装置设计_matlab劳斯判据且1引言不确定性与时滞是工业过程中普通存在的现象,这使得系统的分析与综合变得更加复杂和困难,同时也是导致系统不稳定和性能恶化的主要因素.因此,对不确定时滞系统的鲁棒控制问题进行研究,具有重要的理论意义和实际应用价值.近年来,不确定时滞系统的稳定性研究得到了广泛的关注匡5}.中立时滞系统作为一类非常重要的控制系统,其稳定性研究己有不少有价值的结论{3一11}.中立时滞系统的稳定条件可分为两大类:时滞…

  • 移动端网页实现拨打电话功能的几种方法

    移动端网页实现拨打电话功能的几种方法

    2021年10月17日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号