博客列表 >0718京东

0718京东

小言
小言原创
2022年07月19日 21:03:26263浏览

  1. <body>
  2. <header>
  3. <div>
  4. <a href="" class="fenlei"><span class="iconfont icon-ai-kind"></span></a>
  5. <div>
  6. </div>
  7. <a href="" class="wode"><span class="iconfont icon-wode"></span></a>
  8. </div>
  9. </header>
  10. <main>
  11. <div class="as">
  12. <a href=""><img src="images/lunbo.jpg" alt=""></a>
  13. </div>
  14. <ul class="navs">
  15. <li class="item">
  16. <a href=""><img src="images/chaoshi.png" alt=""></a>
  17. <a href="">京东超市</a>
  18. </li>
  19. <li class="item">
  20. <a href=""><img src="images/chaoshi.png" alt=""></a>
  21. <a href="">京东超市</a>
  22. </li>
  23. <li class="item">
  24. <a href=""><img src="images/chaoshi.png" alt=""></a>
  25. <a href="">京东超市</a>
  26. </li>
  27. <li class="item">
  28. <a href=""><img src="images/chaoshi.png" alt=""></a>
  29. <a href="">京东超市</a>
  30. </li>
  31. <li class="item">
  32. <a href=""><img src="images/chaoshi.png" alt=""></a>
  33. <a href="">京东超市</a>
  34. </li>
  35. <li class="item">
  36. <a href=""><img src="images/chaoshi.png" alt=""></a>
  37. <a href="">京东超市</a>
  38. </li>
  39. <li class="item">
  40. <a href=""><img src="images/chaoshi.png" alt=""></a>
  41. <a href="">京东超市</a>
  42. </li>
  43. <li class="item">
  44. <a href=""><img src="images/chaoshi.png" alt=""></a>
  45. <a href="">京东超市</a>
  46. </li>
  47. <li class="item">
  48. <a href=""><img src="images/chaoshi.png" alt=""></a>
  49. <a href="">京东超市</a>
  50. </li>
  51. <li class="item">
  52. <a href=""><img src="images/chaoshi.png" alt=""></a>
  53. <a href="">京东超市</a>
  54. </li>
  55. </ul>
  56. <div class="miaosha">
  57. <div class="wenzi">
  58. <span>京东秒杀</span>
  59. <span>爆款轮番秒<i class="fuhao">&gt;</i></span>
  60. </div>
  61. <ul class="shangpin">
  62. <li class="zishangpin">
  63. <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  64. <span class="iconfont icon-renminbi">99</span>
  65. </li>
  66. <li class="zishangpin">
  67. <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  68. <span class="iconfont icon-renminbi">99</span>
  69. </li>
  70. <li class="zishangpin">
  71. <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  72. <span class="iconfont icon-renminbi">99</span>
  73. </li>
  74. <li class="zishangpin">
  75. <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  76. <span class="iconfont icon-renminbi">99</span>
  77. </li>
  78. <li class="zishangpin">
  79. <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  80. <span class="iconfont icon-renminbi">99</span>
  81. </li>
  82. </ul>
  83. </div>
  84. <ul class="list">
  85. <li class="items">
  86. <a href=""><img src="images/shangpin.webp" alt=""></a>
  87. <div class="ziti">
  88. <a href="">
  89. <div class="title">
  90. <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  91. </div>
  92. <div class="jiage">
  93. <span class="iconfont icon-renminbi">29.9</span>
  94. <span>19.9元2件</span>
  95. </div>
  96. <div class="pingjia">
  97. <span>自营</span>
  98. <span>20万+条评论</span>
  99. <span>看相似</span>
  100. </div>
  101. </a>
  102. </div>
  103. </li>
  104. <li class="items">
  105. <a href=""><img src="images/shangpin.webp" alt=""></a>
  106. <div class="ziti">
  107. <a href="">
  108. <div class="title">
  109. <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  110. </div>
  111. <div class="jiage">
  112. <span class="iconfont icon-renminbi">29.9</span>
  113. <span>19.9元2件</span>
  114. </div>
  115. <div class="pingjia">
  116. <span>自营</span>
  117. <span>20万+条评论</span>
  118. <span>看相似</span>
  119. </div>
  120. </a>
  121. </div>
  122. </li>
  123. <li class="items">
  124. <a href=""><img src="images/shangpin.webp" alt=""></a>
  125. <div class="ziti">
  126. <a href="">
  127. <div class="title">
  128. <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  129. </div>
  130. <div class="jiage">
  131. <span class="iconfont icon-renminbi">29.9</span>
  132. <span>19.9元2件</span>
  133. </div>
  134. <div class="pingjia">
  135. <span>自营</span>
  136. <span>20万+条评论</span>
  137. <span>看相似</span>
  138. </div>
  139. </a>
  140. </div>
  141. </li>
  142. <li class="items">
  143. <a href=""><img src="images/shangpin.webp" alt=""></a>
  144. <div class="ziti">
  145. <a href="">
  146. <div class="title">
  147. <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  148. </div>
  149. <div class="jiage">
  150. <span class="iconfont icon-renminbi">29.9</span>
  151. <span>19.9元2件</span>
  152. </div>
  153. <div class="pingjia">
  154. <span>自营</span>
  155. <span>20万+条评论</span>
  156. <span>看相似</span>
  157. </div>
  158. </a>
  159. </div>
  160. </li>
  161. <li class="items">
  162. <a href=""><img src="images/shangpin.webp" alt=""></a>
  163. <div class="ziti">
  164. <a href="">
  165. <div class="title">
  166. <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  167. </div>
  168. <div class="jiage">
  169. <span class="iconfont icon-renminbi">29.9</span>
  170. <span>19.9元2件</span>
  171. </div>
  172. <div class="pingjia">
  173. <span>自营</span>
  174. <span>20万+条评论</span>
  175. <span>看相似</span>
  176. </div>
  177. </a>
  178. </div>
  179. </li>
  180. <li class="items">
  181. <a href=""><img src="images/shangpin.webp" alt=""></a>
  182. <div class="ziti">
  183. <a href="">
  184. <div class="title">
  185. <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  186. </div>
  187. <div class="jiage">
  188. <span class="iconfont icon-renminbi">29.9</span>
  189. <span>19.9元2件</span>
  190. </div>
  191. <div class="pingjia">
  192. <span>自营</span>
  193. <span>20万+条评论</span>
  194. <span>看相似</span>
  195. </div>
  196. </a>
  197. </div>
  198. </li>
  199. <li class="items">
  200. <a href=""><img src="images/shangpin.webp" alt=""></a>
  201. <div class="ziti">
  202. <a href="">
  203. <div class="title">
  204. <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  205. </div>
  206. <div class="jiage">
  207. <span class="iconfont icon-renminbi">29.9</span>
  208. <span>19.9元2件</span>
  209. </div>
  210. <div class="pingjia">
  211. <span>自营</span>
  212. <span>20万+条评论</span>
  213. <span>看相似</span>
  214. </div>
  215. </a>
  216. </div>
  217. </li>
  218. </ul>
  219. </main>
  220. <footer>
  221. <a href="" class="iconfont icon-jingdongicon-">
  222. <span>首页</span>
  223. </a>
  224. <a href="" class="iconfont icon-fenlei">
  225. <span>分类</span>
  226. </a>
  227. <a href="" class="iconfont icon-xiajiang">
  228. <span>京喜</span>
  229. </a>
  230. <a href="" class="iconfont icon-gouwucheman">
  231. <span>购物车</span>
  232. </a>
  233. <a href="" class="iconfont icon-wodexiao">
  234. <span>我的</span>
  235. </a>
  236. </footer>
  237. </body>

