devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

d3_0330_打造小米商城官网 Html+css+JS练手项目实战_js写小米商城的家电模块

作者：2023面试高手 | 2024-04-03 12:07:56

赞

踩

js写小米商城的家电模块

行内元素a不能包含块级元素p，否则会失效

.download >a{
    display: block;  //转换成块级元素  
}
 

绘制一个三角形 (不知道为什么，在模块里，功能没实现)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                width: 0;
                height: 0;
                border-top: 10px solid red;
            //    border-bottom:10px solid blue;
                border-left: 10px solid transparent;  
                border-right: 10px solid transparent;  //变为透明
            }
        </style>
    </head>
    <body>
        <div class="box">
            
        </div>
    </body>
</html>

至此，头部模块结束

  1. <!--头部开始-->
  2. <div class="header">
  3.     <div class="wrap">
  4.         <ul class="header-left">
  5.             <li><a href="#">小米商城</a> <span>|</span></li>
  6.             <li><a href="#">MIUI</a><span>|</span></li>
  7.             <li><a href="#">loT</a><span>|</span></li>
  8.             <li><a href="#">云服务</a><span>|</span></li>
  9.             <li><a href="#">天星数科</a><span>|</span></li>
  10.             <li><a href="#">有品</a><span>|</span></li>
  11.             <li><a href="#">小爱开放平台</a><span>|</span></li>
  12.             <li><a href="#">企业团购</a><span>|</span></li>
  13.             <li><a href="#">资质证照</a><span>|</span></li>
  14.             <li><a href="#">协议规则</a><span>|</span></li>
  15.             <li><a href="#">下载app</a><span>|</span>
  16. 				<div class="download">	
  17. 					<a href="#">
  18. 					 <img src="img/download.png"  alt="">
  19. 					<p>	小米商城APP</p>
  20. 				 </a>
  21. 				</div>
  22. 				<div class="triangle"> </div>
  23. 			</li>
  24.             <li><a href="#">智能生活</a><span>|</span></li>
  25.             <li><a href="#">Select Location</a><span>|</span></li>
  26.         </ul>
  27.  
  28.         <ul class="header-right">
  29.             <li><a href="#">登录</a><span>|</span></li>
  30.             <li><a href="#">注册</a><span>|</span></li>
  31.             <li><a href="#">消息通知</a></li>
  32.             <li class="cart">
  33.                 <a href="#"><i class="iconfont"></i>购物车(0)
  34. 				</a>
  35. 				<div class="cart-list">购物车中还没有商品，赶紧选购吧 </div>
  36.          <!--   <div class="cart-list">                购物车中还没有商品，赶紧选购吧！
  37.             </div> -->
  38.             </li>
  39.         </ul>
  40.     </div>
  41. </div>
  42. <!--头部结束-->

 css

  1. /*pc段布局
  2. 1）浮动
  3. 2）布局思路：从外到里，div嵌套
  4. */
  5.  
  6. /*头部样式开始*/
  7. .header{
  8.     width: 100%;
  9.     height: 40px;
  10.     line-height: 40px;
  11.     /*//设置height和line-height相等，这样文字就居中了*/
  12.     background-color:#333;
  13.     font-size: 12px;
  14.  
  15. }
  16. .wrap{
  17.     width: 1226px;
  18.     margin: 0 auto;
  19. }
  20.  
  21. .header-left{
  22.     float: left;  //导航栏左浮
  23. }
  24.  
  25. .header-right{
  26.     float: right;  //购物车那四个导航栏右浮
  27. }
  28. .header li{
  29.     float: left;  // 把所有有序列表向左浮动
  30. 	position: relative;  
  31. }
  32. .header a {
  33.     color: #b0b0b0;
  34. }
  35.  
  36. .header a:hover{
  37.     color: #fff;
  38. }
  39. .header span{
  40.     color: #424242;
  41.     margin: 0 6px;
  42. }
  43.  
  44. /*购物车*/
  45. .cart{
  46.     position: relative;
  47.     height: 40px;
  48.     width: 120px;
  49.     background-color: #424242;
  50.     margin-left: 25px;
  51.     cursor: pointer; //将鼠标转换成小手
  52. }
  53.  
  54. /*点击购物车，背景变白*/
  55. .cart:hover{
  56.     background-color: #fff;
  57.  
  58.  }
  59. /*鼠标悬停在li上，里面的a字体变为橘色，不能直接用.cart:hover（因为字体有颜色不会继承父元素的） */
  60. .cart:hover>a{
  61.     color: #ff6700;
  62. }
  63.  
  64. /*购物车、下载app思路
  65. 1） 绝对定位到正常的位置
  66. 2）隐藏
  67. 3）鼠标悬停显示
  68. */
  69. .cart-list{
  70. 				  /*   display: none;
  71. 				 隐藏自己，隐藏购物车下面模块  */
  72.     position: absolute; 
  73. 	/* //绝对定位相对于父元素定位 */
  74.    top : 40px;
  75.     right:  0;
  76.     width: 316px;
  77.     height: 0; 
  78. 	/* //元素中高度设置为0，元素中内容溢出 */
  79.     overflow: hidden; 
  80. 	/* //？溢出的部分隐藏掉 */
  81.     line-height: 100px;
  82.     background-color: #fff;
  83.     box-shadow: 0 2px 10px rgba(0 ,0,0, .15);
  84. 	 /* //阴影 */
  85. /* // */  transition:all .3s;
  86. }
  87. /*可以过渡的属性
  88. 1）颜色
  89. 2）数值
  90. 3）阴影
  91. 4）转换
  92.  */
  94. /*鼠标悬停在cart上，子元素cart-list显示*/
  95. .cart:hover >.cart-list{
  96.      height: 100px;
  97. 	 /* //高度取值为数值，可以过渡 */
  98. 	 /* display: block; */
  99. }
  100.  
  101. .download{
  102. 	position: absolute;
  103. 	top: 40px;  //绝对定位
  104. 	/* 水平居中 */
  105. 	left: 50%;
  106. 	margin-left: -62px;
  107. 	width: 124px;
  108. 	height: 0px;
  109. 	
  110. 	background-color: #fff;
  111. 	box-shadow: 0 1px 5px #aaa;
  112. 	overflow: hidden;
  113. 	transition: all .3s;  //延缓出现0.3s
  114. 	
  115. }
  116.  
  117. .download img
  118. {
  119. 	width: 90px;
  120. 	margin: 18px  0 12px ;
  121. }
  122. /* 重新设置a的行高 */
  123. .download >a{
  124. 	display: block;  //转换成块级元素
  125. 	 
  126. }
  127.  
  128.  
  129. .download p{
  130. 	color: #333;
  131. 	font-size: 14px;
  132. 	line-height: 14px;
  133. 	position: relative;
  134. 	top: -15px;
  135. }
  136.  
  137. .header-left>li:hover>.download{ 
  138. 	height: 148px;
  139. } 
  140.  
  141. /* 绘制三角形 */
  142. .triangle{
  143. 	display: none;
  144. 	position: absolute;
  145. 	 bottom: 0;
  146. 	left: 50%;
  147. 	margin-left: -8px;
  148. 	width: 0;
  149. 	height: 0;
  150. 	border-bottom: 8px solid red;
  151. 	border-right: 8px solid transparent; 
  152. 	border-left: 8px solid transparent;
  153. 	
  154. }
  155.  
  156. /*头部样式结束*/
  157.  
  158. .header-left>li:hover>.triangle{
  159. 	display: block;
  160. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/355452
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号