博客列表 >移动布局仿JD

移动布局仿JD

吴泽方
吴泽方原创
2022年07月19日 16:52:20267浏览

移动布局仿JD

先上效果图

1.css重置样式表

  1. /* 重置样式 */
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. box-sizing: border-box;
  6. }
  7. html {
  8. /* 设置根元素字号大小为100px,那么页面默认最终的字号大小为16px */
  9. font-size: 100px;
  10. }
  11. body {
  12. background-color: rgb(243, 245, 247);
  13. /* 根据根元素html的字号大小来重置字号大小,方便布局 */
  14. /* 默认:100px==>1px 最大:125px==>20px 最小:75px==>12px */
  15. font-size: 0.16rem;
  16. background-color: #f6f6f6;
  17. }
  18. /* 媒体查询,当设备宽度大于470px时,设置根元素字号大小为125px */
  19. @media (min-width: 470px) {
  20. html {
  21. /* 计算可得,页面最终字号大小为20px */
  22. font-size: 125px;
  23. }
  24. }
  25. /* 媒体查询,当设备宽度小于375px时,设置根元素字号大小为75px */
  26. @media (max-width: 375px) {
  27. html {
  28. /* 计算可得,页面最终字号大小为14px */
  29. /* 12/16=0.75 */
  30. /* 1rem = 100 * 0.75 = 75px */
  31. font-size: 75px;
  32. }
  33. }
  34. li {
  35. list-style: none;
  36. }
  37. a {
  38. text-decoration: none;
  39. color: #555;
  40. }

2.页眉页脚css代码

  1. /* 页眉页脚公共样式 */
  2. body header,
  3. body footer {
  4. width: 100%;
  5. height: 0.5rem;
  6. background-color: white;
  7. }
  8. /* 页眉 */
  9. body header {
  10. /* 固定定位 */
  11. position: fixed;
  12. top: 0;
  13. /* 设置层级 */
  14. z-index: 50;
  15. background-color: #e43130;
  16. /* 声明网格布局 创建一行三列网格 垂直和水平居中 列间距为10px*/
  17. display: grid;
  18. grid-template-columns: 0.5rem 1fr 0.6rem;
  19. place-items: center;
  20. gap: 0 0.1rem;
  21. }
  22. body header .icon-fenlei,
  23. body header a {
  24. font-size: larger;
  25. color: rgb(248, 245, 245);
  26. }
  27. body header .serch {
  28. background-color: aliceblue;
  29. width: 100%;
  30. height: 0.35rem;
  31. border-radius: 0.4rem;
  32. color: #aaa;
  33. display: flex;
  34. place-items: center;
  35. padding: 0 0.1rem;
  36. gap: 0 0.05rem;
  37. }
  38. body header .serch img {
  39. width: 0.3rem;
  40. }
  41. body header .serch a {
  42. width: 0.3rem;
  43. display: block;
  44. color: #aaa;
  45. padding-left: 0.05rem;
  46. border-left: 0.01rem solid rgba(170, 170, 170, 0.603);
  47. }
  48. /* 页脚 */
  49. body footer {
  50. position: fixed;
  51. bottom: 0;
  52. z-index: 50;
  53. display: grid;
  54. grid-template-columns: repeat(5, 1fr);
  55. gap: 0 0.05rem;
  56. place-items: center;
  57. }
  58. body footer .item {
  59. display: grid;
  60. grid-template-rows: repeat(2, 1fr);
  61. place-items: center;
  62. cursor: pointer;
  63. }
  64. body footer .item a:first-of-type {
  65. font-size: larger;
  66. }
  67. body footer .item a:last-of-type {
  68. font-size: smaller;
  69. }
  70. body footer .item:first-of-type a:last-of-type {
  71. color: #e43130;
  72. }
  73. body footer .item:first-of-type a:first-of-type {
  74. background-color: red;
  75. width: 0.25rem;
  76. height: 0.25rem;
  77. border-radius: 0.25rem;
  78. color: white;
  79. padding: 0.03rem;
  80. }

