search

博客列表 >Grid布局实践二手商城(12月28日)

Grid布局实践二手商城(12月28日)

孤心泪的博客
孤心泪的博客原创
2020年01月02日 15:14:07551浏览

1 分析布局


简单划分布局区域如上图（使用grid布局的主要为商品列表和快速入口部分）

2 html和css代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>grid版二手商城</title>
  6.     <link rel="stylesheet" href="grid_second_hand.css">
  7. </head>
  8. <body>
  9. <!--二手交易专区-->
  10. <div class="public-second-hand">
  11.     <!--标题1-->
  12.     <div class="title1">
  13.         <a href="">抢好货</a>
  14.         <span>低价，便捷，安全，快速</span>
  15.     </div>
  16.     <!--标题2-->
  17.     <div class="title2">
  18.         <span>热门分类</span>
  19.         <a href="">美女写真</a>
  20.         <a href="">日本美女</a>
  21.         <a href="">美国美女</a>
  22.         <a href="">国内美女</a>
  23.         <a href="">AV美女</a>
  24.     </div>
  25.     <!--商品展示区-->
  26.     <div class="goods">
  27.         <!--分为左右两个格子-->
  28.         <!--1.左边商品列表-->
  29.         <div class="goods-list">
  30.             <!--商品简介-->
  31.             <div class="intro">
  32.                 <a href=""><img src="../../image/shop/shop1.jpg" alt=""></a>
  33.                 <p>美女性感写真海报图片美女性感写真海报图</p>
  34.                 <div>
  35.                     <span>&yen;666</span>
  36.                     <span>美女</span>
  37.                 </div>
  38.             </div>
  39.             <div class="intro">
  40.                 <a href=""><img src="../../image/shop/shop1.jpg" alt=""></a>
  41.                 <p>美女性感写真海报图片美女性感写真海报图</p>
  42.                 <div>
  43.                     <span>&yen;666</span>
  44.                     <span>美女</span>
  45.                 </div>
  46.             </div>
  47.             <div class="intro">
  48.                 <a href=""><img src="../../image/shop/shop1.jpg" alt=""></a>
  49.                 <p>美女性感写真海报图片美女性感写真海报图</p>
  50.                 <div>
  51.                     <span>&yen;666</span>
  52.                     <span>美女</span>
  53.                 </div>
  54.             </div>
  55.             <div class="intro">
  56.                 <a href=""><img src="../../image/shop/shop1.jpg" alt=""></a>
  57.                 <p>美女性感写真海报图片美女性感写真海报图</p>
  58.                 <div>
  59.                     <span>&yen;666</span>
  60.                     <span>美女</span>
  61.                 </div>
  62.             </div>
  63.             <div class="intro">
  64.                 <a href=""><img src="../../image/shop/shop1.jpg" alt=""></a>
  65.                 <p>美女性感写真海报图片美女性感写真海报图</p>
  66.                 <div>
  67.                     <span>&yen;666</span>
  68.                     <span>美女</span>
  69.                 </div>
  70.             </div>
  71.             <div class="intro">
  72.                 <a href=""><img src="../../image/shop/shop1.jpg" alt=""></a>
  73.                 <p>美女性感写真海报图片美女性感写真海报图</p>
  74.                 <div>
  75.                     <span>&yen;666</span>
  76.                     <span>美女</span>
  77.                 </div>
  78.             </div>
  79.             <div class="intro">
  80.                 <a href=""><img src="../../image/shop/shop1.jpg" alt=""></a>
  81.                 <p>美女性感写真海报图片美女性感写真海报图</p>
  82.                 <div>
  83.                     <span>&yen;666</span>
  84.                     <span>美女</span>
  85.                 </div>
  86.             </div>
  87.             <div class="intro">
  88.                 <a href=""><img src="../../image/shop/shop1.jpg" alt=""></a>
  89.                 <p>美女性感写真海报图片美女性感写真海报图</p>
  90.                 <div>
  91.                     <span>&yen;666</span>
  92.                     <span>美女</span>
  93.                 </div>
  94.             </div>
  95.         </div>
  96.         <!--2.右边的功能是快速入口-->
  97.         <div class="quick-entry">
  98.             <a href=""><img src="../../image/ad/1.png" alt=""></a>
  99.             <a href=""><img src="../../image/ad/2.png" alt=""></a>
  100.             <a href=""><img src="../../image/ad/3.png" alt=""></a>
  101.             <a href=""><img src="../../image/ad/4.png" alt=""></a>
  102.             <div>
  103.                 <a href=""><img src="../../image/ad/image.png" alt=""></a>
  104.                 <a href=""><img src="../../image/ad/ad2.jpg" alt=""></a>
  105.             </div>
  106.         </div>
  107.     </div>
  108. </div>
  109. </body>
  110. </html>

