登录  /  注册
博主信息
博文 47
粉丝 3
评论 0
访问量 36163
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
仿京东移动端首页
原创
958人浏览过

仿京东移动端首页


演示截图

Html代码

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>首页</title>
  6. <link rel="stylesheet" href="static/css/index.css">
  7. <!-- 引入字体图标 -->
  8. <link rel="stylesheet" href="static/icon-font/iconfont.css">
  9. <!-- 引入页眉 -->
  10. <link rel="stylesheet" href="static/css/header.css">
  11. <!-- 引入主体 -->
  12. <link rel="stylesheet" href="static/css/main.css">
  13. <!-- 引入正品直邮 -->
  14. <link rel="stylesheet" href="static/css/zp.css">
  15. <!-- 引入秒杀样式表 -->
  16. <link rel="stylesheet" href="static/css/ms.css">
  17. <!-- 引入推荐样式表 -->
  18. <link rel="stylesheet" href="static/css/tj.css">
  19. <!-- 引入页脚样式表 -->
  20. <link rel="stylesheet" href="static/css/footer.css">
  21. <!-- 引入四格样式表 -->
  22. <link rel="stylesheet" href="static/css/sg.css">
  23. </head>
  24. <body>
  25. <!-- 页眉 -->
  26. <div class="header">
  27. <!-- 菜单图标 -->
  28. <div class="menu iconfont icon-menu"></div>
  29. <div class="search">
  30. <div class="logo">JD</div>
  31. <div class="zoom iconfont icon-search"></div>
  32. <input class="words" type="text" value="" placeholder="MacBook Air 2020" />
  33. </div>
  34. <a href="#" class="login">登录</a>
  35. </div>
  36. <!-- 主体 -->
  37. <div class="main">
  38. <!-- 导航 -->
  39. <ul class="nav">
  40. <li>
  41. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh1.png" /></a>
  42. <a href="">京东超市</a>
  43. </li>
  44. <li>
  45. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh2.png" /></a>
  46. <a href="">数码电器</a>
  47. </li>
  48. <li>
  49. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh3.png" /></a>
  50. <a href="">京东服饰</a>
  51. </li>
  52. <li>
  53. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh4.png" /></a>
  54. <a href="">京东生鲜</a>
  55. </li>
  56. <li>
  57. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh5.png" /></a>
  58. <a href="">京东到家</a>
  59. </li>
  60. <li>
  61. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh6.png" /></a>
  62. <a href="">充值缴费</a>
  63. </li>
  64. <li>
  65. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh7.png" /></a>
  66. <a href="">9.9拼</a>
  67. </li>
  68. <li>
  69. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh8.png" /></a>
  70. <a href="">领券</a>
  71. </li>
  72. <li>
  73. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh9.png" /></a>
  74. <a href="">借钱</a>
  75. </li>
  76. <li>
  77. <a href="JavaScript:viod(0);"><img src="static/images/dh/dh10.png" /></a>
  78. <a href="">PLUS会员</a>
  79. </li>
  80. </ul>
  81. <!-- 正品直邮 -->
  82. <ul class="zp">
  83. <li class="zpone">
  84. <a href="">正品直郵</a>
  85. <a href="javascript:viod(0);"><img src="static/images/zp/zp1.dpg" /></a>
  86. </li>
  87. <li class="hh">
  88. <a href="">来电好货</a>
  89. <a href="">3C大放价</a>
  90. <a href="javascript:viod(0);"><img src="static/images/zp/zp2.dpg" /></a>
  91. </li>
  92. <li class="gc">
  93. <a href="">国潮风尚</a>
  94. <a href="">国货正当时</a>
  95. <a href="javascript:viod(0);"><img src="static/images/zp/zp3.dpg" /></a>
  96. </li>
  97. <li>
  98. <a href="">都是你爱的</a>
  99. <a href="javascript:viod(0);"><img src="static/images/zp/zp4.dpg" /></a>
  100. </li>
  101. </ul>
  102. <!-- 秒杀活动 -->
  103. <div class="ms">
  104. <div class="ms-top">
  105. <div class="left">
  106. <div class="title">京东秒杀</div>
  107. <div class="notice">
  108. <div class="tips">18点专场</div>
  109. <div class="time">18:00:00</div>
  110. </div>
  111. </div>
  112. <div class="right">更多秒杀</div>
  113. </div>
  114. <!-- 秒杀主体区 -->
  115. <ul class="ms-body">
  116. <li class="item">
  117. <a href=""><img src="static/images/ms/ms1.dpg" /></a>
  118. <div class="iconfont icon-rmb">338</div>
  119. <div class="iconfont icon-rmb">558</div>
  120. </li>
  121. <li class="item">
  122. <a href=""><img src="static/images/ms/ms2.dpg" /></a>
  123. <div class="iconfont icon-rmb">6266</div>
  124. <div class="iconfont icon-rmb">7399</div>
  125. </li>
  126. <li class="item">
  127. <a href=""><img src="static/images/ms/ms3.dpg" /></a>
  128. <div class="iconfont icon-rmb">1818</div>
  129. <div class="iconfont icon-rmb">2199</div>
  130. </li>
  131. <li class="item">
  132. <a href=""><img src="static/images/ms/ms4.dpg" /></a>
  133. <div class="iconfont icon-rmb">379</div>
  134. <div class="iconfont icon-rmb">430</div>
  135. </li>
  136. <li class="item">
  137. <a href=""><img src="static/images/ms/ms5.dpg" /></a>
  138. <div class="iconfont icon-rmb">1399</div>
  139. <div class="iconfont icon-rmb">1799</div>
  140. </li>
  141. <li class="item">
  142. <a href=""><img src="static/images/ms/ms6.dpg" /></a>
  143. <div class="iconfont icon-rmb">4690</div>
  144. <div class="iconfont icon-rmb">5990</div>
  145. </li>
  146. </ul>
  147. </div>
  148. <!-- 四格推荐 -->
  149. <div class="sige">
  150. <ul class="sige-top">
  151. <li class="item">
  152. <a href="">
  153. <div class="iie">
  154. <img src="static/images/sg/1.dpg" />
  155. </div>
  156. <div class="green">白条6期免息</div>
  157. <div class="title">珠宝钟表</div>
  158. </a>
  159. </li>
  160. <li class="item">
  161. <a href="">
  162. <div class="iie">
  163. <img src="static/images/sg/1.dpg" />
  164. </div>
  165. <div class="green">Apple大牌日</div>
  166. <div class="title">手机礼遇节</div>
  167. </a>
  168. </li>
  169. <li class="item">
  170. <a href="">
  171. <div class="iie">
  172. <img src="static/images/sg/1.dpg" />
  173. </div>
  174. <div class="green">圣诞狂欢夜</div>
  175. <div class="title">玩具乐器</div>
  176. </a>
  177. </li>
  178. <li class="item">
  179. <a href="">
  180. <div class="iie">
  181. <img src="static/images/sg/1.dpg" />
  182. </div>
  183. <div class="green">每满100减50</div>
  184. <div class="title">图书圣诞购</div>
  185. </a>
  186. </li>
  187. </ul>
  188. </div>
  189. <!-- 推荐 -->
  190. <h2 class="title">猜你喜欢</h2>
  191. <ul class="tj">
  192. <li class="item">
  193. <a href=""><img src="static/images/tj/1.webp" /></a>
  194. <p>卡帝乐鳄鱼 CARTELO 男鞋英伦时尚一脚蹬套脚中老年爸爸商务休闲皮鞋男 6931 黑色 38</p>
  195. <div class="price">
  196. <div class="iconfont icon-rmb">238</div>
  197. <div>看相似</div>
  198. </div>
  199. </li>
  200. <li class="item">
  201. <a href=""><img src="static/images/tj/2.webp" /></a>
  202. <p>衣柜现代简约出租房钢管加粗加固加厚简易布衣柜家用卧室开门式 BX1安阁小鹿 宽85 (收藏加购优先发货)</p>
  203. <div class="price">
  204. <div class="iconfont icon-rmb">349</div>
  205. <div>看相似</div>
  206. </div>
  207. </li>
  208. <li class="item">
  209. <a href=""><img src="static/images/tj/1.webp" /></a>
  210. <p>卡帝乐鳄鱼 CARTELO 男鞋英伦时尚一脚蹬套脚中老年爸爸商务休闲皮鞋男 6931 黑色 38</p>
  211. <div class="price">
  212. <div class="iconfont icon-rmb">238</div>
  213. <div>看相似</div>
  214. </div>
  215. </li>
  216. <li class="item">
  217. <a href=""><img src="static/images/tj/1.webp" /></a>
  218. <p>卡帝乐鳄鱼 CARTELO 男鞋英伦时尚一脚蹬套脚中老年爸爸商务休闲皮鞋男 6931 黑色 38</p>
  219. <div class="price">
  220. <div class="iconfont icon-rmb">238</div>
  221. <div>看相似</div>
  222. </div>
  223. </li>
  224. </ul>
  225. </div>
  226. <!-- 页脚 -->
  227. <div class="footer">
  228. <div>
  229. <div class="iconfont icon-home"></div>
  230. <span>首页</span>
  231. </div>
  232. <div>
  233. <div class="iconfont icon-layers"></div>
  234. <span>分类</span>
  235. </div>
  236. <div>
  237. <div class="iconfont icon-kehuguanli"></div>
  238. <span>京喜</span>
  239. </div>
  240. <div>
  241. <div class="iconfont icon-shopping-cart"></div>
  242. <span>购物车</span>
  243. </div>
  244. <div>
  245. <div class="iconfont icon-user"></div>
  246. <span>我的</span>
  247. </div>
  248. </div>
  249. </body>
  250. </html>

