PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 210330 CSS grid布局仿写

210330 CSS grid布局仿写

xyphpblog
xyphpblog 原创
2021年04月03日 09:31:59 506浏览

原页面

仿写

  • index.css
  • header.css
  • nav.css
  • shop.css
  • recommend.css
  • grid.css
  • reset.css
  • demo1.html

index.css

  1. .header {
  2. background-color: #ff5000;
  3. color: #fff;
  4. height: 87px;
  5. position: fixed;
  6. left: 0;
  7. right: 0;
  8. top: 0;
  9. z-index: 100;
  10. }
  11. .main {
  12. position: absolute;
  13. top: 87px;
  14. left: 0;
  15. right: 0;
  16. }
  17. .row.divider1,
  18. .row.divider2,
  19. .row.divider3 {
  20. text-align: center;
  21. }
  22. .row.divider1 .title-line {
  23. background-color: #fff;
  24. display: flex;
  25. justify-content: space-evenly;
  26. padding: 1rem 8%;
  27. line-height: 4rem;
  28. flex-flow: row nowrap;
  29. }

header.css

  1. .header {
  2. display: flex;
  3. flex-flow: row nowrap;
  4. align-items: center;
  5. }
  6. .header > .logo {
  7. flex: 3;
  8. width: 9rem;
  9. text-align: center;
  10. font-weight: bolder;
  11. font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
  12. "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  13. font-size: 3rem;
  14. }
  15. .header > .search {
  16. background-color: #fff;
  17. flex: 6;
  18. display: flex;
  19. }
  20. .header .bar {
  21. height: 3rem;
  22. flex: 3rem;
  23. padding-left: 1.5rem;
  24. }
  25. .header > .search .zoom {
  26. color: #ff5000;
  27. line-height: 3rem;
  28. font-size: 2rem;
  29. font-weight: 200;
  30. padding-right: 1rem;
  31. }
  32. .header > .profile {
  33. flex: 4;
  34. display: flex;
  35. flex-flow: row nowrap;
  36. justify-content: center;
  37. }
  38. .header > .profile > .login {
  39. display: flex;
  40. flex-flow: row nowrap;
  41. }
  42. .header > .profile > .login .login-icon {
  43. padding-right: 1rem;
  44. }
  45. .header > .profile > .login .login-icon img {
  46. border-radius: 2rem;
  47. width: 4rem;
  48. height: 4rem;
  49. }
  50. .header > .profile > .login .login-right div:last-of-type {
  51. font-size: 1.1rem;
  52. font-weight: 200;
  53. background-color: #fff0e8;
  54. color: #ff5000;
  55. text-align: center;
  56. margin-top: 0.5rem;
  57. }
  58. .header > .barcode {
  59. flex: 1;
  60. display: flex;
  61. flex-flow: column nowrap;
  62. }
  63. .header > .barcode div:first-of-type {
  64. font-size: 3rem;
  65. }
  66. .header > .barcode div:last-of-type {
  67. font-size: 1rem;
  68. }
  69. .header > .cart {
  70. flex: 1;
  71. display: flex;
  72. flex-flow: column nowrap;
  73. }
  74. .header > .cart div:first-of-type {
  75. font-size: 3rem;
  76. }
  77. .header > .cart div:last-of-type {
  78. font-size: 1rem;
  79. }

nav.css

  1. .container .row.nav {
  2. /* background-color: rgb(235, 0, 67); */
  3. margin: 1rem 8%;
  4. margin-top: 0;
  5. gap: 0;
  6. }
  7. .container .row.nav .nav-left img {
  8. height: 100%;
  9. }
  10. .container .row.nav .nav-left img {
  11. width: 100%;
  12. }
  13. .container .row.nav .nav-middle {
  14. display: flex;
  15. flex-flow: column nowrap;
  16. }
  17. .container .row.nav .nav-middle img {
  18. height: 100%;
  19. max-width: 100%;
  20. position: absolute;
  21. }
  22. .container .row.nav .nav-middle .middle1 {
  23. height: 76.5%;
  24. position: relative;
  25. }
  26. .container .row.nav .nav-middle .middle2 {
  27. height: 23.5%;
  28. position: relative;
  29. }
  30. .container .row.nav .nav-right {
  31. display: flex;
  32. flex-flow: column nowrap;
  33. }

