Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局:仿php中文网布局和我的相册小案例
Blogger Information
Blog 145
fans 7
comment 7
visits 164523
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
grid布局:仿php中文网布局和我的相册小案例
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
876 people have browsed it

仿php中文网首页布局

1.代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>仿PHP中文网页面布局</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         ul{
  15.             list-style: none;
  16.         }
  17.         body{
  18.             min-width: 1400px;
  19.         }
  20.         header{
  21.             height: 4rem;
  22.             background-color: lightblue;
  23.         }
  24.         footer{
  25.             height: 10rem;
  26.             background-color: #000000;
  27.             color:white;
  28.         }
  29.         main{
  30.             min-height: 40rem;
  31.             width: 1200px;
  32.             margin: 2rem auto;
  33.             /* background-color: #D3D3D3; */
  34.         }
  35.         main > .main-top{
  36.             display: grid;
  37.             grid-template-columns: 12rem 62rem;
  38.             grid-template-rows: 4rem 18rem 8rem ;
  39.             gap:0.4rem;
  40.             background-color:#8B0000;
  41.             height: 30.8rem;
  42.             place-content: center;
  43.             border-radius: 0.5rem;
  44.         }
  45.         .main-top > .top{
  46.             grid-area: 1 / 2 / 2 / 3;
  47.             display: flex;
  48.             justify-content: center;
  49.             align-items: center;
  50.             background-color: lightgreen;
  51.         }
  53.         .main-top > .top > li{
  54.             width: 8rem;
  55.             text-align: center;
  56.         }
  57.         .main-top > aside{
  58.             background-color: #20B2AA;
  59.             grid-area: span 3 ;
  60.         }
  61.         .main-top > .banner{
  62.             background-color: lightpink;
  63.         }
  64.         .main-top > div:last-child{
  65.             display: grid;
  66.             grid-template-columns: repeat(4,15rem);
  67.             gap:0.5rem;
  68.             margin: 0 auto;
  69.             /* place-content: center; */
  70.         }
  71.         .main-top > div:last-child > .item{
  72.             background-color: lightseagreen;
  73.             border-radius: 0.5rem;
  74.         }
  75.         .container{
  76.             margin-top: 1rem;
  77.             background-color: olive;
  78.             display: grid;
  79.             grid-template-columns: repeat(5,14rem);
  80.             grid-template-rows: 4rem repeat(3,10rem);
  81.             place-content: center space-evenly;
  82.             grid-row-gap:0.4rem ;
  83.             padding-bottom: 1rem;
  84.             border-radius: 0.5rem;
  85.         }
  86.         .container > .item{
  87.             background-color: lightsalmon;
  88.             border-radius: 0.5rem;
  89.         }
  90.         .container > span {
  91.             grid-area: span 1 / span 5;
  92.             text-align: center;
  93.             line-height: 4rem;
  94.         }
  95.         .container > .item:first-of-type{
  96.             grid-area:span 2;
  97.         }
  98.     </style>
  99. </head>
  100. <body>
  101.     <header>页头</header>
  102.     <main>
  103.         <div class="main-top">
  104.             <ul class="top">
  105.                 <li>menu1</li>
  106.                 <li>menu2</li>
  107.                 <li>menu3</li>
  108.                 <li>menu4</li>
  109.                 <li>menu5</li>
  110.                 <li>menu6</li>
  111.                 <li>menu7</li>
  112.                 <input type="text">
  113.             </ul>
  114.             <aside>
  115.                 侧边菜单
  116.             </aside>
  117.             <div class="banner">
  118.                 幻灯片
  119.             </div>
  120.             <div>
  121.                 <div class="item"></div>
  122.                 <div class="item"></div>
  123.                 <div class="item"></div>
  124.                 <div class="item"></div>
  126.             </div>
  127.         </div>
  128.         <!-- 精品课程区 -->
  129.         <div class="container">
  130.             <span>标题</span>
  131.             <div class="item"></div>
  132.             <div class="item"></div>
  133.             <div class="item"></div>
  134.             <div class="item"></div>
  135.             <div class="item"></div>
  136.             <div class="item"></div>
  137.             <div class="item"></div>
  138.             <div class="item"></div>
  139.             <div class="item"></div>
  140.             <div class="item"></div>
  141.             <div class="item"></div>
  142.             <div class="item"></div>
  143.             <div class="item"></div>
  144.             <div class="item"></div>
  145.         </div>
  146.     </main>
  147.     <footer>页脚</footer>
  148. </body>
  149. </html>

2.布局效果图:

我的相册小案例

1.代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>我的相册</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         body{
  15.             background-color: #FFB6C1;
  16.         }
  17.         body > div:first-child{
  18.             width:6rem ;
  19.             margin: 2rem auto;
  20.             text-align: center;
  21.             color: #fff;
  22.         }
  23.         .container{
  24.             display: grid;
  25.             grid-template-columns: repeat(auto-fit,minmax(12rem,1fr));
  26.             grid-gap: 2rem;
  27.             padding: 2rem;
  28.         }
  29.         .container > .item {
  30.             display: flex;
  31.             flex-flow: column nowrap;
  32.             width: 12rem;
  33.             height: 13rem;
  34.             align-items: center;
  35.             background-color: #fff;
  36.             border-radius: 0.5rem;
  37.             justify-content: space-evenly;    
  38.         }
  39.         .container > .item > img{
  40.             width: 10rem;
  41.             height: 12rem,;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div><h2>我的相册</h2></div>
  48.     <div class="container">
  49.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片1</span></div>
  50.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片2</span></div>
  51.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片3</span></div>
  52.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片4</span></div>
  53.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片5</span></div>
  54.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片6</span></div>
  55.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片7</span></div>
  56.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片8</span></div>
  57.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片9</span></div>
  58.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片10</span></div>
  59.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片11</span></div>
  60.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片12</span></div>
  61.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片13</span></div>
  62.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片14</span></div>
  63.         <div class="item"><img src="image/bg.jpg" alt=""><span>图片15</span></div>
  64.     </div>
  65. </body>
  66. </html>

2.代码效果图

grid的媒体查询与专业的媒体查询有什么区别

1.使用媒体查询:媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。
语法：@media 媒体类型 and (媒体特性) {你的样式}
2.grid媒体查询主要通过auto-fit属性自动填充来实现类似媒体查询功能

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：挺好的
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