search

博客列表 >grid布局:仿php中文网布局和我的相册小案例

grid布局:仿php中文网布局和我的相册小案例

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年12月30日 12:34:52875浏览

仿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属性自动填充来实现类似媒体查询功能

上一条：Vue自学：v-once指令的用法下一条：CSS引入方式及Css选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多