search

博客列表 >html页面布局实战-grid属性应用—PHP培训第十期

html页面布局实战-grid属性应用—PHP培训第十期

孔小帅
孔小帅原创
2020年01月01日 23:23:20771浏览

应用grid来实现页面-模仿网页效果图

二手交易商城

1、首先对需要模仿的页面进行分析，需要一个大的容器，然后将容器转化为grid网格容器,2、将网格容器画为三行两列：grid-template-rows基于行，进行划分区域,grid-template-columns基于列，进行区域划分；

按照这种思路，划分好网格后，将相应的内容放置到所需的区域中，使用grid-row/grid-columns来进行放置，也可以使用命名的方式，grid-area属性；

具体html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_second-hand.css">
  6.     <title>二手商城-grid布局练习</title>
  7. </head>
  8. <body>
  9. <!--首先进行dom布局-->
  10. <div class="container">
  11.     <div class="title1">
  12.         <a href="">抢好货</a>
  13.         <span>0低价, 便捷,安全,快速</span>
  14.     </div>
  15.     <div class="title2">
  16.         <span>热门分类</span>
  17.         <div class="links">
  18.             <a href="">美女写真</a>
  19.             <a href="">日本美女</a>
  20.             <a href="">国内美女</a>
  21.             <a href="">美国美女</a>
  22.             <a href="">AV美女</a>
  23.         </div>
  24.     </div>
  25.     <div class="goods">
  26.         <!--左边，商品详情-->
  27.         <div class="left-goods-list">
  28.             <div class="detail">
  29.                 <a href=""><img src="static/images/shop/shop1.jpg" alt=""></a>
  30.                 <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  31.                 <div>
  32.                     <span>&yen;333</span>
  33.                     <span>美女</span>
  34.                 </div>
  35.             </div>
  36.             <div class="detail">
  37.                 <a href=""><img src="static/images/shop/shop1.jpg" alt=""></a>
  38.                 <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  39.                 <div>
  40.                     <span>&yen;333</span>
  41.                     <span>美女</span>
  42.                 </div>
  43.             </div>
  44.             <div class="detail">
  45.                 <a href=""><img src="static/images/shop/shop1.jpg" alt=""></a>
  46.                 <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  47.                 <div>
  48.                     <span>&yen;333</span>
  49.                     <span>美女</span>
  50.                 </div>
  51.             </div>
  52.             <div class="detail">
  53.                 <a href=""><img src="static/images/shop/shop1.jpg" alt=""></a>
  54.                 <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  55.                 <div>
  56.                     <span>&yen;333</span>
  57.                     <span>美女</span>
  58.                 </div>
  59.             </div>
  60.             <div class="detail">
  61.                 <a href=""><img src="static/images/shop/shop1.jpg" alt=""></a>
  62.                 <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  63.                 <div>
  64.                     <span>&yen;333</span>
  65.                     <span>美女</span>
  66.                 </div>
  67.             </div>
  68.             <div class="detail">
  69.                 <a href=""><img src="static/images/shop/shop1.jpg" alt=""></a>
  70.                 <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  71.                 <div>
  72.                     <span>&yen;333</span>
  73.                     <span>美女</span>
  74.                 </div>
  75.             </div>
  76.             <div class="detail">
  77.                 <a href=""><img src="static/images/shop/shop1.jpg" alt=""></a>
  78.                 <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  79.                 <div>
  80.                     <span>&yen;333</span>
  81.                     <span>美女</span>
  82.                 </div>
  83.             </div>
  84.             <div class="detail">
  85.                 <a href=""><img src="static/images/shop/shop1.jpg" alt=""></a>
  86.                 <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  87.                 <div>
  88.                     <span>&yen;333</span>
  89.                     <span>美女</span>
  90.                 </div>
  91.             </div>
  92.         </div>
  93.         <div class="right-quick-entry">
  94.             <a href=""><img src="static/images/ad/1.png" alt=""></a>
  95.             <a href=""><img src="static/images/ad/2.png" alt=""></a>
  96.             <a href=""><img src="static/images/ad/3.png" alt=""></a>
  97.             <a href=""><img src="static/images/ad/4.png" alt=""></a>
  98.             <div>
  99.                 <a href=""><img src="static/images/ad/ad2.jpg" alt=""></a>
  100.                 <a href=""><img src="static/images/ad/image.png" alt=""></a>
  101.             </div>
  102.         </div>
  103.     </div>
  104. </div>
  105. </body>
  106. </html>

