博客列表 >1031 使用 grid / flex 快速搭建出淘宝网PC端首页框架

1031 使用 grid / flex 快速搭建出淘宝网PC端首页框架

放手去爱
放手去爱原创
2022年11月04日 14:06:02338浏览
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>淘宝PC端布局框架</title>
  8. <link rel="stylesheet" href="css/pc.css" />
  9. <style>* {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. body {
  15. min-height: 2000px;
  16. }
  17. /* 头部: 导航 */
  18. .wrap header .top {
  19. width: 100vw;
  20. height: 36px;
  21. background-color: yellow;
  22. }
  23. .wrap header .top .content {
  24. width: 1190px;
  25. height: inherit;
  26. background-color: wheat;
  27. margin: auto;
  28. }
  29. /* 头部: 快速入口 */
  30. .wrap header .entry {
  31. height: 100px;
  32. padding: 15px;
  33. /* background-color: #ccc; */
  34. }
  35. .wrap header .entry .content {
  36. max-width: 1190px;
  37. min-width: 940px;
  38. height: inherit;
  39. background-color: cyan;
  40. margin: auto;
  41. display: grid;
  42. grid-template-columns: 80px repeat(5, 1fr);
  43. grid-auto-rows: 80px;
  44. gap: 10px;
  45. padding: 10px;
  46. }
  47. .wrap header .entry .content .item {
  48. background-color: lightcyan;
  49. border-radius: 15px;
  50. }
  51. /* -------------------------------- */
  52. /* 主体 */
  53. .wrap main {
  54. max-width: 1190px;
  55. min-width: 940px;
  56. min-height: 1000px;
  57. margin: 20px auto;
  58. padding: 20px;
  59. background-color: lightgreen;
  60. }
  61. /* 搜索框 */
  62. .wrap main .search {
  63. height: 88px;
  64. display: grid;
  65. grid-template-columns: 190px 1fr 90px;
  66. gap: 10px;
  67. /* 粘性定位 */
  68. position: sticky;
  69. top: 0;
  70. }
  71. .wrap main .search .item {
  72. background-color: lightpink;
  73. }
  74. /* 主体导航区 */
  75. main .navs {
  76. height: 423px;
  77. margin: 20px 0;
  78. display: grid;
  79. grid-template-columns: 270px 1fr;
  80. gap: 10px;
  81. }
  82. main .navs > * {
  83. background-color: lightskyblue;
  84. }
  85. main .navs > .user {
  86. display: grid;
  87. /* 2行2列 */
  88. grid-template-columns: 564px 1fr;
  89. grid-template-rows: 42px 1fr;
  90. gap: 10px;
  91. }
  92. main .navs > .user > * {
  93. background-color: lightcyan;
  94. }
  95. main .navs > .user .user-top {
  96. grid-column: span 2;
  97. }
  98. /* 主体标题区 */
  99. main .title {
  100. background-color: lightcyan;
  101. display: flex;
  102. place-items: center;
  103. }
  104. main .title .tag {
  105. background: linear-gradient(to left, orangered, orange);
  106. color: white;
  107. border-radius: 5px;
  108. padding: 0 5px;
  109. margin-left: 6px;
  110. cursor: default;
  111. }
  112. /* 主体: 商品列表 */
  113. main .list {
  114. margin: 20px 0;
  115. display: grid;
  116. grid-template-columns: repeat(3, 1fr);
  117. grid-auto-rows: 172px;
  118. gap: 10px;
  119. }
  120. main .list > .item {
  121. background-color: lightcyan;
  122. border-radius: 6px;
  123. display: grid;
  124. grid-template-columns: 150px 1fr;
  125. gap: 10px;
  126. padding: 10px;
  127. }
  128. main .list > .item > * {
  129. background-color: wheat;
  130. border-radius: 6px;
  131. }
  132. main .list > .item img {
  133. width: 100%;
  134. border-radius: 6px;
  135. }
  136. main .list .item .detail {
  137. display: grid;
  138. grid-template-rows: 1fr 25px;
  139. padding: 10px;
  140. place-content: space-between;
  141. }
  142. main .list .item .detail > * {
  143. background-color: aqua;
  144. }
  145. /* 媒体查询 */
  146. @media (max-width: 940px) {
  147. .wrap header .entry .content {
  148. grid-template-columns: 80px repeat(4, 1fr);
  149. }
  150. main .list {
  151. grid-template-columns: repeat(2, 1fr);
  152. }
  153. main .navs {
  154. grid-template-columns: 1fr;
  155. }
  156. main .navs .cate {
  157. display: none;
  158. }
  159. }
  160. </style>
  161. </head>
  162. <body>
  163. <div class="wrap">
  164. <!-- (1) 头部 -->
  165. <header>
  166. <!-- 1. 顶部导航 -->
  167. <div class="top">
  168. <div class="content"></div>
  169. </div>
  170. <!-- 2. 快速入口 -->
  171. <div class="entry">
  172. <div class="content">
  173. <div class="item logo"></div>
  174. <div class="item"></div>
  175. <div class="item"></div>
  176. <div class="item"></div>
  177. <div class="item"></div>
  178. <div class="item"></div>
  179. </div>
  180. </div>
  181. </header>
  182. <!-- (2) 主体 -->
  183. <main>
  184. <!-- 1. 搜索框 -->
  185. <div class="search">
  186. <div class="item logo"></div>
  187. <div class="item input"></div>
  188. <div class="item ewm"></div>
  189. </div>
  190. <!-- 2. 导航区 -->
  191. <div class="navs">
  192. <!-- 1. 左侧分类 -->
  193. <div class="cate"></div>
  194. <!-- 2. 在侧轮播图与用户信息 -->
  195. <div class="user">
  196. <!-- 1. 顶部导航 -->
  197. <div class="user-top"></div>
  198. <!-- 左侧轮播图 -->
  199. <div class="slider"></div>
  200. <!-- 右侧用户信息 -->
  201. <div class="user-info"></div>
  202. </div>
  203. </div>
  204. <!-- 3. 标题区 -->
  205. <div class="title">
  206. <h2>猜你喜欢</h2>
  207. <div class="tag">个性推荐</div>
  208. </div>
  209. <!-- 4. 商品列表 -->
  210. <div class="list">
  211. <div class="item">
  212. <a href=""><img src="" alt="" /></a>
  213. <div class="detail">
  214. <div class="desc">商品描述商品描述商品描述商品描述</div>
  215. <div class="price">159</div>
  216. </div>
  217. </div>
  218. <div class="item">
  219. <a href=""><img src="" alt="" /></a>
  220. <div class="detail">
  221. <div class="desc">商品描述商品描述商品描述商品描述</div>
  222. <div class="price">159</div>
  223. </div>
  224. </div>
  225. <div class="item">
  226. <a href=""><img src="" alt="" /></a>
  227. <div class="detail">
  228. <div class="desc">商品描述商品描述商品描述商品描述</div>
  229. <div class="price">159</div>
  230. </div>
  231. </div>
  232. <div class="item">
  233. <a href=""><img src="" alt="" /></a>
  234. <div class="detail">
  235. <div class="desc">商品描述商品描述商品描述商品描述</div>
  236. <div class="price">159</div>
  237. </div>
  238. </div>
  239. <div class="item">
  240. <a href=""><img src="" alt="" /></a>
  241. <div class="detail">
  242. <div class="desc">商品描述商品描述商品描述商品描述</div>
  243. <div class="price">159</div>
  244. </div>
  245. </div>
  246. <div class="item">
  247. <a href=""><img src="" alt="" /></a>
  248. <div class="detail">
  249. <div class="desc">商品描述商品描述商品描述商品描述</div>
  250. <div class="price">159</div>
  251. </div>
  252. </div>
  253. <div class="item">
  254. <a href=""><img src="" alt="" /></a>
  255. <div class="detail">
  256. <div class="desc">商品描述商品描述商品描述商品描述</div>
  257. <div class="price">159</div>
  258. </div>
  259. </div>
  260. <div class="item">
  261. <a href=""><img src="" alt="" /></a>
  262. <div class="detail">
  263. <div class="desc">商品描述商品描述商品描述商品描述</div>
  264. <div class="price">159</div>
  265. </div>
  266. </div>
  267. <div class="item">
  268. <a href=""><img src="" alt="" /></a>
  269. <div class="detail">
  270. <div class="desc">商品描述商品描述商品描述商品描述</div>
  271. <div class="price">159</div>
  272. </div>
  273. </div>
  274. <div class="item">
  275. <a href=""><img src="" alt="" /></a>
  276. <div class="detail">
  277. <div class="desc">商品描述商品描述商品描述商品描述</div>
  278. <div class="price">159</div>
  279. </div>
  280. </div>
  281. <div class="item">
  282. <a href=""><img src="" alt="" /></a>
  283. <div class="detail">
  284. <div class="desc">商品描述商品描述商品描述商品描述</div>
  285. <div class="price">159</div>
  286. </div>
  287. </div>
  288. <div class="item">
  289. <a href=""><img src="" alt="" /></a>
  290. <div class="detail">
  291. <div class="desc">商品描述商品描述商品描述商品描述</div>
  292. <div class="price">159</div>
  293. </div>
  294. </div>
  295. <div class="item">
  296. <a href=""><img src="" alt="" /></a>
  297. <div class="detail">
  298. <div class="desc">商品描述商品描述商品描述商品描述</div>
  299. <div class="price">159</div>
  300. </div>
  301. </div>
  302. <div class="item">
  303. <a href=""><img src="" alt="" /></a>
  304. <div class="detail">
  305. <div class="desc">商品描述商品描述商品描述商品描述</div>
  306. <div class="price">159</div>
  307. </div>
  308. </div>
  309. <div class="item">
  310. <a href=""><img src="images/items/item-11.webp" alt="" /></a>
  311. <div class="detail">
  312. <div class="desc">商品描述商品描述商品描述商品描述</div>
  313. <div class="price">159</div>
  314. </div>
  315. </div>
  316. <div class="item">
  317. <a href=""><img src="" alt="" /></a>
  318. <div class="detail">
  319. <div class="desc">商品描述商品描述商品描述商品描述</div>
  320. <div class="price">159</div>
  321. </div>
  322. </div>
  323. <div class="item">
  324. <a href=""><img src="" alt="" /></a>
  325. <div class="detail">
  326. <div class="desc">商品描述商品描述商品描述商品描述</div>
  327. <div class="price">159</div>
  328. </div>
  329. </div>
  330. </div>
  331. </main>
  332. </div>
  333. </body>
  334. </html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议