3.内容主体代码

  1. * 内容主体 */
  2. body main {
  3. /* 防止被页眉页脚挡住内容主体区 */
  4. margin-top: 0.5rem;
  5. padding-bottom: 0.6rem;
  6. }
  7. /* 轮播图 */
  8. body main .carousel .top {
  9. width: 100%;
  10. height: 1.5rem;
  11. background: #e43130;
  12. border-radius: 0 0 0.4rem 0.4rem;
  13. }
  14. body main .carousel img {
  15. width: 90%;
  16. border-radius: 0.1rem;
  17. margin-top: -1.4rem;
  18. margin-left: 5%;
  19. position: absolute;
  20. box-shadow: 0 0.01rem 0.2rem rgba(0, 0, 0, 0.2);
  21. }
  22. /* 主体内容 公共样式 */
  23. body main .navs,
  24. body main .entry,
  25. body main .prodlist {
  26. width: 96%;
  27. margin: auto;
  28. margin-top: 0.1rem;
  29. border-radius: 0.1rem;
  30. }
  31. /* 导航 */
  32. body main .navs {
  33. margin-top: 0.5rem;
  34. display: grid;
  35. grid-template-columns: repeat(5, 1fr);
  36. gap: 0.1rem;
  37. place-items: center;
  38. }
  39. body main .navs .item {
  40. width: 100%;
  41. display: grid;
  42. grid-template-rows: 0.5rem 0.3rem;
  43. }
  44. body main .navs .item a img {
  45. width: 0.5rem;
  46. display: block;
  47. margin: auto;
  48. }
  49. body main .navs .item a:last-of-type {
  50. place-self: center;
  51. font-size: smaller;
  52. }
  53. /* 秒杀-快速入口 */
  54. body main .entry {
  55. background-color: white;
  56. display: grid;
  57. grid-template-rows: 0.2rem, 1fr;
  58. padding: 0.1rem;
  59. gap: 0.2rem;
  60. }
  61. /* 顶部 */
  62. body main .entry .top {
  63. display: flex;
  64. place-content: space-between;
  65. gap: 0.1rem;
  66. place-items: center;
  67. }
  68. body main .entry .top .time {
  69. width: 1.5rem;
  70. display: flex;
  71. gap: 0.02rem;
  72. }
  73. body main .entry .top .time .hour,
  74. body main .entry .top .time .minute,
  75. body main .entry .top .time .second {
  76. width: 0.25rem;
  77. background-color: #fa2c19;
  78. color: white;
  79. border-radius: 0.05rem;
  80. text-align: center;
  81. }
  82. body main .entry .top .time span,
  83. body main .entry .top a:not(:first-of-type) {
  84. color: #fa2c19;
  85. font-weight: bold;
  86. }
  87. body main .entry .top a img {
  88. width: 0.15rem;
  89. }
  90. /* 底部 */
  91. body main .entry .bottom {
  92. display: flex;
  93. place-content: space-between;
  94. }
  95. body main .entry .bottom .item {
  96. display: grid;
  97. grid-template-rows: 0.6rem 1fr;
  98. place-items: center;
  99. }
  100. body main .entry .bottom .item img {
  101. width: 0.6rem;
  102. border-radius: 0.05rem;
  103. }
  104. body main .entry .bottom .item a {
  105. color: red;
  106. font-size: smaller;
  107. }
  108. /* 商品列表 */
  109. body main .prodlist {
  110. display: grid;
  111. grid-template-columns: repeat(2, 1fr);
  112. place-items: center;
  113. gap: 0.15rem;
  114. }
  115. body main .prodlist .item {
  116. display: flex;
  117. gap: 0.05rem;
  118. flex-flow: column;
  119. background-color: white;
  120. border-radius: 0.1rem;
  121. box-shadow: 0.02rem 0.02rem 0.05rem rgba(170, 170, 170, 0.603);
  122. }
  123. body main .prodlist .item img {
  124. width: 100%;
  125. border-radius: 0.1rem 0.1rem 0 0;
  126. }
  127. body main .prodlist .item > a,
  128. body main .prodlist .item > .desc {
  129. padding: 0 0.1rem;
  130. }
  131. body main .prodlist .item > a:first-of-type {
  132. height: 0.48rem;
  133. }
  134. body main .prodlist .item > a:first-of-type,
  135. body main .prodlist .item > a:last-of-type > span {
  136. font-size: larger;
  137. }
  138. body main .prodlist .item > a:last-of-type {
  139. color: red;
  140. }
  141. body main .prodlist .item .desc {
  142. height: 0.4rem;
  143. display: flex;
  144. place-items: center;
  145. gap: 0 0.05rem;
  146. }
  147. body main .prodlist .item .desc > a:first-of-type {
  148. width: 0.4rem;
  149. background-color: red;
  150. color: white;
  151. border-radius: 0.05rem;
  152. text-align: center;
  153. }
  154. body main .prodlist .item .desc > a:last-of-type {
  155. width: 0.5rem;
  156. background-color: #e9e8e8;
  157. color: black;
  158. border-radius: 0.05rem;
  159. text-align: center;
  160. }
  161. body main .prodlist .item .desc > a:nth-of-type(2) {
  162. font-size: x-small;
  163. color: #999;
  164. }

