search

博客列表 >基于grid布局的二手交易（1228前端学习开发作业）

基于grid布局的二手交易（1228前端学习开发作业）

小辰
小辰原创
2020年01月04日 22:27:10670浏览

1.先来效果图

主要是：左边的网格是四列两行，右边的是一列三行，然后再细分。

2.HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手商品列表</title>
  6.     <link rel="stylesheet" href="css/secondhand.css">
  7. </head>
  8. <body>
  9. <!--交易专区-->
  10. <div class="public-second-hand">
  11. <!--    抢好货标题-->
  12.     <div class="title1">
  13.         <a href="">抢好货</a>
  14.         <span>0元低价，便捷，安全</span>
  15.     </div>
  16. <!--    分类标题-->
  17.     <div class="title2">
  18.         <span>热门分类</span>
  19. <!--        在光标所在行按CTRL+D可以快速复制当前行-->
  20.         <a href="">美女写真</a>
  21.         <a href="">日本美女</a>
  22.         <a href="">美国美女</a>
  23.         <a href="">国内美女</a>
  24.     </div>
  25. <!--    商品内容区-->
  26.     <div class="goods">
  27. <!--        商品列表-->
  28.         <div class="goods-list">
  29. <!--            单个商品块-->
  30.             <div class="intro">
  31.                 <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  32.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  33.                 <div>
  34.                     <span>¥ 333</span>
  35.                     <span>美女</span>
  36.                 </div>
  37.             </div>
  38.             <!--            单个商品块-->
  39.             <div class="intro">
  40.                 <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  41.                 <a href="">美女性感写真海报墙艺术装饰画贴画图2</a>
  42.                 <div>
  43.                     <span>¥ 333</span>
  44.                     <span>美女</span>
  45.                 </div>
  46.             </div>
  47.             <!--            单个商品块-->
  48.             <div class="intro">
  49.                 <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  50.                 <a href="">美女性感写真海报墙艺术装饰画贴画图3</a>
  51.                 <div>
  52.                     <span>¥ 333</span>
  53.                     <span>美女</span>
  54.                 </div>
  55.             </div>
  56.             <!--            单个商品块-->
  57.             <div class="intro">
  58.                 <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  59.                 <a href="">美女性感写真海报墙艺术装饰画贴画图4</a>
  60.                 <div>
  61.                     <span>¥ 333</span>
  62.                     <span>美女</span>
  63.                 </div>
  64.             </div>
  65.             <!--            单个商品块-->
  66.             <div class="intro">
  67.                 <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  68.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  69.                 <div>
  70.                     <span>¥ 333</span>
  71.                     <span>美女</span>
  72.                 </div>
  73.             </div>
  74.             <!--            单个商品块-->
  75.             <div class="intro">
  76.                 <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  77.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  78.                 <div>
  79.                     <span>¥ 333</span>
  80.                     <span>美女</span>
  81.                 </div>
  82.             </div>
  83.             <!--            单个商品块-->
  84.             <div class="intro">
  85.                 <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  86.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  87.                 <div>
  88.                     <span>¥ 333</span>
  89.                     <span>美女</span>
  90.                 </div>
  91.             </div>
  92.             <!--            单个商品块-->
  93.             <div class="intro">
  94.                 <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  95.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  96.                 <div>
  97.                     <span>¥ 333</span>
  98.                     <span>美女</span>
  99.                 </div>
  100.             </div>
  101.         </div>
  102. <!--        右侧图片功能区-->
  103.         <div class="quick-entry">
  104.             <div>
  105.                 <a href=""><img src="img/1.png" alt=""></a>
  106.                 <a href=""><img src="img/2.png" alt=""></a>
  107.                 <a href=""><img src="img/3.png" alt=""></a>
  108.                 <a href=""><img src="img/4.png" alt=""></a>
  109.             </div>
  110.             <div>
  111.                 <a href=""><img src="img/ad2.jpg" alt=""></a>
  112.                 <a href=""><img src="img/image.png" alt=""></a>
  113.             </div>
  114.         </div>
  115.     </div>
  116. </div>
  117. </body>
  118. </html>

