Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html页面布局实战-grid属性应用—PHP培训第十期
Blogger Information
Blog 4
fans 0
comment 1
visits 2687
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html页面布局实战-grid属性应用—PHP培训第十期
孔小帅
Original
671 people have browsed it

应用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、 页面的谋划还是要很多练习了进行弥补的，继续加强练习，争取达到课程的要求。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：页面分析是第一步, 写出基本的html dom 结构是第二步, 加上有语义的类名是第三步, 然后再去写css完成页面布局, 想一下, 是不是挺简单的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post