微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 网页布局实战演练
博主信息
博文 32
粉丝 0
评论 0
访问量 35360
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
网页布局实战演练
Yang_Sir
原创
735人浏览过

网页布局实战演练

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配合使用可以实现大部分的网页布局功能
  • 复杂的网页布局中提前做好页面规划非常重要
  • 容器的宽高如果不是固定值，要注意内容是否溢出
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：代码写了这么多, 也很整齐 , 但是也要批评你, 注释呢? 如果不写注释, 过了几周, 你自己都不知写得是什么
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录