CSS代码

  • 页眉
  1. .header {
  2. display: flex;
  3. align-items: center;
  4. }
  5. /* 登录按钮 */
  6. .header .login {
  7. color: #fff;
  8. text-align: center;
  9. flex: 1;
  10. font-size: 1.4rem;
  11. text-decoration: none;
  12. }
  13. .header .menu {
  14. text-align: center;
  15. flex: 1;
  16. font-size: 2.5rem;
  17. }
  18. .header .search {
  19. display: flex;
  20. flex: 6;
  21. padding: 0.5rem;
  22. border-radius: 3rem;
  23. background-color: #fff;
  24. }
  25. .header .search .logo {
  26. color: #e43130;
  27. flex: 0 1 4rem;
  28. text-align: center;
  29. line-height: 2rem;
  30. }
  31. .header .search .zoom {
  32. color: #ccc;
  33. flex: 0 1 4rem;
  34. /* 分割线 */
  35. border-left: 1px solid;
  36. text-align: center;
  37. line-height: 2rem;
  38. }
  39. .header .search .words {
  40. flex: auto;
  41. border: none;
  42. outline: none;
  43. color: #aaa;
  44. }
  • 主体
  1. .main .nav {
  2. display: flex;
  3. padding: 1rem;
  4. /* 允许换行 */
  5. flex-flow: row wrap;
  6. justify-content: space-between;
  7. }
  8. .main .nav img {
  9. height: 4rem;
  10. width: 4rem;
  11. }
  12. .main .nav li {
  13. /* 每一行显示5个,100%来分配,就是20% */
  14. flex: 1 1 20%;
  15. padding: 1rem;
  16. display: flex;
  17. flex-flow: column nowrap;
  18. align-items: center;
  19. }
  • 页脚
  1. .footer {
  2. display: flex;
  3. justify-content: space-around;
  4. align-items: center;
  5. overflow: hidden;
  6. }
  7. .footer>div {
  8. display: flex;
  9. flex-flow: column nowrap;
  10. align-items: center;
  11. }
  12. .footer>div>.iconfont {
  13. font-size: 2rem;
  14. }
  15. .fonter>div>span {
  16. font-size: 1.2rem;
  17. }
  • 秒杀
  1. .main .ms {
  2. background-color: #fff;
  3. padding: 1rem;
  4. margin: 1rem;
  5. border-radius: 1rem;
  6. }
  7. .main .ms .ms-top {
  8. display: flex;
  9. font-size: 1.3rem;
  10. height: 3rem;
  11. justify-content: space-between;
  12. }
  13. .main .ms .ms-top .left {
  14. display: flex;
  15. }
  16. .main .ms .ms-top .left .notice {
  17. font-size: 1.1rem;
  18. height: 2rem;
  19. border: 1px solid #e43130;
  20. border-radius: 2rem;
  21. margin-left: 1rem;
  22. display: flex;
  23. justify-content: center;
  24. align-items: center;
  25. }
  26. .main .ms .ms-top .left .notice .tips {
  27. background-color: #e43130;
  28. color: #fff;
  29. border-radius: 2rem;
  30. padding: 0.3rem 0.5rem;
  31. }
  32. .main .ms .ms-top .left .notice .time {
  33. padding: 0.3rem 0.5rem;
  34. }
  35. .main .ms .ms-top .right {
  36. color: #e43130;
  37. }
  38. /* 主体 */
  39. .main .ms .ms-body {
  40. display: flex;
  41. justify-content: space-between;
  42. }
  43. .main .ms .ms-body img {
  44. height: 6.6rem;
  45. width: 6.6rem;
  46. }
  47. /* 秒杀价 */
  48. .main .ms .ms-body .item div:first-of-type {
  49. color: #e43130;
  50. font-weight: bolder;
  51. }
  52. .main .ms .ms-body .item div:last-of-type {
  53. color: #666666;
  54. text-decoration: line-through;
  55. text-decoration-color: #666666;
  56. }
  • 四格
  1. .main .sige {
  2. display: flex;
  3. color: #fff;
  4. }
  5. .main .sige .sige-top .item {
  6. background-color: #e43130;
  7. display: flex;
  8. max-height: 14rem;
  9. flex-flow: row wrap;
  10. border-radius: 1rem;
  11. padding: 0.5rem;
  12. margin: 0.5rem;
  13. justify-content: center;
  14. align-items: center;
  15. position: relative;
  16. flex: 1 1 25%;
  17. }
  18. .main .sige .sige-top .item .iie {
  19. background-color: #fff;
  20. min-height: 8rem;
  21. min-width: 8rem;
  22. margin-top: 0.5rem;
  23. padding: 0.5rem;
  24. border-radius: 0.8rem;
  25. }
  26. .main .sige .sige-top .item img {
  27. height: 100%;
  28. width: 100%;
  29. border-radius: 1rem;
  30. }
  31. .main .sige .sige-top {
  32. display: flex;
  33. flex: 1 1 25%;
  34. padding: 1rem;
  35. }
  36. .main .sige .sige-top .item div {
  37. display: flex;
  38. color: #fff;
  39. flex-flow: column wrap;
  40. }
  41. .main .sige .sige-top .item .green {
  42. background-color: #1fdae0;
  43. border-radius: 1rem;
  44. position: relative;
  45. text-align: center;
  46. bottom: 1.5rem;
  47. }
  48. .main .sige .sige-top .item .title {
  49. font-size: 1.5rem;
  50. position: relative;
  51. top: -1.2rem;
  52. display: flex;
  53. }
  • 猜你喜欢
  1. .main .title {
  2. text-align: center;
  3. height: 4rem;
  4. color: #555;
  5. font-weight: 500;
  6. }
  7. .main .tj {
  8. font-size: 1rem;
  9. display: flex;
  10. /* 允许换行 */
  11. flex-flow: row wrap;
  12. }
  13. .main .tj .item {
  14. flex: 1 1 calc(50% - 2rem);
  15. background-color: #fff;
  16. overflow: hidden;
  17. display: flex;
  18. flex-flow: column nowrap;
  19. margin-left: 1rem;
  20. margin-bottom: 1rem;
  21. padding-bottom: 1rem;
  22. border-radius: 1rem;
  23. }
  24. .main .tj .item img {
  25. width: 100%;
  26. height: 100%;
  27. /* border-radius: 1rem; */
  28. }
  29. .main .tj .item {
  30. padding: 1rem;
  31. }
  32. .main .tj .price {
  33. display: flex;
  34. justify-content: space-between;
  35. }
  36. .main .tj .price div:first-of-type {
  37. color: red;
  38. }
  39. .main .tj .price div:last-of-type {
  40. color: #666;
  41. background-color: #fcf5f5;
  42. border-top-left-radius: 1rem;
  43. border-bottom-left-radius: 1rem;
  44. padding: 0.2rem 1rem;
  45. }
  • 正品直邮
  1. .main .zp {
  2. margin-top: 1rem;
  3. padding: 1rem;
  4. margin: 1rem;
  5. display: flex;
  6. background-color: #fff;
  7. border-radius: 0.5rem;
  8. flex-flow: row nowrap;
  9. justify-content: space-between;
  10. }
  11. .main .zp img {
  12. height: 6.6rem;
  13. width: 6.6rem;
  14. }
  15. .main .zp li {
  16. display: flex;
  17. flex-flow: row wrap;
  18. justify-content: center;
  19. flex: 1 1 25%;
  20. }
  21. .main .zp .zpone a:first-of-type {
  22. padding: 1rem;
  23. color: #222222;
  24. display: flex;
  25. align-self: flex-end;
  26. }
  27. .main .zp .hh a:first-of-type {
  28. font-size: 1.8rem;
  29. color: black;
  30. font-weight: bold;
  31. }
  32. .main .zp .hh a:nth-of-type(2) {
  33. margin-right: 1rem;
  34. }
  35. .main .zp .gc a:first-of-type {
  36. font-size: 1.8rem;
  37. color: black;
  38. font-weight: bold;
  39. }
  40. .main .zp .gc a:nth-of-type(2) {
  41. margin-right: 0.1rem;
  42. }
  43. .main .zp li:last-of-type a:first-of-type {
  44. display: flex;
  45. align-self: center;
  46. color: #222222;
  47. }
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:思路 是对的
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学