4.html代码

  1. <body>
  2. <!-- 页眉 -->
  3. <header>
  4. <span class="iconfont icon-fenlei"></span>
  5. <div class="serch">
  6. <img src="images/JD.png" alt="" />
  7. <a href="" class="iconfont icon-fangdajing"></a>
  8. <span>游戏本i7</span>
  9. </div>
  10. <a href="#">登录</a>
  11. </header>
  12. <!-- 内容主体 -->
  13. <main>
  14. <!-- 轮播图 -->
  15. <div class="carousel">
  16. <div class="top"></div>
  17. <!-- <div class="bottom"></div> -->
  18. <img src="images/lunbo.jpg" alt="" />
  19. </div>
  20. <!-- 导航 -->
  21. <ul class="navs">
  22. <li class="item">
  23. <a href="#"><img src="images/jdcs.png" /></a>
  24. <a href="#">京东超市</a>
  25. </li>
  26. <li class="item">
  27. <a href="#"><img src="images/smdq.png" /></a>
  28. <a href="#">数码电器</a>
  29. </li>
  30. <li class="item">
  31. <a href="#"><img src="images/jdxbh.png" /></a>
  32. <a href="#">京东新百货</a>
  33. </li>
  34. <li class="item">
  35. <a href="#"><img src="images/jdsx.png" /></a>
  36. <a href="#">京东生鲜</a>
  37. </li>
  38. <li class="item">
  39. <a href="#"><img src="images/jddj.png" /></a>
  40. <a href="#">京东到家</a>
  41. </li>
  42. <li class="item">
  43. <a href="#"><img src="images/czjf.png" /></a>
  44. <a href="#">充值缴费</a>
  45. </li>
  46. <li class="item">
  47. <a href="#"><img src="images/fjhd.png" /></a>
  48. <a href="#">附近好店</a>
  49. </li>
  50. <li class="item">
  51. <a href="#"><img src="images/lj.png" /></a>
  52. <a href="#">领券</a>
  53. </li>
  54. <li class="item">
  55. <a href="#"><img src="images/ljt.png" /></a>
  56. <a href="#">领金贴</a>
  57. </li>
  58. <li class="item">
  59. <a href="#"><img src="images/pulshy.png" /></a>
  60. <a href="#">PULS会员</a>
  61. </li>
  62. </ul>
  63. <!-- 秒杀-快速入口 -->
  64. <div class="entry">
  65. <div class="top">
  66. <a href="#"><h3>京东秒杀</h3></a>
  67. <a href="#">10点场</a>
  68. <div class="time">
  69. <div class="hour">01</div>
  70. <span>:</span>
  71. <div class="minute">20</div>
  72. <span>:</span>
  73. <div class="second">58</div>
  74. </div>
  75. <a href="#">爆款轮番秒 <img src="images/anniu.png" /></a>
  76. </div>
  77. <ul class="bottom">
  78. <li class="item">
  79. <img src="images/jdms/01.jpg" alt="" />
  80. <a href="#">¥88</a>
  81. </li>
  82. <li class="item">
  83. <img src="images/jdms/02.jpg" alt="" />
  84. <a href="#">¥188</a>
  85. </li>
  86. <li class="item">
  87. <img src="images/jdms/03.jpg" alt="" />
  88. <a href="#">¥66</a>
  89. </li>
  90. <li class="item">
  91. <img src="images/jdms/04.jpg" alt="" />
  92. <a href="#">¥10</a>
  93. </li>
  94. <li class="item">
  95. <img src="images/jdms/05.jpg" alt="" />
  96. <a href="#">¥188</a>
  97. </li>
  98. <li class="item">
  99. <img src="images/jdms/02.jpg" alt="" />
  100. <a href="#">¥188</a>
  101. </li>
  102. <li class="item">
  103. <img src="images/jdms/07.jpg" alt="" />
  104. <a href="#">¥99</a>
  105. </li>
  106. </ul>
  107. </div>
  108. <!-- 商品列表 -->
  109. <div class="prodlist">
  110. <div class="item">
  111. <img src="images/prod/24.webp" alt="" />
  112. <a href="#" class="titke">悦木之源(Origins)新一代灵芝水乳</a>
  113. <a href="#" class="price"><span>695</span>.00</a>
  114. <div class="desc">
  115. <a href="#">自营</a>
  116. <a href="#">5000+条评论</a>
  117. <a href="#">看相似</a>
  118. </div>
  119. </div>
  120. <div class="item">
  121. <img src="images/prod/23.webp" alt="" />
  122. <a href="#" class="titke">悦木之源(Origins)</a>
  123. <a href="#" class="price"><span>695</span>.00</a>
  124. <div class="desc">
  125. <a href="#">自营</a>
  126. <a href="#">5000+条评论</a>
  127. <a href="#">看相似</a>
  128. </div>
  129. </div>
  130. <div class="item">
  131. <img src="images/prod/22.webp" alt="" />
  132. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  133. <a href="#" class="price"><span>695</span>.00</a>
  134. <div class="desc">
  135. <a href="#">自营</a>
  136. <a href="#">5000+条评论</a>
  137. <a href="#">看相似</a>
  138. </div>
  139. </div>
  140. <div class="item">
  141. <img src="images/prod/21.webp" alt="" />
  142. <a href="#" class="titke">商品标题商品标题</a>
  143. <a href="#" class="price"><span>695</span>.00</a>
  144. <div class="desc">
  145. <a href="#">自营</a>
  146. <a href="#">5000+条评论</a>
  147. <a href="#">看相似</a>
  148. </div>
  149. </div>
  150. <div class="item">
  151. <img src="images/prod/20.webp" alt="" />
  152. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  153. <a href="#" class="price"><span>695</span>.00</a>
  154. <div class="desc">
  155. <a href="#">自营</a>
  156. <a href="#">5000+条评论</a>
  157. <a href="#">看相似</a>
  158. </div>
  159. </div>
  160. <div class="item">
  161. <img src="images/prod/19.webp" alt="" />
  162. <a href="#" class="titke">商品标题商品标题</a>
  163. <a href="#" class="price"><span>695</span>.00</a>
  164. <div class="desc">
  165. <a href="#">自营</a>
  166. <a href="#">5000+条评论</a>
  167. <a href="#">看相似</a>
  168. </div>
  169. </div>
  170. <div class="item">
  171. <img src="images/prod/18.webp" alt="" />
  172. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  173. <a href="#" class="price"><span>695</span>.00</a>
  174. <div class="desc">
  175. <a href="#">自营</a>
  176. <a href="#">5000+条评论</a>
  177. <a href="#">看相似</a>
  178. </div>
  179. </div>
  180. <div class="item">
  181. <img src="images/prod/17.webp" alt="" />
  182. <a href="#" class="titke">商品标题商品标题</a>
  183. <a href="#" class="price"><span>695</span>.00</a>
  184. <div class="desc">
  185. <a href="#">自营</a>
  186. <a href="#">5000+条评论</a>
  187. <a href="#">看相似</a>
  188. </div>
  189. </div>
  190. <div class="item">
  191. <img src="images/prod/16.webp" alt="" />
  192. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  193. <a href="#" class="price"><span>695</span>.00</a>
  194. <div class="desc">
  195. <a href="#">自营</a>
  196. <a href="#">5000+条评论</a>
  197. <a href="#">看相似</a>
  198. </div>
  199. </div>
  200. <div class="item">
  201. <img src="images/prod/15.webp" alt="" />
  202. <a href="#" class="titke">商品标题商品标题</a>
  203. <a href="#" class="price"><span>695</span>.00</a>
  204. <div class="desc">
  205. <a href="#">自营</a>
  206. <a href="#">5000+条评论</a>
  207. <a href="#">看相似</a>
  208. </div>
  209. </div>
  210. <div class="item">
  211. <img src="images/prod/14.webp" alt="" />
  212. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  213. <a href="#" class="price"><span>695</span>.00</a>
  214. <div class="desc">
  215. <a href="#">自营</a>
  216. <a href="#">5000+条评论</a>
  217. <a href="#">看相似</a>
  218. </div>
  219. </div>
  220. <div class="item">
  221. <img src="images/prod/13.webp" alt="" />
  222. <a href="#" class="titke">商品标题商品标题</a>
  223. <a href="#" class="price"><span>695</span>.00</a>
  224. <div class="desc">
  225. <a href="#">自营</a>
  226. <a href="#">5000+条评论</a>
  227. <a href="#">看相似</a>
  228. </div>
  229. </div>
  230. <div class="item">
  231. <img src="images/prod/12.webp" alt="" />
  232. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  233. <a href="#" class="price"><span>695</span>.00</a>
  234. <div class="desc">
  235. <a href="#">自营</a>
  236. <a href="#">5000+条评论</a>
  237. <a href="#">看相似</a>
  238. </div>
  239. </div>
  240. <div class="item">
  241. <img src="images/prod/11.webp" alt="" />
  242. <a href="#" class="titke">商品标题商品标题</a>
  243. <a href="#" class="price"><span>695</span>.00</a>
  244. <div class="desc">
  245. <a href="#">自营</a>
  246. <a href="#">5000+条评论</a>
  247. <a href="#">看相似</a>
  248. </div>
  249. </div>
  250. <div class="item">
  251. <img src="images/prod/10.webp" alt="" />
  252. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  253. <a href="#" class="price"><span>695</span>.00</a>
  254. <div class="desc">
  255. <a href="#">自营</a>
  256. <a href="#">5000+条评论</a>
  257. <a href="#">看相似</a>
  258. </div>
  259. </div>
  260. <div class="item">
  261. <img src="images/prod/09.webp" alt="" />
  262. <a href="#" class="titke">商品标题商品标题</a>
  263. <a href="#" class="price"><span>695</span>.00</a>
  264. <div class="desc">
  265. <a href="#">自营</a>
  266. <a href="#">5000+条评论</a>
  267. <a href="#">看相似</a>
  268. </div>
  269. </div>
  270. <div class="item">
  271. <img src="images/prod/08.webp" alt="" />
  272. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  273. <a href="#" class="price"><span>695</span>.00</a>
  274. <div class="desc">
  275. <a href="#">自营</a>
  276. <a href="#">5000+条评论</a>
  277. <a href="#">看相似</a>
  278. </div>
  279. </div>
  280. <div class="item">
  281. <img src="images/prod/07.webp" alt="" />
  282. <a href="#" class="titke">商品标题商品标题</a>
  283. <a href="#" class="price"><span>695</span>.00</a>
  284. <div class="desc">
  285. <a href="#">自营</a>
  286. <a href="#">5000+条评论</a>
  287. <a href="#">看相似</a>
  288. </div>
  289. </div>
  290. <div class="item">
  291. <img src="images/prod/06.webp" alt="" />
  292. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  293. <a href="#" class="price"><span>695</span>.00</a>
  294. <div class="desc">
  295. <a href="#">自营</a>
  296. <a href="#">5000+条评论</a>
  297. <a href="#">看相似</a>
  298. </div>
  299. </div>
  300. <div class="item">
  301. <img src="images/prod/05.webp" alt="" />
  302. <a href="#" class="titke">商品标题商品标题</a>
  303. <a href="#" class="price"><span>695</span>.00</a>
  304. <div class="desc">
  305. <a href="#">自营</a>
  306. <a href="#">5000+条评论</a>
  307. <a href="#">看相似</a>
  308. </div>
  309. </div>
  310. <div class="item">
  311. <img src="images/prod/04.webp" alt="" />
  312. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  313. <a href="#" class="price"><span>695</span>.00</a>
  314. <div class="desc">
  315. <a href="#">自营</a>
  316. <a href="#">5000+条评论</a>
  317. <a href="#">看相似</a>
  318. </div>
  319. </div>
  320. <div class="item">
  321. <img src="images/prod/03.webp" alt="" />
  322. <a href="#" class="titke">商品标题商品标题</a>
  323. <a href="#" class="price"><span>695</span>.00</a>
  324. <div class="desc">
  325. <a href="#">自营</a>
  326. <a href="#">5000+条评论</a>
  327. <a href="#">看相似</a>
  328. </div>
  329. </div>
  330. <div class="item">
  331. <img src="images/prod/02.webp" alt="" />
  332. <a href="#" class="titke">商品标题商品标题商品标题商品标题</a>
  333. <a href="#" class="price"><span>695</span>.00</a>
  334. <div class="desc">
  335. <a href="#">自营</a>
  336. <a href="#">5000+条评论</a>
  337. <a href="#">看相似</a>
  338. </div>
  339. </div>
  340. <div class="item">
  341. <img src="images/prod/01.webp" alt="" />
  342. <a href="#" class="titke">商品标题商品标题</a>
  343. <a href="#" class="price"><span>695</span>.00</a>
  344. <div class="desc">
  345. <a href="#">自营</a>
  346. <a href="#">5000+条评论</a>
  347. <a href="#">看相似</a>
  348. </div>
  349. </div>
  350. </div>
  351. </main>
  352. <!-- 页脚 -->
  353. <footer>
  354. <div class="item">
  355. <a href="#" class="iconfont icon-pay-jingdong"></a>
  356. <a href="#">首页</a>
  357. </div>
  358. <div class="item">
  359. <a href="#" class="iconfont icon-yingyong"></a>
  360. <a href="#">分类</a>
  361. </div>
  362. <div class="item">
  363. <a href="#" class="iconfont icon-xiajiang"></a>
  364. <a href="#">京喜</a>
  365. </div>
  366. <div class="item">
  367. <a href="#" class="iconfont icon-gouwucheman"></a>
  368. <a href="#">购物车</a>
  369. </div>
  370. <div class="item">
  371. <a href="#" class="iconfont icon-wode"></a>
  372. <a href="#">未登录</a>
  373. </div>
  374. </footer>
  375. </body>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议