search

博客列表 >网页布局实战演练

网页布局实战演练

Yang_Sir
Yang_Sir原创
2020年04月16日 19:54:56481浏览

网页布局实战演练

1. 网络相册

  • grid布局，使用grid自动填充，适应页面展示。
  • 全部源码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>我的相册</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.       }
  16.       body {
  17.         background-color: #f3f3e6;
  18.       }
  19.       h1 {
  20.         text-align: center;
  21.         color: #0080ff;
  22.         margin-top: 30px;
  23.         letter-spacing: 5px;
  24.         font-size: 2rem;
  25.         font-weight: 650;
  26.         text-shadow: 2px 2px 2px yellowgreen;
  27.       }
  28.       .container {
  29.         min-width: 100vw;
  30.         min-height: 100vh;
  31.         padding: 50px;
  32.         display: grid;
  33.         grid-template-columns: repeat(auto-fill, 250px);
  34.         grid-template-rows: repeat(auto-fill, 280px);
  35.         justify-content: space-around;
  36.         align-content: space-around;
  37.         gap: 25px;
  38.       }
  39.       .container > .item {
  40.         border-radius: 10px;
  41.         background-color: #80ffff;
  42.         padding: 10px;
  43.         display: flex;
  44.         flex-flow: column nowrap;
  45.         align-items: center;
  46.         justify-content: space-around;
  47.       }
  48.       .container img {
  49.         width: 100%;
  50.       }
  51.       .container > .item:hover {
  52.         box-shadow: 0 0 10px #0000ff;
  53.         width: calc(100% * 1.02);
  54.         background-color: rgb(223, 236, 150);
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <h1>我的相册</h1>
  60.     <div class="container">
  61.       <div class="item">
  62.         <a href=""><img src="images/1.jpg" alt="" /></a>
  63.         <a href="">太极</a>
  64.       </div>
  65.       <div class="item">
  66.         <a href=""><img src="images/1.jpg" alt="" /></a>
  67.         <a href="">太极</a>
  68.       </div>
  69.       <div class="item">
  70.         <a href=""><img src="images/1.jpg" alt="" /></a>
  71.         <a href="">太极</a>
  72.       </div>
  73.       <div class="item">
  74.         <a href=""><img src="images/1.jpg" alt="" /></a>
  75.         <a href="">太极</a>
  76.       </div>
  77.       <div class="item">
  78.         <a href=""><img src="images/1.jpg" alt="" /></a>
  79.         <a href="">太极</a>
  80.       </div>
  81.       <div class="item">
  82.         <a href=""><img src="images/1.jpg" alt="" /></a>
  83.         <a href="">太极</a>
  84.       </div>
  85.       <div class="item">
  86.         <a href=""><img src="images/1.jpg" alt="" /></a>
  87.         <a href="">太极</a>
  88.       </div>
  89.       <div class="item">
  90.         <a href=""><img src="images/1.jpg" alt="" /></a>
  91.         <a href="">太极</a>
  92.       </div>
  93.       <div class="item">
  94.         <a href=""><img src="images/1.jpg" alt="" /></a>
  95.         <a href="">太极</a>
  96.       </div>
  97.       <div class="item">
  98.         <a href=""><img src="images/1.jpg" alt="" /></a>
  99.         <a href="">太极</a>
  100.       </div>
  101.       <div class="item">
  102.         <a href=""><img src="images/1.jpg" alt="" /></a>
  103.         <a href="">太极</a>
  104.       </div>
  105.       <div class="item">
  106.         <a href=""><img src="images/1.jpg" alt="" /></a>
  107.         <a href="">太极</a>
  108.       </div>
  109.     </div>
  110.   </body>
  111. </html>

效果图：

2. 仿栅格布局组件

  • 使用grid布局中的网格区域选择填充，实现组件开发栅格布局
  • 组件源代码：
  1.  * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. .body {
  7.   max-width: 100vw;
  8.   min-height: 100vh;
  9.   display: flex;
  10.   justify-content: center;
  11.   align-items: center;
  12. }
  13. .container {
  14.   display: grid;
  15.   gap: 5px 0;
  16. }
  17. .row {
  18.   display: grid;
  19.   grid-template-columns: repeat(12, 1fr);
  20.   gap: 5px;
  21. }
  22. .row > .item {
  23.   border: 1px solid;
  24.   background-color: #80ff80;
  25. }
  27. .col-2 {
  28.   grid-column-end: span 2;
  29. }
  30. .col-3 {
  31.   grid-column-end: span 3;
  32. }
  34. .col-4 {
  35.   grid-column-end: span 4;
  36. }
  37. .col-5 {
  38.   grid-column-end: span 5;
  39. }
  40. .col-6 {
  41.   grid-column-end: span 6;
  42. }
  43. .col-7 {
  44.   grid-column-end: span 7;
  45. }
  46. .col-8 {
  47.   grid-column-end: span 8;
  48. }
  49. .col-9 {
  50.   grid-column-end: span 9;
  51. }
  52. .col-10 {
  53.   grid-column-end: span 10;
  54. }
  55. .col-11 {
  56.   grid-column-end: span 11;
  57. }
  58. .col-12 {
  59.   grid-column-end: span 12;
  60. }

  • 演示用HTML代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>栅格组件布局</title>
    7.   <link rel="stylesheet" href="col.css" />
    8. </head>
    9. <body>
    10.   <div class="container">
    11.     <div class="row">
    12.       <div class="item col-2">2</div>
    13.       <div class="item col-4">4</div>
    14.       <div class="item col-6">6</div>
    15.     </div>
    16.     <div class="row">
    17.       <div class="item col-4">2</div>
    18.       <div class="item col-4">4</div>
    19.       <div class="item col-4">4</div>
    20.     </div>
    21.     <div class="row">
    22.       <div class="item col-2">2</div>
    23.       <div class="item col-8">8</div>
    24.       <div class="item col-2">2</div>
    25.     </div>
    26.     <div class="row">
    27.       <div class="item col-12">12</div>
    28.     </div>
    29.   </div>
    30. </body>
    31. </html>

    效果图：

    3. 仿实战项目首页布局

    • flex和grid搭配使用，实现大部分网页布局
    • html源码
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>实战项目首页模仿</title>
    7.   <link rel="stylesheet" href="font_icon/iconfont.css" />
    8.   <link rel="stylesheet" href="css/index.css" />
    9. </head>
    10. <body>
    11.   <div class="head">
    12.     <!-- 页眉 -->
    13.     <header>
    14.       <a href="">首页</a>
    15.       <a href="">专题</a>
    16.       <a href="">网站地图</a>
    17.       <a href="">二手商品</a>
    18.       <a href="">讨论区</a>
    19.       <span>
    20.         <a href=""><i class="iconfont icon-shouye"></i>登录</a>
    21.         <a href="">注册</a>
    22.       </span>
    23.     </header>
    25.     <!-- 搜索导航区 -->
    26.     <section class="search-nav">
    27.       <div class="logo-search">
    28.         <a href=""><img src="images/logo.png" alt="logo" /></a>
    29.         <div class="search">
    30.           <input type="search" id="search" />
    31.           <label for="search" class="iconfont icon-sousuo"></label>
    32.         </div>
    33.         <div class="tu">
    34.           <a href="" class="iconfont icon-zan"></a>
    35.           <a href="" class="iconfont icon-atm"></a>
    36.           <a href="" class="iconfont icon-shangchuan"></a>
    37.           <a href="" class="iconfont icon-yiliaohangyedeICON-"></a>
    38.           <a href="" class="iconfont icon-huiyuan"></a>
    39.           <a href="" class="iconfont icon-fangda"></a>
    40.         </div>
    41.       </div>
    42.       <!-- 导航区 -->
    43.       <nav>
    44.         <div class="nav">
    45.           <a href="" class="tubiao"><i class="iconfont icon-wendang1"></i></a>
    46.           <a href="" class="a2">导航</a>
    47.           <a href="">导航</a>
    48.           <a href="">导航</a>
    49.           <a href="">导航</a>
    50.           <a href="">导航</a>
    51.           <a href="" class="a2">导航</a>
    52.           <a href="">导航</a>
    53.           <a href="">导航</a>
    54.           <a href="">导航</a>
    55.           <a href="">导航</a>
    56.         </div>
    57.         <div class="nav">
    58.           <a href="" class="tubiao"><i class="iconfont icon-wendang1"></i></a>
    59.           <a href="" class="a2">导航</a>
    60.           <a href="">导航</a>
    61.           <a href="">导航</a>
    62.           <a href="">导航</a>
    63.           <a href="">导航</a>
    64.           <a href="" class="a2">导航</a>
    65.           <a href="">导航</a>
    66.           <a href="">导航</a>
    67.           <a href="">导航</a>
    68.           <a href="">导航</a>
    69.         </div>
    70.         <div class="nav">
    71.           <a href="" class="tubiao"><i class="iconfont icon-wendang1"></i></a>
    72.           <a href="" class="a2">导航</a>
    73.           <a href="">导航</a>
    74.           <a href="">导航</a>
    75.           <a href="">导航</a>
    76.           <a href="">导航</a>
    77.           <a href="" class="a2">导航</a>
    78.           <a href="">导航</a>
    79.           <a href="">导航</a>
    80.           <a href="">导航</a>
    81.           <a href="">导航</a>
    82.         </div>
    83.         <div class="nav">
    84.           <a href="" class="tubiao"><i class="iconfont icon-wendang1"></i></a>
    85.           <a href="" class="a2">导航</a>
    86.           <a href="">导航</a>
    87.           <a href="">导航</a>
    88.           <a href="">导航</a>
    89.           <a href="">导航</a>
    90.           <a href="" class="a2">导航</a>
    91.           <a href="">导航</a>
    92.           <a href="">导航</a>
    93.           <a href="">导航</a>
    94.           <a href="">导航</a>
    95.         </div>
    96.       </nav>
    97.     </section>
    98.     <section class="tu-2">
    99.       <a href=""><img src="images/2.jpg" alt="图1" /></a>
    100.       <a href=""><img src="images/banner-right.jpg" alt="图2" /></a>
    101.     </section>
    102.   </div>
    103.   <main>
    104.     <h1 class="main-title"><span> 新闻资讯</span></h1>
    105.     <div class="news">
    106.       <div class="news-1">
    107.         <a href=""><img src="images/news.jpg" alt="新闻图1" /> </a>
    108.         <a href=""><img src="images/n-2.jpg" alt="新闻图2" /> </a>
    109.         <a href="">图2说</a>
    110.         <a href=""><img src="images/n-3.jpg" alt="新闻图3" /> </a>
    111.         <a href="">图3说</a>
    112.       </div>
    114.       <div class="news-2">
    115.         <a href="">新闻头条新闻头条新闻</a>
    116.         <span>[新闻]</span>
    117.         <span>[新闻]</span>
    118.         <span>[新闻]</span>
    119.         <span>[新闻]</span>
    120.         <span></span>
    121.         <span>[新闻]</span>
    122.         <span>[新闻]</span>
    123.         <span>[新闻]</span>
    124.         <span>[新闻]</span>
    125.         <span>[新闻]</span>
    126.         <span>[新闻]</span>
    127.         <a href="">新闻标题1</a>
    128.         <a href="">新闻标题2</a>
    129.         <a href="">新闻标题3</a>
    130.         <a href="">新闻标题4</a>
    131.         <a href=""></a>
    132.         <a href="">新闻标题6</a>
    133.         <a href="">新闻标题7</a>
    134.         <a href="">新闻标题8</a>
    135.         <a href="">新闻标题9</a>
    136.         <a href="">新闻标题10</a>
    137.         <a href="">新闻标题11</a>
    138.       </div>
    140.       <div class="news-2">
    141.         <a href="">促销头条促销头条</a>
    142.         <span>[促销]</span>
    143.         <span>[促销]</span>
    144.         <span>[促销]</span>
    145.         <span>[促销]</span>
    146.         <span></span>
    147.         <span>[促销]</span>
    148.         <span>[促销]</span>
    149.         <span>[促销]</span>
    150.         <span>[促销]</span>
    151.         <span>[促销]</span>
    152.         <span>[促销]</span>
    153.         <a href="">促销标题1</a>
    154.         <a href="">促销标题2</a>
    155.         <a href="">促销标题3</a>
    156.         <a href="">促销标题4</a>
    157.         <a href=""></a>
    158.         <a href="">促销标题6</a>
    159.         <a href="">新闻标题7</a>
    160.         <a href="">新闻标题8</a>
    161.         <a href="">新闻标题9</a>
    162.         <a href="">新闻标题10</a>
    163.         <a href="">新闻标题11</a>
    164.       </div>
    165.     </div>
    167.     <h1 class="main-title"><span> 图片专区</span></h1>
    168.     <div class="photo">
    169.       <div class="photo-area">
    170.         <h2><a href="">美女</a><small>纵观艺术摄影</small></h2>
    171.         <a href="">
    172.           <img src="images/img2.jpg" alt="tu" />
    173.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    174.         </a>
    175.         <a href="">
    176.           <img src="images/img2.jpg" alt="tu" />
    177.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    178.         </a>
    179.         <a href="">
    180.           <img src="images/img2.jpg" alt="tu" />
    181.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    182.         </a>
    183.         <a href="">
    184.           <img src="images/img2.jpg" alt="tu" />
    185.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    186.         </a>
    187.       </div>
    188.       <div class="photo-area">
    189.         <h2><a href="">美女</a><small>纵观艺术摄影</small></h2>
    190.         <a href="">
    191.           <img src="images/img2.jpg" alt="tu" />
    192.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    193.         </a>
    194.         <a href="">
    195.           <img src="images/img2.jpg" alt="tu" />
    196.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    197.         </a>
    198.         <a href="">
    199.           <img src="images/img2.jpg" alt="tu" />
    200.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    201.         </a>
    202.         <a href="">
    203.           <img src="images/img2.jpg" alt="tu" />
    204.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    205.         </a>
    206.       </div>
    207.       <div class="photo-area">
    208.         <h2><a href="">美女</a><small>纵观艺术摄影</small></h2>
    209.         <a href="">
    210.           <img src="images/img2.jpg" alt="tu" />
    211.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    212.         </a>
    213.         <a href="">
    214.           <img src="images/img2.jpg" alt="tu" />
    215.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    216.         </a>
    217.         <a href="">
    218.           <img src="images/img2.jpg" alt="tu" />
    219.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    220.         </a>
    221.         <a href="">
    222.           <img src="images/img2.jpg" alt="tu" />
    223.           <span>愿你生活的都是每一天都是快快乐乐的</span>
    224.         </a>
    225.       </div>
    226.     </div>
    228.     <h1 class="main-title"><span> 二手市场</span></h1>
    229.     <div class="forsale">
    230.       <h2><a href="">抢好货</a><small>0低价, 便捷,安全,快速</small></h2>
    231.       <div class="classify">
    232.         <h2>热门分类</h2>
    233.         <a href="">分类1</a>
    234.         <a href="">分类2</a>
    235.         <a href="">分类3</a>
    236.         <a href="">分类4</a>
    237.         <a href="">分类5</a>
    238.       </div>
    239.       <div class="hot">
    240.         <div class="star">
    241.           <div class="star-area">
    242.             <a href=""><img src="images/shop5.jpg" alt="" /> </a>
    243.             <a href=""
    244.               ><img src="" alt="" />美女性感写真海报墙艺术装饰画贴画图</a
    245.             >
    246.             <p>
    247.               <span class="price">￥ 453</span><span class="bj">写真</span>
    248.             </p>
    249.           </div>
    250.           <div class="star-area">
    251.             <a href=""><img src="images/shop5.jpg" alt="" /> </a>
    252.             <a href=""
    253.               ><img src="" alt="" />美女性感写真海报墙艺术装饰画贴画图</a
    254.             >
    255.             <p>
    256.               <span class="price">￥ 453</span><span class="bj">写真</span>
    257.             </p>
    258.           </div>
    259.           <div class="star-area">
    260.             <a href=""><img src="images/shop5.jpg" alt="" /> </a>
    261.             <a href=""
    262.               ><img src="" alt="" />美女性感写真海报墙艺术装饰画贴画图</a
    263.             >
    264.             <p>
    265.               <span class="price">￥ 453</span><span class="bj">写真</span>
    266.             </p>
    267.           </div>
    268.           <div class="star-area">
    269.             <a href=""><img src="images/shop5.jpg" alt="" /> </a>
    270.             <a href=""
    271.               ><img src="" alt="" />美女性感写真海报墙艺术装饰画贴画图</a
    272.             >
    273.             <p>
    274.               <span class="price">￥ 453</span><span class="bj">写真</span>
    275.             </p>
    276.           </div>
    277.           <div class="star-area">
    278.             <a href=""><img src="images/shop5.jpg" alt="" /> </a>
    279.             <a href=""
    280.               ><img src="" alt="" />美女性感写真海报墙艺术装饰画贴画图</a
    281.             >
    282.             <p>
    283.               <span class="price">￥ 453</span><span class="bj">写真</span>
    284.             </p>
    285.           </div>
    286.           <div class="star-area">
    287.             <a href=""><img src="images/shop5.jpg" alt="" /> </a>
    288.             <a href=""
    289.               ><img src="" alt="" />美女性感写真海报墙艺术装饰画贴画图</a
    290.             >
    291.             <p>
    292.               <span class="price">￥ 453</span><span class="bj">写真</span>
    293.             </p>
    294.           </div>
    295.           <div class="star-area">
    296.             <a href=""><img src="images/shop5.jpg" alt="" /> </a>
    297.             <a href=""
    298.               ><img src="" alt="" />美女性感写真海报墙艺术装饰画贴画图</a
    299.             >
    300.             <p>
    301.               <span class="price">￥ 453</span><span class="bj">写真</span>
    302.             </p>
    303.           </div>
    304.           <div class="star-area">
    305.             <a href=""><img src="images/shop5.jpg" alt="" /> </a>
    306.             <a href=""
    307.               ><img src="" alt="" />美女性感写真海报墙艺术装饰画贴画图</a
    308.             >
    309.             <p>
    310.               <span class="price">￥ 453</span><span class="bj">写真</span>
    311.             </p>
    312.           </div>
    313.         </div>
    314.         <div class="other">
    315.           <a href=""><img src="images/1.png" alt="" /> </a>
    316.           <a href=""><img src="images/1.png" alt="" /></a>
    317.           <a href=""><img src="images/1.png" alt="" /></a>
    318.           <a href=""><img src="images/1.png" alt="" /></a>
    319.           <a class="gg" href=""><img src="images/11.png" alt="" /></a>
    320.           <a class="gg" href=""><img src="images/12.jpg" alt="" /></a>
    321.         </div>
    322.       </div>
    323.     </div>
    324.     <h1 class="main-title"><span> 合作单位</span></h1>
    325.   </main>
    326.   <footer>
    327.     <div class="cooperation">
    328.       <a href="">php中文网1</a>
    329.       <a href="">php中文网2</a>
    330.       <a href="">php中文网3</a>
    331.       <a href="">php中文网4</a>
    332.       <a href="">php中文网5</a>
    333.       <a href="">php中文网6</a>
    334.       <a href="">php中文网7</a>
    335.       <a href="">php中文网8</a>
    336.       <a href="">php中文网9</a>
    337.       <a href="">php中文网10</a>
    338.       <a href="">php中文网11</a>
    339.       <a href="">php中文网12</a>
    340.       <a href="">php中文网13</a>
    341.       <a href="">php中文网14</a>
    342.       <a href="">php中文网15</a>
    343.     </div>
    344.     <div class="foot">
    345.       <div class="information">
    346.         <div class="foot-nav">
    347.           <a href="">导航1</a>
    348.           <a href="">导航2</a>
    349.           <a href="">导航3</a>
    350.           <a href="">导航4</a>
    351.           <a href="">导航5</a>
    352.           <a href="">导航6</a>
    353.         </div>
    354.         <div class="info">
    355.           <h1>LOGO</h1>
    356.           <p>
    357.             2019 fengniao.com. All rights reserved .
    358.             安徽闹着玩有限公司（无聊网）版权所有
    359.           </p>
    360.           <p>
    361.             皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号
    362.           </p>
    363.           <p>
    364.             违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com
    365.           </p>
    366.         </div>
    367.       </div>
    368.       <div class="official">
    369.         <label for="">关注公众号</label>
    370.         <img src="images/code.png" alt="" />
    371.       </div>
    372.     </div>
    373.   </footer>
    374. </body>
    375. </html>
    • css源码
  1.  /* 通用样式 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. body {
  8.   display: flex;
  9.   flex-flow: column nowrap;
  10.   min-width: 1120px;
  11.   align-items: center;
  12.   font-size: 14px;
  13.   width: 100vw;
  14.   background-color: #eee;
  15. }
  16. a {
  17.   text-decoration: none;
  18. }
  19. .head {
  20.   width: 100%;
  21.   height: 520px;
  22.   display: flex;
  23.   flex-flow: column nowrap;
  24.   align-items: center;
  25.   background-color: #fff;
  26. }
  27. /* 页眉 */
  28. header {
  29.   width: 100%;
  30.   height: 50px;
  31.   background-color: rgb(10, 0, 0);
  32.   display: flex;
  33.   align-items: center;
  34.   padding: 0 20px;
  35. }
  36. header > a {
  37.   color: rgb(236, 217, 217);
  38.   line-height: 50px;
  39.   padding: 0 10px;
  40. }
  41. header > a:hover {
  42.   color: yellow;
  43. }
  44. header > span {
  45.   line-height: 50px;
  46.   margin-left: auto;
  47. }
  48. header > span * {
  49.   padding: 0 10px;
  50. }
  52. /* 搜索区
  53.  */
  54. .logo-search {
  55.   display: flex;
  56.   flex-flow: row nowrap;
  57.   width: 100%;
  58.   height: 60px;
  59.   display: flex;
  60.   flex-flow: row nowrap;
  61.   justify-content: space-between;
  62.   align-items: center;
  63.   margin-top: 20px;
  64. }
  65. .search {
  66.   display: flex;
  67.   flex-flow: row nowrap;
  68.   align-items: center;
  69.   position: relative;
  70.   left: 10vw;
  71. }
  72. .search > input {
  73.   border-radius: 10px;
  74.   width: 30vw;
  75.   height: 40px;
  76. }
  77. .search > label {
  78.   font-size: 25px;
  79.   position: relative;
  80.   top: 5px;
  81.   left: -33px;
  82. }
  83. .logo-search > .tu {
  84.   display: flex;
  85.   flex-flow: row nowrap;
  86.   align-items: center;
  87. }
  88. .logo-search > .tu > a {
  89.   padding: 0 5px;
  90.   font-size: 40px;
  91.   align-self: start;
  92.   color: #000;
  93. }
  94. .logo-search img {
  95.   height: 60px;
  96.   width: 10vw;
  97. }
  99. /* 导航区 */
  100. .search-nav {
  101.   width: 80%;
  102.   display: flex;
  103.   flex-flow: column nowrap;
  104.   align-items: center;
  105. }
  107. nav {
  108.   width: 100%;
  109.   height: 50px;
  110.   display: flex;
  111.   flex-flow: row nowrap;
  112.   align-items: center;
  113.   margin-top: 20px;
  114. }
  115. nav > .nav {
  116.   width: 25%;
  117.   display: grid;
  118.   grid-template-columns: repeat(6, minmax(30px, auto));
  119.   grid-template-rows: repeat(2, 1fr);
  120.   justify-content: start;
  121.   justify-items: center;
  122.   align-items: center;
  123. }
  124. nav > .nav > a {
  125.   padding: 0 4px;
  126.   display: flex;
  127.   flex-flow: row nowrap;
  128. }
  129. nav > .nav > .tubiao {
  130.   grid-row-start: span 2;
  131. }
  132. nav > .nav > .a2 {
  133.   border-right: 1px solid #ccc;
  134.   padding-right: 5px;
  135. }
  136. nav > .nav i {
  137.   font-size: 50px;
  138.   font-stretch: wider;
  139. }
  141. .head > .tu-2 {
  142.   margin-top: 20px;
  143.   width: 80%;
  144.   height: 250px;
  145.   display: grid;
  146.   gap: 5px;
  147.   grid-template-columns: 3fr 1fr;
  148.   /* justify-items: center; */
  149. }
  150. .head > .tu-2 img {
  151.   width: 100%;
  152.   height: 260px;
  153. }
  155. /* 主体区 */
  156. main {
  157.   display: flex;
  158.   flex-flow: column nowrap;
  159.   margin-top: 20px;
  160.   width: 80%;
  161. }
  162. main > * {
  163.   margin-top: 20px;
  164. }
  165. .main-title {
  166.   text-align: center;
  167. }
  168. .main-title > span {
  169.   padding-bottom: 8px;
  170.   color: darkslategrey;
  171.   border-bottom: 3px solid seagreen;
  172. }
  174. .news {
  175.   width: 100%;
  176.   height: 380px;
  177.   background-color: #fff;
  178.   display: grid;
  179.   grid-template-columns: repeat(3, 1fr);
  180.   /* grid-template-rows: minmax(auto, 320px); */
  181.   padding: 30px 15px;
  182. }
  184. .news > .news-1 {
  185.   height: 320px;
  187.   display: grid;
  188.   grid-template-columns: repeat(2, 1fr);
  189.   grid-template-rows: 50% 40% 10%;
  190.   justify-items: center;
  191.   gap: 10px;
  192.   grid-template-areas:
  193.     "news-top news-top"
  194.     "mid-lfet mid-right"
  195.     "bottom-left bottom-right";
  196. }
  197. .news > .news-1 > a:nth-of-type(1) {
  198.   grid-area: news-top;
  199. }
  200. .news > .news-1 > a:nth-of-type(2) {
  201.   grid-area: mid-lfet;
  202. }
  203. .news > .news-1 > a:nth-of-type(3) {
  204.   grid-area: bottom-left;
  205. }
  206. .news > .news-1 > a:nth-of-type(4) {
  207.   grid-area: mid-right;
  208. }
  209. .news > .news-1 > a:nth-of-type(5) {
  210.   grid-area: bottom-right;
  211. }
  212. .news a {
  213.   width: 100%;
  214. }
  215. .news img {
  216.   width: 100%;
  217.   height: 100%;
  218. }
  220. .news-2 {
  221.   display: grid;
  222.   grid-template-columns: 2fr 7fr;
  223.   grid-template-rows: repeat(12, 1fr);
  224.   align-items: center;
  225.   grid-auto-flow: column;
  226.   padding: 0 20px;
  227. }
  228. .news-2 span {
  229.   color: rgb(59, 54, 54);
  230.   min-width: 30px;
  231.   display: flex;
  232.   flex-flow: row nowrap;
  233. }
  234. .news-2 > a:first-of-type {
  235.   display: flex;
  236.   flex-flow: row nowrap;
  237.   grid-column-end: span 2;
  238.   font-size: 1.2rem;
  239.   color: rgb(180, 78, 78);
  240. }
  242. .photo {
  243.   width: 100%;
  244.   display: flex;
  245.   flex-flow: row nowrap;
  246.   justify-content: space-between;
  247. }
  248. .photo > .photo-area {
  249.   width: 32%;
  250.   height: 420px;
  251.   background-color: #fff;
  252.   padding: 15px;
  253.   border-radius: 15px;
  255.   display: grid;
  256.   grid-template-columns: repeat(2, 1fr);
  257.   grid-template-rows: 1fr 3fr 3fr;
  258.   gap: 5px;
  259.   align-items: center;
  260. }
  261. .photo > .photo-area > h2 {
  262.   width: 100%;
  263.   grid-column-end: span 2;
  264.   border-bottom: 1px solid red;
  265.   padding-bottom: 10px;
  266. }
  267. .photo > .photo-area > h2 > small {
  268.   font-size: 0.6em;
  269.   color: brown;
  270.   margin-left: 10px;
  271. }
  272. .photo > .photo-area > a {
  273.   width: 100%;
  274. }
  275. .photo > .photo-area span {
  276.   font-size: 0.9em;
  277.   color: rgb(22, 17, 17);
  278. }
  279. .photo > .photo-area img {
  280.   width: 100%;
  281. }
  283. .forsale {
  284.   width: 100%;
  285.   height: 600px;
  286.   display: flex;
  287.   flex-flow: column nowrap;
  288.   background-color: #fff;
  289.   border-radius: 15px;
  290.   padding: 20px 10px;
  291. }
  292. .forsale > h2 {
  293.   padding-bottom: 15px;
  294.   border-bottom: 1px solid lightcoral;
  295. }
  296. .forsale > h2 > a {
  297.   color: rgb(92, 68, 68);
  298. }
  299. .forsale > h2 > small {
  300.   font-size: 0.6em;
  301.   color: brown;
  302.   margin-left: 10px;
  303. }
  304. .classify {
  305.   display: flex;
  306.   flex-flow: row nowrap;
  307.   align-items: flex-end;
  308. }
  309. .classify > * {
  310.   margin-right: 20px;
  311. }
  312. .classify > h2 {
  313.   color: red;
  314. }
  315. .hot {
  316.   width: 100%;
  317.   margin-top: 20px;
  318.   display: flex;
  319.   flex-flow: row nowrap;
  320.   justify-content: space-between;
  321. }
  322. .star {
  323.   width: 56%;
  324.   padding: 10px 0;
  325.   display: grid;
  326.   grid-template-rows: 50% 50%;
  327.   grid-template-columns: repeat(4, 25%);
  328.   gap: 5px;
  329. }
  330. .star-area {
  331.   width: 100%;
  332.   display: flex;
  333.   flex-flow: column nowrap;
  334. }
  335. .star-area > p {
  336.   display: flex;
  337.   flex-flow: row nowrap;
  338.   justify-content: space-between;
  339. }
  340. .star-area > a {
  341.   width: 100%;
  342. }
  343. .star-area img {
  344.   width: 100%;
  345.   max-height: 140px;
  346.   border-radius: 10px;
  347. }
  349. .other {
  350.   width: 40%;
  351.   display: grid;
  352.   grid-template-rows: 2fr 2fr 1fr 1fr;
  353.   grid-template-columns: 1fr 1fr;
  354.   gap: 5px;
  355. }
  357. .other > a {
  358.   width: 100%;
  359. }
  360. .other > a > img {
  361.   max-height: 150px;
  362.   width: 100%;
  363. }
  364. .other > .gg {
  365.   grid-column-end: span 2;
  366. }
  367. .other > .gg > img {
  368.   max-height: 70px;
  369. }
  371. footer {
  372.   margin-top: 30px;
  373.   width: 100%;
  374.   height: 500px;
  375.   background-color: #fff;
  376.   display: flex;
  377.   flex-flow: column nowrap;
  378.   align-items: center;
  379. }
  380. .cooperation {
  381.   height: 200px;
  382.   padding-top: 20px;
  383.   display: grid;
  384.   grid-template-columns: repeat(12, 1fr);
  385.   grid-template-rows: 1fr 1fr;
  386.   gap: 10px;
  387.   align-items: center;
  388. }
  389. .cooperation > a {
  390.   padding: 5px;
  391.   color: #000;
  392. }
  393. .foot {
  394.   width: 100%;
  395.   height: 300px;
  396.   background-color: rgb(22, 11, 11);
  397.   display: flex;
  398.   flex-flow: row nowrap;
  399.   justify-content: space-evenly;
  400.   padding: 20px 70px;
  401. }
  402. .information {
  403.   display: flex;
  404.   flex-flow: column nowrap;
  405.   justify-content: space-around;
  406.   width: 60%;
  407. }
  408. .foot-nav {
  409.   display: flex;
  410.   flex-flow: row nowrap;
  411. }
  412. .foot-nav > a {
  413.   padding: 10px;
  414.   color: rgb(231, 212, 212);
  415. }
  417. .information > .info {
  418.   display: grid;
  419.   grid-template-columns: 1fr 4fr;
  420.   grid-template-rows: 1fr 1fr 1fr;
  421.   align-items: center;
  422.   gap: 30px;
  423. }
  424. .information > .info > p {
  425.   color: rgb(231, 212, 212);
  426. }
  427. .information > .info > h1 {
  428.   grid-row-end: span 3;
  429.   color: rgb(231, 212, 212);
  430. }
  432. .official {
  433.   border-left: 1px solid rgb(180, 78, 78);
  434.   display: flex;
  435.   flex-flow: column nowrap;
  436.   align-items: center;
  437.   padding-left: 20px;
  438. }
  439. .official > label {
  440.   color: rgb(231, 212, 212);
  441. }
  442. .official > img {
  443.   width: 120px;
  444.   height: 120px;
  445. }

效果图：

4. 总结

  • grid和flex配合使用可以实现大部分的网页布局功能
  • 复杂的网页布局中提前做好页面规划非常重要
  • 容器的宽高如果不是固定值，要注意内容是否溢出
上一条：Grid 布局下一条：php环境与变量
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多