css

  1. /* 页眉 */
  2. header,footer{
  3. position: fixed;
  4. z-index: 100;
  5. }
  6. header{
  7. top: 0;
  8. left: 0;
  9. right: 0;
  10. }
  11. footer{
  12. bottom: 0;
  13. left: 0;
  14. right: 0;
  15. }
  16. header > div:first-of-type{
  17. height: 0.6rem;
  18. background-image:linear-gradient(0deg,#f1503b,#c82519 50%);
  19. display: grid;
  20. grid-template-columns: 0.4rem 1fr 0.4rem;
  21. place-items: center;
  22. }
  23. header .icon-ai-kind,
  24. header .icon-wode{
  25. color: #fff;
  26. font-size:0.3rem;
  27. }
  28. /* 主体 */
  29. main{
  30. height: 1500px;
  31. overflow: hidden;
  32. /* 再做一个相对定位,将整体向下偏移50 */
  33. position:relative;
  34. top: 50px;
  35. /* 防止商品被挡住 */
  36. padding-bottom: 0.6rem;
  37. }
  38. /* 轮播 */
  39. main > div:first-of-type{
  40. background-color:red;
  41. position:relative;
  42. text-align: center;
  43. background-image:linear-gradient(0deg,#f1503b,#c82519 50%);
  44. border-bottom-left-radius: 100%;
  45. border-bottom-right-radius: 100%;
  46. }
  47. main .as img{
  48. max-width: 95%;
  49. }
  50. /* */
  51. main .navs,
  52. main .miaosha,
  53. main .list{
  54. border-radius: 0.1rem;
  55. margin: 0.08rem 0.08rem 0 0.08rem;
  56. }
  57. /* 导航 */
  58. main .navs{
  59. background-color: #f6f6f6;
  60. display: grid;
  61. grid-template-columns: repeat(5 ,1fr);
  62. gap: 0.1rem;
  63. }
  64. main .navs .item{
  65. display: grid;
  66. place-items: center;
  67. }
  68. /* 秒杀 */
  69. main .miaosha{
  70. background-color: #fff;
  71. border-radius: 30px;
  72. display: grid;
  73. grid-template-rows: 0.5rem 1fr;
  74. }
  75. main .miaosha .wenzi{
  76. display: grid;
  77. grid-template-columns: repeat(2 ,1fr);
  78. padding-top: 0.1rem;
  79. }
  80. main .miaosha .wenzi >span:first-of-type{
  81. margin-left: 0.2rem;
  82. font-size: 0.2rem;
  83. }
  84. main .miaosha .wenzi >span:last-of-type{
  85. display: grid;
  86. grid-template-columns:repeat(2 ,1fr);
  87. color: red;
  88. margin-left: 0.4rem;
  89. }
  90. main .miaosha .wenzi .fuhao{
  91. text-align: center;
  92. background-color: red;
  93. height: 20px;
  94. width: 20px;
  95. color: #fff;
  96. border-radius: 20px;
  97. }
  98. main .miaosha .shangpin{
  99. display: grid;
  100. grid-template-columns: repeat(5 ,1fr);
  101. gap: 0.1rem;
  102. margin-bottom: 0.1rem;
  103. }
  104. main .miaosha .shangpin .zishangpin{
  105. display: grid;
  106. place-items: center;
  107. }
  108. main .miaosha .shangpin .zishangpin .icon-renminbi{
  109. color: red;
  110. }
  111. /* 商品 */
  112. main .list{
  113. display: grid;
  114. grid-template-columns: repeat(2 ,1fr);
  115. gap: 0.1rem;
  116. }
  117. main .list .items{
  118. display: grid;
  119. gap: 0.05rem;
  120. background-color: #fff;
  121. }
  122. main .list .items .ziti .title span{
  123. background-color: red;
  124. border-radius: 0.04rem;
  125. }
  126. main .list .items .ziti .jiage .icon-renminbi{
  127. color: red;
  128. }
  129. main .list .items .ziti .jiage > span:last-of-type{
  130. border: 1px solid red;
  131. border-radius: 0.04rem;
  132. }
  133. main .list .items .ziti .pingjia{
  134. display: grid;
  135. grid-template-columns: 0.4rem 1fr 0.4rem;
  136. }
  137. main .list .items .ziti .pingjia > span:first-of-type{
  138. background-color: red;
  139. color: #fff;
  140. text-align: center;
  141. border-radius: 5px;
  142. }
  143. main .list .items .ziti .pingjia > span:nth-of-type(2){
  144. color: #ccc;
  145. }
  146. main .list .items .ziti .pingjia > span:last-of-type{
  147. background-color: #f2f2f2;
  148. border-radius: 5px;
  149. }
  150. /* 页脚*/
  151. footer{
  152. height: 0.5rem;
  153. display: grid;
  154. grid-template-columns:repeat(5 ,1fr);
  155. background-color:#fff;
  156. place-content: space-around;
  157. place-items: center;
  158. font-size: smaller;
  159. }
  160. footer >a{
  161. display: grid;
  162. place-items: center;
  163. }
  164. footer >a:first-of-type{
  165. color: red;
  166. font-size: 0.18rem;
  167. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议