• html+css仿制小米商城首页

    一、首先是学习心得

    简介:

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

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

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

    1. box-shodow

    2.  display的几种用法                                                                                                                    除了常见的块元素和行内元素的切换,还有行内块的概念,更有使用display:none隐藏块元素，通过伪类：hover去修改可视性，提到的display:none,就不得不说它与visibility: hidden的区别，设置了display: none，那么该元素以及它的所有后代元素都会隐藏，隐藏后的元素无法点击，占据的空间消失；设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。就比如这里的下拉框都是用disply:none,导航栏有个全部商品分类是visibility:hidden;关于可视化还有个overflow:hidden使用到了。

    3. 关于浮动和解除浮动效果，多次使用到clear:both,float，在使用claer属性时一般是用伪元素比如::before来实现。
    4. 更好的理解了position这个属性，尤其是position:abosult是以最近的开启position：relavetive的父元素原点为原点。
    5. 也使用了transitions这个带有延迟效果的属性
    6. 关于居中使用到了text-align:center,margin:0 auto;和height，line-height设置大小一样的效果，
    7. 关于背景尺寸，使用了box-sizing:border-box
    8. 关于优先级，因为下拉框，可能因为优先级问题导致出不来，所有设置下拉框效果时可能需要设置z-index：；
    9. 了解到了transparents这种透明颜色，和rgba这种不仅包含颜色还包含透明度的属性；
    10. 最后是关于图标字体和网站标题的引用，首先我是在阿里矢量库里下载的文件，导入项目文件，然后引用里面的css，通常在标签里应用相应的类来实现，然后网站标题icon需要下载相应的.ico的文件，然后通过.

    二、代码分享

    index.html

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>小米商城</title>
    6. 		<link rel="stylesheet" href="clear.css">
    7. 		<link rel="stylesheet" href="one.css">
    8. 		<!-- 字体图标 -->
    9. 		<link rel="stylesheet" href="./iconfont/iconfont.css">
    10. 		<link rel="stylesheet" href="all.css">
    11. 		<!-- 网页图标 -->
    12. 		<link rel="icon" href="mi.ico">
    13. 		
    14. 	</head>
    15. 	<body>
    16. 		<!-- 頂部導航條 -->
    17. 		<div class="topbar-wrapper">
    18. 			<!-- 内部容器 -->
    19. 			<!-- 左侧导航 -->
    20. 			<div class="topbar w">
    21. 				<ul class="service">
    22. 					<li>
    23. 						<a href="#">小米商場</a>
    24. 					</li>
    25. 					<li class="line"> | </li>
    26. 					<li>
    27. 						<a href="#">MIUI</a>
    28. 					</li>
    29. 					<li class="line"> | </li>
    30. 					<li>
    31. 						<a href="#">lOT</a>
    32. 					</li>
    33. 					<li class="line"> | </li>
    34. 					<li>
    35. 						<a href="#">雲服務</a>
    36. 					</li>
    37. 					<li class="line"> | </li>
    38. 					<li>
    39. 						<a href="#">金融</a>
    40. 					</li>
    41. 					<li class="line"> | </li>
    42. 					<li>
    43. 						<a href="#">有品</a>
    44. 					</li>
    45. 					<li class="line"> | </li>
    46. 					<li>
    47. 						<a href="#">小愛開發平台</a>
    48. 					</li>
    49. 					<li class="line"> | </li>
    50. 					<li>
    51. 						<a href="#">企業團購</a>
    52. 					</li>
    53. 					<li class="line"> | </li>
    54. 					<li>
    55. 						<a href="#">資質證照</a>
    56. 					</li>
    57. 					<li class="line"> | </li>
    58. 					<li>
    59. 						<a href="#">協議規則</a>
    60. 					</li>
    61. 					<li class="line"> | </li>
    62. 					<li>
    63. 						<a  class="app" href="#">下載app
    64. 						<div class="qrcode">
    65. 							<img src="./小米二维码.jpg" alt="">
    66. 							<br />
    67. 							<span>小米商城app</span>
    68. 						</div>
    69. 						</a>
    70. 					</li>
    71. 					<li class="line"> | </li>
    72. 					<li>
    73. 						<a href="#">選擇你的地理位置</a>
    74. 					</li>
    75. 				</ul>
    76. 			<!-- 购物车 -->
    77. 			<ul class="show-car">
    78. 				<li><a href="#">
    79. 				<i class="iconfont">&#xe601;</i>
    80. 				购物車(0)</a></li>
    81. 				<li class="ts">
    82. 					购物车中还没有商品，赶快选购吧。
    83. 				</li>
    84. 			</ul>
    85. 			<!-- 用户登录注册 -->
    86. 			<ul class="user-info">
    87. 				<li>
    88. 					<a href="#">消息通知</a>
    89. 				</li>
    90. 				<li class="line">|</li>
    91. 				<li>
    92. 					<a href="#">注冊</a>
    93. 				</li>
    94. 				<li class="line">|</li>
    95. 				<li>
    96. 					<a href="#">登錄</a>
    97. 				</li>
    98. 				
    99. 			</ul>
    100. 			
    101. 			</div>
    102. 		</div>
    103. 		<!-- 创建外部头部容器 -->
    104. 		<div class="header-warpper">
    105. 			<div class="header w">
    106. 			<!-- 创建logo -->
    107. 			<h1 class="logo" title="小米">
    108. 				小米商场
    109. 				<a class="home" href="#"></a>
    110. 				<a href="#" class="mi"></a>
    111. 			</h1>
    112. 			<!-- 导航条-->
    113. 			<div class="nav-warpper">
    114. 		     <ul class="nav clearfix">
    115. 				 <li class="all-goods-wrapper"><a class="all-goods" href="#">全部商品分类</a>
    116. 				 <!-- 创建左侧导航-->
    117. 				 <ul class="left-menu">
    118. 					 <li><a href="#">手机 电话卡<i class="iconfont">&#xe625;</i></a></li>
    119. 					 <li><a href="#">电视 盒子<i class="iconfont">&#xe625;</i></a></li>
    120. 					 <li><a href="#">笔记本 平板<i class="iconfont">&#xe625;</i></a></li>
    121. 					 <li><a href="#">家电 插线板<i class="iconfont">&#xe625;</i></a></li>
    122. 					  <li><a href="#">出行 穿戴<i class="iconfont">&#xe625;</i></a></li>
    123. 					 <li><a href="#">智能 路由器<i class="iconfont">&#xe625;</i></a></li>
    124. 					 <li><a href="#">电源 配件<i class="iconfont">&#xe625;</i></a></li>
    125. 					 <li><a href="#">健康 儿童<i class="iconfont">&#xe625;</i></a></li>
    126. 					 <li><a href="#">耳机 音响<i class="iconfont">&#xe625;</i></a></li>
    127. 					  <li><a href="#">生活 箱包<i class="iconfont">&#xe625;</i></a></li>
    128. 				 </ul>
    129. 				 </li>
    130. 				  <li><a href="#1">小米手机</a></li>
    131. 				   <li><a href="#1">Reimi 红米</a></li>
    132. 				    <li><a href="#1">电视</a></li>
    133. 					 <li><a href="#1">笔记本</a></li>
    134. 					 <li><a href="#1">家电</a></li>
    135. 					 <li><a href="#1">路由器</a></li>
    136. 					 <li><a href="#1">智能硬件</a></li>
    137. 					 <li><a href="#1">服务</a></li>
    138. 					 <li><a href="#1">社区</a></li>
    139. 					<div class="goods-infos"></div>
    140. 			 </ul>
    141. 			 <div class="search-warpper">
    142. 				 <form class="search" action="#">
    143. 					 <input class="search-inp" type="text">
    144. 					 <button class="search-bnt iconfont">&#xe613;</button>
    145. 				 </form>
    146. 			 </div>
    147. 			 </div>
    148. 			 
    149. 		</div>
    150. 		</div>
    151. 		<!-- 创建banner的容器 -->
    152. 		<div class="banner-wrapper">
    153. 			<div class="banner w">
    154. 			<ul class="img-list">
    155. 				<li><a href="#">
    156. 				<img src="./bannner1.png" alt=""></a></li>
    157. 			</ul>
    158. 			<div class="pointer">
    159. 				<a href="#"></a>
    160. 				<a href="#"></a>
    161. 				<a href="#"></a>
    162. 				<a href="#"></a>
    163. 				<a href="#"></a>
    164. 			</div>
    165. 			<div class="prev-next">
    166. 				<a  class="prev" href=""></a>
    167. 				<a href="#" class="next"></a>
    168. 			</div>
    169. 	
    170. 			</div>
    171. 		</div>
    172. 	<div class="back-top">
    173. 		<ul >
    174. 			<li><i class="iconfont">&#xe692;</i>
    175. 			<div>手机App</div>
    176. 			</li>
    177. 			<li><i class="iconfont">&#xe692;</i>
    178. 			<div>个人中心</div>
    179. 			</li>
    180. 			<li><i class="iconfont">&#xec2e;</i>
    181. 			<div>人工客服</div>
    182. 			</li>
    183. 			<li><i class="iconfont">&#xe600;</i>
    184. 			<div>购物车</div>
    185. 			</li>
    186. 		</ul>
    187. 	</div>
    188. 	<!-- ad -->
    189. 	<div class="ad w">
    190. 		<ul class="short-cut">
    191. 			<li><a href="#"><i class="iconfont">&#xe637;</i>小米秒杀</a></li>
    192. 			<li><a href="#"><i class="iconfont">&#xe646;</i>企业团购</a></li>
    193. 			<li><a href="#"><i class="iconfont">&#xe647;</i>f卡通道</a></li>
    194. 			<li><a href="#"><i class="iconfont">&#xe647;</i>米粉卡</a></li>
    195. 			<li><a href="#"><i class="iconfont">&#xe637;</i>以旧换新</a></li>
    196. 			<li><a href="#"><i class="iconfont">&#xe638;</i>话费充值</a></li>
    197. 		</ul>
    198. 		<ul class="ad-img">
    199. 			<li><a href="#"><img src="./ad-1.jpg" alt=""></a></li>
    200. 			<li><a href="#"><img src="./ad-2.jpg" alt=""></a></li>
    201. 			<li><a href="#"><img src="./ad-3.jpg" alt=""></a></li>
    202. 		</ul>
    203. 	</div>
    204. 	<div class="black"></div>
    205. 	<div  class="end w">
    206. 		<img src="./end.jpg" alt="">
    207. 	</div>
    208. 	</body>
    209. </html>

    one.css

    1. .topbar-wrapper{
    2. 	width: 100%;
    3. 	background-color: #333;
    4. 	height: 40px;
    5. 	line-height: 40px;
    6. }
    7. /* 左侧导航栏 */
    8. .service{
    9. 	float: left;
    10. }
    11. .show-car,.user-info{
    12. 	float: right;
    13. }
    14. .service li{
    15. 	float: left;
    16. }
    17. .show-car li,.user-info li{
    18. 	float: right;
    19. }
    20. .topbar a{
    21. 	font-size: 12px;
    22. 	color: #b0b0b0;
    23. 	display: block;
    24. }
    25. .topbar a:hover{
    26. 	color: #fff;
    27. }
    28. .topbar .line{
    29. 	color: #424242;
    30. 	margin: 0 8px;
    31. }
    32. .show-car a{
    33. 	width: 120px;
    34. 	background-color: #424242;
    35. 	text-align: center;
    36. 	height: 40px ;
    37. }
    38. .show-car{
    39. 	position: relative;
    40. }
    41. .show-car i{
    42. 	margin-right: 2px;
    43. }
    44. .show-car{
    45. 	margin-left: 25px;
    46. }
    47. .show-car:hover a{
    48. 	background-color: white;
    49. 	color: #ff6700;
    50. }
    51. .ts{
    52. 	position: absolute;
    53. 	padding: 30px;
    54. 	top:41px;
    55. 	left: -172px;
    56. 	width: 232px;
    57. 	hight:35px
    58. 	background-color: #fff;
    59. 	font-size: 10px;
    60. 	z-index: 99999;
    61. 	text-align: center;
    62. 	box-shadow: 0 0 1px 2px rgba(0,0,0,0.2);
    63. 	display: none;
    64. }
    65. .show-car:hover .ts,.ts:hover{
    66. 	display: inline-block;
    67. }
    68. .app{
    69. 	position: relative;
    70. }
    71. .app .qrcode{
    72. 	width: 124px;
    73. 	height: 0;
    74. 	background-color: white;
    75. 	line-height: 1px;
    76. 	text-align: center;
    77. 	box-shadow: 0 0 10px rgb(0,0,0,0.3);
    78. 	color: #333;
    79. 	position: absolute;
    80. 	left: -38px;
    81. 	
    82. 	transition: all 0.3s;
    83. 	overflow: hidden;
    84. }
    85. .app:hover::after,.app:hover .qrcode{
    86. 	display: block;
    87. 	height: 140px ;
    88. 	z-index: 9990;
    89. 	float: left;
    90. }
    91. .app:hover::after{
    92. 	
    93. 	border: 6px solid transparent;
    94. 	content: '';
    95. 	border-top: none;
    96. 	border-bottom-color: white;
    97. 	width: 0px;
    98. 	height: 0px;
    99. 	position: absolute;
    100. 	bottom: 0px;
    101. 	left: 0;
    102. 	right: 0;
    103. 	margin: auto;
    104. 	/* 设置过渡的样式 */
    105.  
    106. }
    107. .qrcode img{
    108. 	width: 90px;
    109. 	height: 90px;
    110. 	margin: 17px;
    111. 	margin-bottom: 15px;
    112. }
    113. /* 设置中间的header */
    114. .header-warpper{
    115. 	height: 100px;
    116. 	width: 100%;
    117.     position: relative;
    118. }
    119. .header .logo{
    120. 	margin-top: 22.5px;
    121. 	float: left;
    122. 	position: relative;
    123. 	width: 55px;
    124. 	height: 55px;
    125. 	overflow: hidden;
    126. 	text-indent: -9999px;
    127. }
    128. .header .logo a{
    129. 	
    130. 	position: absolute;
    131. 	left: 0;
    132. 	width: 55px;
    133. 	height: 55px;
    134. 	background-image: url(logo-mi2.png);
    135. 	background-size: 55px 55px;
    136. 	background-position: center;
    137. 	transition: left 0.3s;
    138. }
    139. .header .logo .home{
    140. 	left: -55px;
    141. 	background-image: url(./mi.jpg);
    142. 	background-size: 55PX 55PX;
    143. } 
    144. .header .logo:hover .mi{
    145. 	left: 55px;
    146. }
    147. .header .logo:hover .home{
    148. 	left: 0;
    149. }
    150. .header .nav{
    151. 	float: left;
    152. 	padding-left: 57px;
    153. }
    154. .header .nav-warpper{
    155. 	float: left;
    156. 	margin-left: 10px;
    157. }
    158.  .nav > li{
    159. 	float: left;
    160. }
    161. .all-goods-wrapper{
    162. 	position: relative;
    163. }
    164. /* 左侧导航条 */
    165. .left-menu{
    166. 	width: 234px;
    167. 	height: 436px;
    168. 	background-color: rgba(0,0,0,.6);
    169. 	position: absolute;
    170. 	z-index: 990;
    171. 	left: -120px;
    172. 	line-height: 1;
    173. 	padding-top: 20px;
    174. }
    175. .left-menu a{
    176. 	display: block;
    177. 	height: 40px;
    178. 	line-height:40px;
    179. 	color: white;
    180. 	font-size: 14px;
    181. 	padding: 1px 0;
    182. }
    183. .nav li a:hover{
    184. 	color: #ff6700;
    185. }
    186. .left-menu li a:hover{
    187. 	background-color: #ff6700;
    188. 	color: white;
    189. }
    190. .left-menu li:hover{
    191. 	background-color: #ff6700;
    192. 	color: white;
    193. }
    194. .left-menu a i{
    195. 	float: right;
    196. }
    197. .header .nav{
    198. 	z-index: 10000;
    199. 	height: 100px;
    200. 	line-height: 100px;
    201. 	
    202. }
    203. .nav li a{
    204. 	display: block;
    205. 	
    206. 	font-size: 15px;
    207. 	margin-right: 20px;
    208. 		z-index: 999999;
    209. }
    210.  
    211. .all-goods{
    212. 	visibility: hidden;
    213. }
    214. .nav .goods-infos{
    215. 	height: 226px;
    216. 	
    217. 	position: absolute;
    218. 	top:100px;
    219. 	left: 0;
    220. 	height: 0;
    221. 	width: 100%;
    222. 	transition: height 0.3s;
    223. 	background-size: 100% 200px;
    224.     background-image: url(./下滑框.jpg);
    225. 	z-index: 99999;
    226. }
    227.  
    228. .nav li:not(:nth-of-type(10),:nth-of-type(1)):hover ~.goods-infos,.goods-infos:hover{
    229. 	height: 226px;
    230. 	border-top: 1px solid silver;
    231. 	box-shadow: 0 5px 3px rgba(0,0,0,0.2);
    232. }
    233. .search-warpper{
    234. 	width: 296px;
    235. 	height: 51px;
    236. 	float: left;
    237. 	margin-top: 25px;
    238. 	margin-left: 10px;
    239. 	border: 1px solid rgb(224,224,224);
    240. }
    241. .search-warpper .search-bnt{
    242. 	float: left;
    243.  height: 51px;
    244.  width: 53px;
    245.  border: #b0b0b0;
    246.  
    247. }
    248. .search-warpper .search-inp{
    249. 	padding-left: 10px;
    250. 	float: left;
    251. 	display: block;
    252. 	border: none;
    253. 	width: 243px;
    254. 	height: 50px;
    255. 	border-color: #b0b0b0;
    256. 	font-size: 15px;
    257. 	box-sizing: border-box;
    258. 	border: 1px solid rgb(224,224,224);
    259. 	border-right: none;
    260. 	outline: none;
    261. }
    262. .search-warpper .search-inp:focus{
    263. 	outline: 1px solid #ff6700;
    264. }
    265. .search-warpper .search-bnt:hover{
    266. 	border-color:silver;
    267. 	background-color: #ff6700;
    268. 	color: white;
    269. }
    270.  
    271. .banner{
    272. 	position: relative;
    273. 	height: 537px;
    274. 	margin: 0 auto;
    275. 	z-index: 1;
    276. }
    277. .banner img{
    278. 	width: 100%;
    279. 	vertical-align: top;
    280. }
    281.  
    282. .banner .img-list{
    283. 	position: absolute;
    284. }
    285.  
    286. .pointer{
    287. 	position: absolute;
    288. 	bottom: 100px;
    289. 	right: 135px;
    290. }
    291. .pointer a{
    292. 	float: left;
    293. 	margin-left: 6px;
    294. 	width: 6px;
    295. 	height: 6px;
    296. 	background-color: rgba(0,0,0,0.4);
    297. 	border: 3px rgba(255,255,255,0.4) solid;
    298. 	border-radius: 50%;
    299. }
    300. .pointer a:hover,.pointer a:active{
    301. 	border-color: rgba(0,0,0,0.4);
    302. 	background-color: rgba(255,255,255,0.4);
    303. }
    304. .prev-next a{
    305. 	width: 41px;
    306. 	height: 69px;
    307. 	background-image: url(箭头图.png);
    308. 	background-color: #333;
    309. 	position: absolute;
    310. 	top: 0;
    311. 	bottom: 0;
    312. 	margin: auto 0;
    313. }
    314. .prev-next .next{
    315. 	left: 257px;
    316. 	background-position: -84px 0;
    317. }
    318. .prev-next .prev{
    319. 	right: 0;
    320. 	
    321. 	background-position: -125px 0;
    322. }
    323. .back-top{
    324. 	width: 66px;
    325. 	height: 232px;
    326. 	position: fixed;
    327. 	bottom: 60px;
    328. 	right: 50px;
    329. }
    330. .back-top li{
    331. 	padding-top: 11px;
    332. 	border: 1px solid #f5f5f5;
    333. 	text-align: center;
    334. }
    335. .ad{
    336. 	height: 170px;
    337. 	margin-top: 14px;
    338.     position: relative;
    339. }
    340. .ad-img{
    341. 	float: left;
    342. }
    343. .ad .ad-img li{
    344. 	display: inline-block;
    345. 	
    346. }
    347. .ad .short-cut li{
    348. 	display: inline-block;
    349. 	width: 75px;
    350. 	
    351. }
    352. .ad .short-cut li:last-child{
    353. 	margin-right: 0;
    354. 	
    355. }
    356. .ad .short-cut i{
    357. 	display: block;
    358.   font-size: 20px;	
    359.   color: white;
    360.   text-align: center;
    361. }
    362. .ad .short-cut a{
    363. 	color: white;
    364. 	font-size: 15px;
    365. 	display: inline-block;
    366. 	height: 80px;
    367. 	margin: 0 7px;
    368. 	margin-top: 10px;
    369. }
    370. .ad .short-cut{
    371. 	width: 234px;
    372. 	height: 170px;
    373. 	background-color: #5f5750;
    374. 	margin-left: 14px;
    375. 	position: relative;
    376. 	left: -12px;
    377. }
    378. .ad .ad-img li{
    379. 	width: 316px;
    380. 	margin-left: 10px;
    381. 	
    382. }
    383. .ad .ad-img{
    384. 	position: absolute;
    385. 	left: 235px;
    386. 	top:-1px;
    387. }
    388. .ad .ad-img img{
    389. 	width: 100%;
    390. 	vertical-align: top;
    391. }
    392. .black{
    393. 	background-color: #f5f5f5;
    394. 	margin-top: 50px;
    395. 	width: 100%;
    396. }
    397. .end{
    398. 	width: 1226px;
    399. }

    all.css

    1. .w{
    2. 	width: 1226px;
    3. 	margin: 0 auto;
    4. }

    clear.css

    1. *{
    2. 	padding: 0;
    3. 	margin: 0;
    4. }
    5. li{
    6. 	list-style: none;
    7. }
    8. a{
    9. 	text-decoration: none;
    10. 	color: #000;
    11. }
    12. .clearfix::after,.clearfix::before{
    13. 	content: "";
    14. 	display: table;
    15. 	clear: both;
    16. }
    17.  
    18. body{	
    19. 	    font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    20. 	    color: #333;
    21. 		min-width: 1226px;
    22. }

    三、运行效果

     一些效果具体：

    网站标题

    下拉二维码（有延时效果）

    类似的

      

     还有一些fixed定位和:hoverd的字体和背景背景颜色变化效果。

    最后本人的一个心结：给css中的类起名时语义化非常重要。

    源码下载：链接：https://pan.baidu.com/s/1ZDE_RwoVguR6wd46cmpBVg?pwd=2e1t 
    提取码：2e1t

  • 相关阅读:
    信创JAVAWEB的相关记录
    Aviator表达式引擎
    Python常见设计模式库之python-patterns使用详解
    HCIA-datacom 4.3 实验三：网络地址转换配置实验
    如何在mac上安装多版本python并配置PATH
    二叉树的前序遍历
    cmmi3级资质认证办理流程是什么？周期多久
    最大后验估计MAP
    Linux上如何部署SpringBoot项目——手把手教会你
    第四章《类与对象》第2节：方法的定义
  • 原文地址：https://blog.csdn.net/m0_53394907/article/details/126515103