简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 网页布局实战演练
Blogger Information
Blog 32
fans 0
comment 0
visits 27688
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
网页布局实战演练
Yang_Sir
Original
480 people have browsed it

网页布局实战演练

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配合使用可以实现大部分的网页布局功能
  • 复杂的网页布局中提前做好页面规划非常重要
  • 容器的宽高如果不是固定值，要注意内容是否溢出
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！