css

  1. /*引入重置样式*/
  2. @import "../reset.css";
  4. *:not(body){
  5.     outline: 1px dashed red;
  6. }
  8. /*二手交易专区的样式表*/
  9. .public-second-hand {
  10.     width: 1200px;
  11.     padding: 10px;
  12.     box-sizing: border-box;
  13.     margin: auto;
  14.     border-radius: 5px;
  15.     background-color: #fff;
  16. }
  18. .public-second-hand:hover {
  19.     box-shadow: 0 0 8px #888;
  20. }
  22. /*标题1*/
  23. .public-second-hand > .title1 {
  24.     height: 50px;
  25.     border-bottom: 1px solid #ccc;
  26.     box-sizing: border-box;
  27. }
  29. .public-second-hand > .title1 >a{
  30.     font-size: 23px;
  31.     margin-right: 20px;
  32. }
  33. .public-second-hand > .title1 >span{
  34.     color: red;
  35. }
  37. /*标题2*/
  38. .public-second-hand > .title2 {
  39.     height: 55px;
  40. }
  41. .public-second-hand > .title2 >span {
  42.     color: red;
  43.     font-size: 23px;
  44. }
  45. .public-second-hand > .title2 >span ~a{
  46.     padding-left: 20px;
  47. }
  48. .public-second-hand > .title2 >span ~a:hover{
  49.     color: lightblue;
  50. }
  51. .goods{
  52.     display: grid;
  54.     grid-template-columns: 760px 1fr;
  55. }
  56. .goods-list {
  57.     padding: 10px;
  58.     box-sizing: border-box;
  59.     display: grid;
  60.     grid-template-columns:repeat(4,178px) ;
  61.     grid-template-rows: repeat(2,200px);
  62.     grid-column-gap: 10px;
  63.     grid-row-gap: 10px;
  64.     justify-content: space-between;
  65. }
  66. .goods-list > .intro {
  67.     display: flex;
  68.     flex-direction: column;
  69.     justify-content: space-between;
  70.     border-radius: 8px;
  71. }
  72. .public-second-hand>.goods>.goods-list>.intro span:first-of-type{
  73.     color: red;
  74. }
  75. .public-second-hand > .goods > .goods-list > .intro>div{
  76.     display: flex;
  77.     justify-content: space-between;
  78. }
  79.     /*商品图片*/
  80. .public-second-hand > .goods > .goods-list > .intro img {
  81.     border: 1px solid #cccccc;
  82.     border-radius: 5px;
  83.     width: 176px;
  84.     height: 120px;
  85.     display: block;
  86. }
  87. /* 右侧快速入口*/
  88. .public-second-hand>.goods>.quick-entry{
  89.     padding: 10px;
  90.     box-sizing: border-box;
  91.     display: grid;
  92.     grid-template-columns:repeat(2,190px);
  93.     grid-template-rows:repeat(2,130px) 136px ;
  94.     grid-column-gap: 20px;
  95.     grid-row-gap: 10px;
  96.     justify-content: space-between;
  97. }
  98. .public-second-hand>.goods>.quick-entry>a> img{
  99.     width: 190px;
  100.     height: 130px;
  101.     border-radius: 8px;
  102. }
  103. .public-second-hand>.goods>.quick-entry>div>a>img{
  104.     width: 393px;
  105.     height: 60px;
  106.     display: block;
  107. }

总结

1.对grid布局还不够熟练，细致的地方掌握不到位，需要加强联系
2.对于复杂的结构，使用grid布局时划分不够清晰

上一条：PHP协程：并发 shell_exec下一条：laravel数据库访问--php培训九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多