3.css代码

  1. /*重置样式*/
  2. @import "reset.css";
  3. .public-second-hand {
  4.     width: 1200px;
  5.     padding: 10px;
  6.     /*防止盒子撑大*/
  7.     box-sizing: border-box;
  8.     margin:auto;
  9.     /*加圆角*/
  10.     border-radius: 5px;
  11.     background-color: #fff;
  12. }
  13. /*鼠标经过加阴影*/
  14. .public-second-hand:hover {
  15.     box-shadow: 0 0 8px #888;
  16. }
  17. /*抢好货标题*/
  18. .public-second-hand > .title1 {
  19.     height: 50px;
  20.     /*一个像素的的底部实线*/
  21.     border-bottom: 1px solid #cccccc;
  22.     box-sizing: border-box;
  23. }
  24. .public-second-hand > .title1 > a {
  25.     font-size: 23px;
  26.     margin-right: 20px;
  27. }
  28. .public-second-hand > .title1 > span {
  29.     color: red;
  30. }
  31. /*分类标题*/
  32. .public-second-hand > .title2 {
  33.     height: 55px;
  34. }
  35. .public-second-hand > .title2 > span {
  36.     color: red;
  37.     font-size: 23px;
  38. }
  39. .public-second-hand > .title2 > span ~ a {
  40.     padding-left: 20px;
  41. }
  42. /*鼠标经过分类标题时的颜色变化*/
  43. .public-second-hand > .title2 > span ~ a:hover {
  44.     color: lightcoral;
  45. }
  48. /*商品内容区*/
  49. .public-second-hand > .goods {
  50.     /*转为GRID*/
  51.     display: grid;
  52.     /*画列*/
  53.     grid-template-columns: 790px 390px;
  54.     /*画行*/
  55.     grid-template-rows: 440px ;
  56. }
  57. .public-second-hand > .goods > .goods-list {
  58.     /*转GRID*/
  59.     display: grid;
  60.     /*画四列两行*/
  61.     /*repeat(4,1fr)属性为重复几次后面的参数*/
  62.     grid-template-columns:repeat(4,1fr);
  63.     grid-template-rows: repeat(2,1fr);
  64. }
  65. .public-second-hand > .goods > .goods-list > .intro{
  66.     width: 176px;
  67.     height: 200px;
  68.     padding: 5px;
  69.     box-sizing: border-box;
  70.     display: grid;
  71.     /*画一列三行*/
  72.     grid-template-columns:1fr;
  73.     grid-template-rows: repeat(3,1fr);
  74.     /*设置行间距*/
  75.     grid-row-gap: 5px;
  76. }
  77. .public-second-hand > .goods > .goods-list > .intro img {
  78.     border: 1px solid #cccccc;
  79.     border-radius: 5px;
  80. }
  81. .public-second-hand > .goods > .goods-list > .intro > div {
  82.     display: grid;
  83.     grid-template-columns: repeat(2,1fr);
  84.     grid-template-rows: 1fr;
  85. }
  86. .public-second-hand > .goods > .goods-list > .intro span:first-of-type {
  87.     color: red;
  88. }
  90. .public-second-hand > .goods > .goods-list > .intro span:last-of-type {
  91.     color: white;
  92.     background-color: #55ce9f;
  93.     padding: 0 5px;
  94.     margin-left: auto;
  95. }
  96. /*右侧图片功能区*/
  97. .public-second-hand > .goods > .quick-entry {
  98.     display: grid;
  99.     /*画两行一列，间距10px*/
  100.     grid-template-columns: 1fr;
  101.     grid-template-rows: repeat(2,1fr);
  102.     grid-row-gap: 10px;
  103. }
  104. .public-second-hand > .goods > .quick-entry > div:first-of-type {
  105.     display: grid;
  106.     /*画两行两列*/
  107.     grid-template-columns:repeat(2,1fr);
  108.     grid-template-rows: repeat(2,1fr);
  109.     grid-gap: 5px;
  110. }
  111. .public-second-hand > .goods > .quick-entry > div:first-of-type img {
  112.     width: 190px;
  113. }
  114. .public-second-hand > .goods > .quick-entry > div:last-of-type img {
  115.     width: 390px;
  116.     height: 60px;
  117.     margin-top: 10px;

4.手写的属性

5.小结

grid布局比felx布局代码多，但是能够比较直观，方便的达到布局的效果。只要把一个页面的结构，划分清楚，就可以很容易的实现效果。

上一条：0103作业，PHP基础知识，输出方式，字符串下一条：学号:572616 -元旦1月1日商城系统首页和购物车页面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多