shop.css

  1. .container .row.shop-recommend {
  2. background-color: #fff;
  3. margin: 1rem 8%;
  4. margin-bottom: 0;
  5. display: flex;
  6. justify-content: space-between;
  7. align-items: center;
  8. padding-right: 1rem;
  9. }
  10. .container .row.shop-recommend img {
  11. filter: invert(100%);
  12. width: 30%;
  13. }
  14. .container .row.shop-recommend .shop-recommend-left {
  15. padding: 1rem;
  16. display: flex;
  17. }
  18. .container .row.shop-recommend .shop-recommend-left div {
  19. color: rgba(0, 0, 0, 0.38);
  20. display: flex;
  21. flex-flow: column nowrap;
  22. justify-content: center;
  23. margin-left: 2rem;
  24. }
  25. .container .row.shop-recommend .shop-recommend-right {
  26. color: rgba(0, 0, 0, 0.38);
  27. }
  28. /* images */
  29. .container .row.shop-image {
  30. background-color: #fff;
  31. margin: 1rem 8%;
  32. margin-top: 0;
  33. padding: 1rem 1rem;
  34. }
  35. .container .row.shop-image .shop-title {
  36. padding-bottom: 1rem;
  37. }
  38. .container .row.shop-image .image-area {
  39. display: grid;
  40. grid-template-columns: repeat(3, auto);
  41. gap: 0.1rem;
  42. max-width: 100%;
  43. }
  44. .container .row.shop-image > div {
  45. /* border: 1px solid; */
  46. max-width: 100%;
  47. }
  48. .container .row.shop-image .image-area img:nth-of-type(2) {
  49. grid-area: 2/1/3/2;
  50. max-width: 100%;
  51. }
  52. .container .row.shop-image .image-area img:nth-of-type(3) {
  53. grid-area: 1/2/3/3;
  54. place-self: stretch;
  55. max-width: 100%;
  56. }

recommend.css

  1. .container .row.recommend {
  2. margin-top: 2rem;
  3. gap: 1em;
  4. }
  5. .container .row.recommend img {
  6. max-width: 100%;
  7. }
  8. .container .row.recommend .recommend-item .price {
  9. display: flex;
  10. flex-flow: row nowrap;
  11. justify-content: space-between;
  12. }
  13. .container .row.recommend .recommend-item .price .left {
  14. color: #ff5000;
  15. }
  16. .container .row.recommend .recommend-item .price .right {
  17. color: rgba(0, 0, 0, 0.38);
  18. }

grid.css

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. body {
  7. width: 100vw;
  8. height: 100vh;
  9. display: grid;
  10. place-content: center;
  11. }
  12. .container {
  13. min-width: 80vw;
  14. display: grid;
  15. gap: 0.5em;
  16. }
  17. .container > .row {
  18. display: grid;
  19. grid-template-columns: repeat(12, 1fr);
  20. min-height: 3em;
  21. gap: 0.5em;
  22. }
  23. .container > .row > .item {
  24. padding: 1em;
  25. border: 1px solid;
  26. }
  27. .col-12 {
  28. grid-area: auto / span 12;
  29. }
  30. .col-11 {
  31. grid-area: auto / span 11;
  32. }
  33. .col-10 {
  34. grid-area: auto / span 10;
  35. }
  36. .col-9 {
  37. grid-area: auto / span 9;
  38. }
  39. .col-8 {
  40. grid-area: auto / span 8;
  41. }
  42. .col-7 {
  43. grid-area: auto / span 7;
  44. }
  45. .col-6 {
  46. grid-area: auto / span 6;
  47. }
  48. .col-5 {
  49. grid-area: auto / span 5;
  50. }
  51. .col-4 {
  52. grid-area: auto / span 4;
  53. }
  54. .col-3 {
  55. grid-area: auto / span 3;
  56. }
  57. .col-2 {
  58. grid-area: auto / span 2;
  59. }
  60. .col-1 {
  61. grid-area: auto / span 1;
  62. }

