html+css仿制小米商城首页

学徒在修行

已于 2023-03-18 22:30:38 修改

阅读量1.6w

点赞数 33

文章标签： html css 前端

于 2022-08-25 00:44:54 首次发布

本文链接：https://blog.youkuaiyun.com/m0_53394907/article/details/126515103

版权

一、首先是学习心得

简介:

这是一个仅用css+html实现的页面,不过y页面也用css实现了一些精致的动态效果，比如

老版本小米官网的logo滑动效果
小米的二维码和购物车，导航栏延时下拉效果

关于一些css常用的进阶知识

box-shodow
display的几种用法除了常见的块元素和行内元素的切换,还有行内块的概念,更有使用display:none隐藏块元素，通过伪类：hover去修改可视性，提到的display:none,就不得不说它与visibility: hidden的区别，设置了display: none，那么该元素以及它的所有后代元素都会隐藏，隐藏后的元素无法点击，占据的空间消失；设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。就比如这里的下拉框都是用disply:none,导航栏有个全部商品分类是visibility:hidden;关于可视化还有个overflow:hidden使用到了。
关于浮动和解除浮动效果，多次使用到clear:both,float，在使用claer属性时一般是用伪元素比如::before来实现。
更好的理解了position这个属性，尤其是position:abosult是以最近的开启position：relavetive的父元素原点为原点。
也使用了transitions这个带有延迟效果的属性
关于居中使用到了text-align:center,margin:0 auto;和height，line-height设置大小一样的效果，
关于背景尺寸，使用了box-sizing:border-box
关于优先级，因为下拉框，可能因为优先级问题导致出不来，所有设置下拉框效果时可能需要设置z-index：；
了解到了transparents这种透明颜色，和rgba这种不仅包含颜色还包含透明度的属性；
最后是关于图标字体和网站标题的引用，首先我是在阿里矢量库里下载的文件，导入项目文件，然后引用里面的css，通常在<I>标签里应用相应的类来实现，然后网站标题icon需要下载相应的.ico的文件，然后通过<link type="icon" href=""/>.

二、代码分享

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米商城</title>
		<link rel="stylesheet" href="clear.css">
		<link rel="stylesheet" href="one.css">
		<!-- 字体图标 -->
		<link rel="stylesheet" href="./iconfont/iconfont.css">
		<link rel="stylesheet" href="all.css">
		<!-- 网页图标 -->
		<link rel="icon" href="mi.ico">
		
	</head>
	<body>
		<!-- 頂部導航條 -->
		<div class="topbar-wrapper">
			<!-- 内部容器 -->
			<!-- 左侧导航 -->
			<div class="topbar w">
				<ul class="service">
					<li>
						<a href="#">小米商場</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">MIUI</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">lOT</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">雲服務</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">金融</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">有品</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">小愛開發平台</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">企業團購</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">資質證照</a>
					</li>
					<li class="line"> | </li>
					<li>
						<a href="#">協議規