css样式代码:

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. *:not(body){
  6.     /*outline: 1px dashed red;*/
  7. }
  8. a{
  9.     text-decoration: none;
  10. }
  11. .container{
  12.     width: 1200px;
  13.     height: 500px;
  14.     background-color: #F7F7F7;
  15.     border-radius: 4px;
  16.     margin:30px auto;
  17.     display: grid;
  18.     grid-template-columns: 800px 1fr;
  19.     grid-template-rows: repeat(2,50px) 1fr;
  20. }
  21. .container:hover{
  22.     box-shadow: 0 0 5px #555555;
  23. }
  24. .container>.title1{
  25.     grid-row: 1/2;
  26.     grid-column: 1/3;
  27.     justify-content: center;
  28.     align-items: center;
  29.     border-bottom: 1px solid #333333;
  31. }
  32. .container>.title1 *{
  33.     outline: none;
  34. }
  35. .container>.title1>a{
  36.     font-size:32px;
  37.     margin:0 5px;
  38. }
  39. .container>.title1>span{
  40.     color:red;
  42. }
  44. .container>.title2{
  45. grid-row: 2/3;
  46.  grid-column: 1/3;
  47.     display: grid;
  48.     grid-template-columns: 100px 1fr;
  49.     grid-template-rows: auto;
  50.     align-items: center;
  51. }
  52. .container>.title2>span{
  53.     grid-column: 1/2;
  54.     gird-row:1/2;
  55.     font-size:23px;
  56.     color: red;
  57. }
  58. .container>.title2>links{
  59.     grid-column: 2/3;
  60.     gird-row:1/2
  61. }
  62. .container>.title2>.links>a{
  63.     margin-left:10px;
  64.  }
  65. .container>.title2>.links>a:hover{
  66.     color: red;
  67.     cursor: pointer;
  68. }
  70. .container>.goods{
  71.     grid-row: 3/4;
  72.     grid-column: 1/3;
  73.     display: grid;
  74.     grid-template-columns: 800px 1fr;
  75.     grid-template-rows: repeat(2 ,1fr);
  76. }
  77. .container>.goods>.left-goods-list{
  79.     grid-column: 1/2;
  80.     grid-row: 1/2;
  81.     display: grid;
  82.     grid-template-columns: repeat(4,1fr);
  83.     grid-template-rows:200px 200px;
  86. }
  87. .container>.goods>.left-goods-list>.detail{
  88.     display: grid;
  89.     grid-template-rows: repeat(3,1fr);
  90.     grid-template-columns: 1fr;
  91.     align-items: start;
  92.     justify-items: center;
  94. }
  95. .container>.goods>.left-goods-list>.detail>div{
  96.     display: grid;
  97.     grid-template-rows: 1fr;
  98.     grid-template-columns: repeat(2,1fr);
  99.     /*align-items: center;*/
  100.     /*justify-content: space-between;*/
  101. /*justify-items: start;*/
  103. }
  104. .container>.goods>.left-goods-list>.detail a{
  105.     font-size:13px;
  106. }
  107. .container>.goods>.left-goods-list>.detail>div>span{
  108. /*justify-items: start;*/
  109. }
  110. .container>.goods>.left-goods-list>.detail>div>span:first-of-type{
  111. margin-left:-50px;
  112.     color: red;
  113. }
  114. .container>.goods>.left-goods-list>.detail>div>span:last-of-type{
  115.  /*justify-self: self-end;*/
  116.     color: white;
  117.     background-color: #669900;
  118. }
  119. .container>.goods>.left-goods-list>.detail img{
  120.     width: 176px;
  121.     height: 123px;
  122. }

代码运行的效果

" class="reference-link">

应用gird来进行布局的总结：

1、 在进行布局是，画格子和填充都比较容易实现，但是在细节方面完善的时候就总是做得不是很到位，应该是对属性的应用还没有理解透彻，需要再次学习属性的应用范围；
2、 页面的谋划还是要很多练习了进行弥补的，继续加强练习，争取达到课程的要求。

上一条：Grid+Flex布局制作京东商城购物车、结算页静态页面，拼接头尾-20191231作业下一条：1225_jquery异步请求 第40课
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多