reset.css

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. li {
  7. list-style: none;
  8. }
  9. a {
  10. text-decoration: none;
  11. color: #7b7b7b;
  12. }
  13. body {
  14. background-color: rgb(238, 238, 238);
  15. font-size: 1.2rem;
  16. }
  17. html {
  18. font-size: 10px;
  19. }
  20. .bar {
  21. outline: none;
  22. border: none;
  23. border-radius: 0.2rem;
  24. }
  25. @media screen and (min-width: 480px) {
  26. html {
  27. font-size: 12px;
  28. }
  29. }
  30. @media screen and (min-width: 640px) {
  31. html {
  32. font-size: 14px;
  33. }
  34. }
  35. @media screen and (min-wdith: 720px) {
  36. html {
  37. font-size: 16px;
  38. }
  39. }

demo1.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>taoobaoo</title>
  8. <link rel="stylesheet" href="static/css/reset.css">
  9. <link rel="stylesheet" href="static/icon-font/iconfont.css">
  10. <link rel="stylesheet" href="static/css/index.css">
  11. <link rel="stylesheet" href="static/css/header.css">
  12. <link rel="stylesheet" href="static/css/grid.css">
  13. <link rel="stylesheet" href="static/css/nav.css">
  14. <link rel="stylesheet" href="static/css/shop.css">
  15. <link rel="stylesheet" href="static/css/recommend.css">
  16. </head>
  17. <body>
  18. <!-- header -->
  19. <header class="header">
  20. <!-- logo -->
  21. <div class="logo">淘 宝 网</div>
  22. <!-- search bar -->
  23. <div class="search">
  24. <input type="text" class="bar" placeholder="hehehe">
  25. <div class="zoom iconfont icon-search"></div>
  26. </div>
  27. <!-- profile -->
  28. <div class="profile">
  29. <div class="login">
  30. <div class="login-icon"><img src="static/images/header/profile.jpg" alt=""></div>
  31. <div class="login-right">
  32. <div class="login-text">登录 / 免费注册</div>
  33. <div class="tao-coin">?领淘金币抵钱</div>
  34. </div>
  35. </div>
  36. </div>
  37. <!-- barcode -->
  38. <div class="barcode ">
  39. <div class="barcode-icon iconfont icon-menu"></div>
  40. <div class="barcode-text">淘宝lite</div>
  41. </div>
  42. <!-- shopping cart -->
  43. <div class="cart">
  44. <div class="cart-icon iconfont icon-shopping-cart"></div>
  45. <div class="cart-text">购物车</div>
  46. </div>
  47. </header>
  48. <!-- main -->
  49. <main class="main">
  50. <div class="container">
  51. <!-- divider1 -->
  52. <div class="row divider1">
  53. <div class="title-line col-12">
  54. <div class="left iconfont icon-menu">商品分类</div>
  55. <div class="right">天猫 聚划算</div>
  56. </div>
  57. </div>
  58. <!-- 导航 -->
  59. <div class="row nav">
  60. <!-- 导航左 -->
  61. <div class="nav-left col-2"><img src="static/images/nav/list.jpg" alt=""></div>
  62. <!-- 导航中 -->
  63. <div class="nav-middle col-8">
  64. <div class="middle1">
  65. <img src="static/images/category-right/1.jpg" alt="">
  66. </div>
  67. <div class="middle2">
  68. <img src="static/images/nav/bottom.png" alt="">
  69. </div>
  70. </div>
  71. <!-- 导航右 -->
  72. <div class="nav-right col-2">
  73. <img src="static/images/category-right/2.jpg" alt="">
  74. <img src="static/images/category-right/3.jpg" alt="">
  75. </div>
  76. </div>
  77. <!-- divider2 -->
  78. <!-- <div class="row divider2">
  79. <div class="title-line col-12">天猫 聚划算</div>
  80. </div> -->
  81. <!-- 每日好店 -->
  82. <!-- 每日好店标题部分 -->
  83. <div class="row shop-recommend">
  84. <!-- 左边 -->
  85. <div class="shop-recommend-left">
  86. <img src="static/images/nice-shop/shop-title.jpg" alt="">
  87. <div>你可能喜欢的店铺</div>
  88. </div>
  89. <!-- 右边 -->
  90. <div class="shop-recommend-right">更多</div>
  91. </div>
  92. <!-- 每日好店 图片部分 -->
  93. <div class="row shop-image">
  94. <!-- 每日好店 第一个 -->
  95. <div class="shop-item col-3">
  96. <div class="shop-title">万能市集</div>
  97. <div class="image-area">
  98. <img src="static/images/nice-shop/shoe1.jpg" alt="">
  99. <img src="static/images/nice-shop/shoe1.jpg" alt="">
  100. <img src="static/images/nice-shop/shoe3.jpg" alt="">
  101. </div>
  102. </div>
  103. <!--每日好店 第二个 -->
  104. <div class="shop-item col-3">
  105. <div class="shop-title">淘宝江湖</div>
  106. <div class="image-area">
  107. <img src="static/images/nice-shop/dress1.jpg" alt="">
  108. <img src="static/images/nice-shop/dress2.jpg" alt="">
  109. <img src="static/images/nice-shop/dress3.jpg" alt="">
  110. </div>
  111. </div>
  112. <!-- 每日好店 第三个 -->
  113. <div class="shop-item col-3">
  114. <div class="shop-title">深藏不露</div>
  115. <div class="image-area">
  116. <img src="static/images/nice-shop/string1.jpg" alt="">
  117. <img src="static/images/nice-shop/string2.jpg" alt="">
  118. <img src="static/images/nice-shop/string3.jpg" alt="">
  119. </div>
  120. </div>
  121. <!-- 每日好店 第四个 -->
  122. <div class="shop-item col-3">
  123. <div class="shop-title">高手林立</div>
  124. <div class="image-area">
  125. <img src="static/images/nice-shop/bag1.jpg" alt="">
  126. <img src="static/images/nice-shop/bag2.jpg" alt="">
  127. <img src="static/images/nice-shop/bag3.jpg" alt="">
  128. </div>
  129. </div>
  130. </div>
  131. <!-- divider3 -->
  132. <div class="row divider3">
  133. <div class="title-line col-12">
  134. <p>猜你喜欢</p>
  135. <p>實時推薦最適合你的寶貝</p>
  136. </div>
  137. </div>
  138. <!-- 猜你喜欢 -->
  139. <!-- 第一行 -->
  140. <div class="row recommend">
  141. <div class="col-1"></div>
  142. <div class="recommend-item col-2">
  143. <img src="static/images/recommend/1.jpg" alt="">
  144. <div class="desc">hehehe</div>
  145. <div class="price">
  146. <div class="left">$123</div>
  147. <div class="right">销量:0</div>
  148. </div>
  149. </div>
  150. <div class="recommend-item col-2">
  151. <img src="static/images/recommend/2.jpg" alt="">
  152. <div class="desc">hehehe</div>
  153. <div class="price">
  154. <div class="left">$123</div>
  155. <div class="right">销量:0</div>
  156. </div>
  157. </div>
  158. <div class="recommend-item col-2">
  159. <img src="static/images/recommend/3.jpg" alt="">
  160. <div class="desc">hehehe</div>
  161. <div class="price">
  162. <div class="left">$123</div>
  163. <div class="right">销量:0</div>
  164. </div>
  165. </div>
  166. <div class="recommend-item col-2">
  167. <img src="static/images/recommend/4.jpg" alt="">
  168. <div class="desc">hehehe</div>
  169. <div class="price">
  170. <div class="left">$123</div>
  171. <div class="right">销量:0</div>
  172. </div>
  173. </div>
  174. <div class="recommend-item col-2">
  175. <img src="static/images/recommend/5.jpg" alt="">
  176. <div class="desc">hehehe</div>
  177. <div class="price">
  178. <div class="left">$123</div>
  179. <div class="right">销量:0</div>
  180. </div>
  181. </div>
  182. <div class="col-1"></div>
  183. </div>
  184. <!-- 第二行 -->
  185. <div class="row recommend">
  186. <div class="col-1"></div>
  187. <div class="recommend-item col-2">
  188. <img src="static/images/recommend/6.jpg" alt="">
  189. <div class="desc">hehehe</div>
  190. <div class="price">
  191. <div class="left">$123</div>
  192. <div class="right">销量:0</div>
  193. </div>
  194. </div>
  195. <div class="recommend-item col-2">
  196. <img src="static/images/recommend/7.jpg" alt="">
  197. <div class="desc">hehehe</div>
  198. <div class="price">
  199. <div class="left">$123</div>
  200. <div class="right">销量:0</div>
  201. </div>
  202. </div>
  203. <div class="recommend-item col-2">
  204. <img src="static/images/recommend/8.jpg" alt="">
  205. <div class="desc">hehehe</div>
  206. <div class="price">
  207. <div class="left">$123</div>
  208. <div class="right">销量:0</div>
  209. </div>
  210. </div>
  211. <div class="recommend-item col-2">
  212. <img src="static/images/recommend/9.jpg" alt="">
  213. <div class="desc">hehehe</div>
  214. <div class="price">
  215. <div class="left">$123</div>
  216. <div class="right">销量:0</div>
  217. </div>
  218. </div>
  219. <div class="recommend-item col-2">
  220. <img src="static/images/recommend/10.jpg" alt="">
  221. <div class="desc">hehehe</div>
  222. <div class="price">
  223. <div class="left">$123</div>
  224. <div class="right">销量:0</div>
  225. </div>
  226. </div>
  227. <div class="col-1"></div>
  228. </div>
  229. <!-- 第三行 -->
  230. <div class="row recommend">
  231. <div class="col-1"></div>
  232. <div class="recommend-item col-2">
  233. <img src="static/images/recommend/11.webp" alt="">
  234. <div class="desc">hehehe</div>
  235. <div class="price">
  236. <div class="left">$123</div>
  237. <div class="right">销量:0</div>
  238. </div>
  239. </div>
  240. <div class="recommend-item col-2">
  241. <img src="static/images/recommend/12.webp" alt="">
  242. <div class="desc">hehehe</div>
  243. <div class="price">
  244. <div class="left">$123</div>
  245. <div class="right">销量:0</div>
  246. </div>
  247. </div>
  248. <div class="recommend-item col-2">
  249. <img src="static/images/recommend/13.webp" alt="">
  250. <div class="desc">hehehe</div>
  251. <div class="price">
  252. <div class="left">$123</div>
  253. <div class="right">销量:0</div>
  254. </div>
  255. </div>
  256. <div class="recommend-item col-2">
  257. <img src="static/images/recommend/14.webp" alt="">
  258. <div class="desc">hehehe</div>
  259. <div class="price">
  260. <div class="left">$123</div>
  261. <div class="right">销量:0</div>
  262. </div>
  263. </div>
  264. <div class="recommend-item col-2">
  265. <img src="static/images/recommend/15.webp" alt="">
  266. <div class="desc">hehehe</div>
  267. <div class="price">
  268. <div class="left">$123</div>
  269. <div class="right">销量:0</div>
  270. </div>
  271. </div>
  272. <div class="col-1"></div>
  273. </div>
  274. <!-- keep space -->
  275. <div class="row"></div>
  276. <div class="row"></div>
  277. </div>
  278. </main>
  279. <!-- footer -->
  280. <footer class="footer">
  281. </footer>
  282. </body>
  283. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议