简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >grid布局学习总结

grid布局学习总结

麦穗
麦穗原创
2020年04月19日 18:42:05514浏览

grid布局学习

千图网首页模仿

目录设置

  • index_banner.css源码

    1. @import url(../public/public_reset.css);
    2. .banner-image {
    3. min-width: 1000px;
    4. margin-bottom: 30px;
    5. background-color: greenyellow;
    6. }
    7. .banner-image img {
    8. width: 100%;
    9. }

  • index_banner.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.   <link rel="stylesheet" href="index_banner.css">
    7.   <title>banner图</title>
    8. </head>
    9. <body>
    10.   <div class="banner-image">
    11.       <img src="../../static/images/banner.png" alt="">
    12.   </div>
    13. </body>
    14. </html>

  • public_footer.css 源码

    1. @import url(../public_reset.css);
    2. footer {
    3. padding-top: 20px;
    4. padding-bottom: 10px;
    5. min-width: 1000px;
    6. background-color: lavender;
    7. display: grid;
    8. grid-auto-flow: column;
    9. grid-template-columns: repeat(12, 100px);
    10. grid-template-rows: repeat(9, 30px);
    11. justify-content: center;
    12. }
    13. footer > .item {
    14. font-size: smaller;
    15. }
    16. footer > .item1,
    17. footer > .item9,
    18. footer > .item15 {
    19. font-size: inherit;
    20. color: #444;
    21. }
    22. footer > .item7 {
    23. grid-column: span 3;
    24. }
    25. footer > .item7 > a {
    26. padding: 0px 10px;
    27. box-sizing: border-box;
    28. }
    29. footer > .item8 {
    30. grid-row: span 2;
    31. grid-column: span 12;
    32. text-align: center;
    33. line-height: 30px;
    34. }
    35. footer > .item21 {
    36. grid-row: span 7;
    37. grid-column: span 6;
    38. }
    39. footer > .item22 {
    40. grid-row: span 2;
    41. grid-column: span 3;
    42. font-size: large;
    43. align-self: center;
    44. }
    45. footer > .item23 {
    46. grid-row: span 2;
    47. grid-column: span 3;
    48. }
    49. footer > .item23 {
    50. display: flex;
    51. align-items: center;
    52. }
    53. footer > .item23 img {
    54. width: 100%;
    55. }
    56. footer > .item23 a:last-of-type {
    57. padding-left: 20px;
    58. box-sizing: border-box;
    59. }
    60. footer > .item24 {
    61. grid-row: span 3;
    62. grid-column: span 3;
    63. font-size: large;
    64. }

  • public_footer.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.   <link rel="stylesheet" href="../../../static/font_icon/iconfont.css" />
    7.   <link rel="stylesheet" href="public_footer.css" />
    8.   <title>公共页脚</title>
    9. </head>
    10. <body>
    11.   <footer>
    12.     <div class="item item1">常见问题</div>
    13.     <div class="item item2">成为签约设计师</div>
    14.     <div class="item item3">注册登录</div>
    15.     <div class="item item4">帐号/密码</div>
    16.     <div class="item item5">发票/售后</div>
    17.     <div class="item item6">版权投诉</div>
    18.     <div class="item item7 iconfont icon-diamonds">
    19.       <a href="">注册声明</a><a href=""> 版权声明</a><a href="">售后服务</a
    20.       ><a href="">隐私声明</a>
    21.     </div>
    22.     <div class="item item8">
    23.       <p>为了防范电信网络诈骗，如网民接到962110电话，请立即接听</p>
    24.       <p>
    25.         Copyright ©2013-现在 千图网 沪ICP备10011451号-6 ICP证书: 沪B2-20180057
    26.         上海工商 沪公网安备 31011502008675号
    27.       </p>
    28.     </div>
    29.     <div class="item item9">关于千图网</div>
    30.     <div class="item item10">关于我们</div>
    31.     <div class="item item11">加入我们</div>
    32.     <div class="item item12">心系千图</div>
    33.     <div class="item item13">Q群联盟</div>
    34.     <div class="item item14"></div>
    35.     <div class="item item15">产品服务</div>
    36.     <div class="item item16">官方博客</div>
    37.     <div class="item item17">帮助中心</div>
    38.     <div class="item item18"></div>
    39.     <div class="item item19"></div>
    40.     <div class="item item20"></div>
    41.     <div class="item item21"></div>
    42.     <div class="item item22">客服咨询</div>
    43.     <div class="item item23">
    44.       <a href=""><img src="../../../static/images/chat.png" alt="" /></a>
    45.       <a href="" alt="">常见问题&nbsp;>></a>
    46.     </div>
    47.     <div class="item item24 iconfont icon-shouye">
    48.       &nbsp;feedback@58pic.com
    49.     </div>
    50.   </footer>
    51. </body>
    52. </html>
  • public_header.css 源码
    1. @import url(../public_reset.css);
    2. .header-border-bottom {
    3. border-bottom: 2px solid #ebebeb;
    4. }
    5. .header-nav {
    6. width: 1200px;
    7. margin: 0 auto;
    8. min-width: 1000px;
    9. height: 50px;
    10. display: flex;
    11. align-items: center;
    12. justify-content: end;
    13. }
    14. .header-nav > div:first-of-type {
    15. width: 100px;
    16. margin-right: auto;
    17. }
    18. .header-nav > div:last-of-type {
    19. width: 100px;
    20. height: 25px;
    21. line-height: 25px;
    22. text-align: center;
    23. text-decoration: none;
    24. border: 2px solid forestgreen;
    25. border-radius: 10px;
    26. }
    27. .header-nav > .logo img {
    28. width: 100%;
    29. }
    30. .header-nav > div {
    31. width: 70px;
    32. padding: 0 8px;
    33. }
    34. .header > a {
    35. display: flex;
    36. flex-flow: column nowrap;
    37. align-items: center;
    38. }
    39. .header > a:hover {
    40. color: darkgreen;
    41. font-weight: 500;
    42. }
    43. .header-nav > div:nth-of-type(2) {
    44. width: 500px;
    45. margin-right: auto;
    46. }
    47. .header-nav input {
    48. width: 300px;
    49. height: 30px;
    50. border: 1px solid #ebebeb;
    51. }
    52. .header-search {
    53. display: flex;
    54. align-items: center;
    55. }
    56. .header-search span {
    57. width: 60px;
    58. height: 30px;
    59. box-sizing: border-box;
    60. line-height: 30px;
    61. text-align: center;
    62. border-radius: 10px 0px 0px 10px;
    63. border: 1px solid #ebebeb;
    64. }
    65. .header-search img {
    66. width: 100%;
    67. height: 100%;
    68. }
    69. .header-search label {
    70. width: 60px;
    71. height: 30px;
    72. border-radius: 0px 10px 10px 0px;
    73. }
  • public_header.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.   <link rel="stylesheet" href="../../../static/font_icon/iconfont.css" />
    7.   <link rel="stylesheet" href="public_header.css" />
    8.   <title>公共页眉</title>
    9. </head>
    10. <body>
    11.   <div class="header-border-bottom">
    12.   <div class="header-nav">
    13.     <div class="header logo">
    14.       <a href="">
    15.         <img src="../../../static/images/logo.png" alt="千图网"
    16.       /></a>
    17.     </div>
    18.     <div class="header">
    19.       <div class="header-search">
    20.         <span><a href="">全部&nbsp;></a></span>
    21.         <input type="search" name="search" id="search" />
    22.         <label for="search"
    23.           ><img src="../../../static/images/search.png" alt=""
    24.         /></label>
    25.       </div>
    26.     </div>
    27.     <div class="header">
    28.       <a href=""
    29.         ><span class="iconfont icon-gengduo"></span> <span>更多</span></a
    30.       >
    31.     </div>
    32.     <div class="header">
    33.       <a href=""
    34.         ><span class="iconfont icon-icon-"></span> <span>创作中心</span></a
    35.       >
    36.     </div>
    37.     <div class="header">
    38.       <a href=""
    39.         ><span class="iconfont icon-diamonds"></span> <span>个人中心</span></a
    40.       >
    41.     </div>
    42.     <div class="header">
    43.       <a href=""
    44.         ><span class="iconfont icon-shenqingchengweiVIP"></span>
    45.         <span>企业中心</span></a
    46.       >
    47.     </div>
    48.     <div class="header">
    49.       <span
    50.         ><a href="">登录</a >&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="" alt=""
    51.           >注册</a
    52.         ></span
    53.       >
    54.     </div>
    55.   </div>
    56.   </div>
    57. </body>
    58. </html>
  • public_headline.css 源码
    1. @import url(../public_reset.css);
    2. .headline-title {
    3. width: 1200px;
    4. margin: 0 auto;
    5. }
    6. .headline-title a {
    7. padding: 0 10px;
    8. }
    9. .headline-title a:hover {
    10. color: forestgreen;
    11. }
    12. .headline-title a:first-of-type {
    13. font-size: x-large;
    14. }
    15. .headline-title a:last-of-type {
    16. padding-left: 60px;
    17. }
  • public_headline.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.   <link rel="stylesheet" href="../../../static/font_icon/iconfont.css" />
    7.   <link rel="stylesheet" href="public_headline.css" />
    8.   <title>大标题</title>
    9. </head>
    10. <body>
    11.   <div class="headline-title">
    12.     <a href="">创意海报</a>
    13.     <a href="">千图精选</a>
    14.     <a href="">节日海报</a>
    15.     <a href="">招聘海报</a>
    16.     <a href="">促销海报</a>
    17.     <a href="">公益海报</a>
    18.     <a href="">查看更多&nbsp;→</a>
    19.   </div>
    20. </body>
    21. </html>
  • public_image_list.css 源码
    1. @import url(../public_reset.css);
    2. .image-list {
    3. width: 1200px;
    4. min-width: 1000px;
    5. display: grid;
    6. grid-template-columns: repeat(4, 290px);
    7. grid-template-rows: repeat(2, 430px);
    8. justify-content: space-between;
    9. /* place-content: center; */
    10. margin: 30px auto;
    11. }
    12. .image-list img {
    13. width: 100%;
    14. }
    15. .image-list a {
    16. padding: 10px;
    17. }
    18. .image-list-p {
    19. padding-top: 10px;
    20. font-size: small;
    21. overflow: hidden;
    22. text-overflow: ellipsis;
    23. white-space: nowrap;
    24. }
    25. .image-list-p strong {
    26. font-weight: normal;
    27. border-radius: 4px;
    28. color: green;
    29. border: 1px solid green;
    30. }
  • public_image_list.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.   <link rel="stylesheet" href="../../../static/font_icon/iconfont.css" />
    7.   <link rel="stylesheet" href="../public_image_list/public_image_list.css" />
    8.   <title>图片列表</title>
    9. </head>
    10. <body>
    11.   <div class="image-list">
    12.     <a href=""
    13.       ><img src="../../../static/images/plate1.png" alt="" />
    14.       <p class="image-list-p">
    15.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    16.       </p></a
    17.     >
    18.     <a href=""
    19.       ><img src="../../../static/images/plate2.png" alt="" />
    20.       <p class="image-list-p">
    21.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    22.       </p></a
    23.     >
    24.     <a href=""
    25.       ><img src="../../../static/images/plate3.png" alt="" />
    26.       <p class="image-list-p">
    27.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    28.       </p></a
    29.     >
    30.     <a href=""
    31.       ><img src="../../../static/images/plate4.png" alt="" />
    32.       <p class="image-list-p">
    33.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    34.       </p></a
    35.     >
    36.     <a href=""
    37.       ><img src="../../../static/images/plate5.png" alt="" />
    38.       <p class="image-list-p">
    39.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    40.       </p></a
    41.     >
    42.     <a href=""
    43.       ><img src="../../../static/images/plate6.png" alt="" />
    44.       <p class="image-list-p">
    45.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    46.       </p></a
    47.     >
    48.     <a href=""
    49.       ><img src="../../../static/images/plate7.png" alt="" />
    50.       <p class="image-list-p">
    51.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    52.       </p></a
    53.     >
    54.     <a href=""
    55.       ><img src="../../../static/images/plate8.png" alt="" />
    56.       <p class="image-list-p">
    57.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    58.       </p></a
    59.     >
    60.   </div>
    61. </body>
    62. </html>
  • public_nav.css 源码
    1. @import url(../public_reset.css);
    2. nav {
    3. width: 800px;
    4. margin: 0 auto;
    5. min-width: 1000px;
    6. height: 30px;
    7. font-size: inherit;
    8. color: #555;
    9. display: flex;
    10. align-items: center;
    11. justify-content: space-evenly;
    12. }
    13. nav div {
    14. width: 80px;
    15. text-align: center;
    16. }

  • public_nav.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.   <link rel="stylesheet" href="../../../static/font_icon/iconfont.css" />
    7.   <link rel="stylesheet" href="public_nav.css" />
    8.   <title>导航</title>
    9. </head>
    10. <body>
    11.   <nav>
    12.     <div><a href="">发现</a></div>
    13.     <div><a href="">平面广告</a></div>
    14.     <div><a href="">元素|插画</a></div>
    15.     <div><a href="">背景|摄影</a></div>
    16.     <div><a href="">电商设计</a></div>
    17.     <div><a href="">PPT文档</a></div>
    18.     <div><a href="">视频|配乐</a></div>
    19.     <div><a href="">字库|艺术字</a></div>
    20.     <div><a href="">装饰|模型</a></div>
    21.     <div><a href="">UI|新媒体</a></div>
    22.   </nav>
    23. </body>
    24. </html>

  • public_reset.css 源码

    1. /* 初始化设置，内外边距为0 */
    2. *{
    3. margin: 0;
    4. padding: 0;
    5. }
    6. a {
    7. /* 去除默认下划线 */
    8. text-decoration: none;
    9. color: #666;
    10. }
    11. body {
    12. /* 设置字体、字号、颜色、背景颜色样式 */
    13. font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial,
    14.   sans-serif;
    15. font-size: 13px;
    16. color: #555;
    17. background-color: #fff;
    18. }
    19. li {
    20. /* 去除默认小点样式 */
    21. list-style: none;
    22. }

  • index.css 源码

    1. @import url(../components/public/public_reset.css);
    2. /* 页头样式 */
    3. @import url(../components/public/public_header/public_header.css);
    4. /* 导航样式 */
    5. @import url(../components/public/public_nav/public_nav.css);
    6. /* bnaner图样式 */
    7. @import url(../components/index/index_banner.css);
    8. /* 图片列表标题样式 */
    9. @import url(../components/public/public_headline/public_headline.css);
    10. /* 图片列表样式 */
    11. @import url(../components/public/public_image_list/public_image_list.css);
    12. /* 页脚样式 */
    13. @import url(../components/public/public_footer/public_footer.css);
    14. body {
    15. width: 100vw;
    16. margin: 0 auto;
    17. }

  • index.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.   <link rel="stylesheet" href="../static/font_icon/iconfont.css" />
    7.   <link rel="stylesheet" href="index.css" />
    8.   <title>千图网模仿网页</title>
    9. </head>
    10. <body>
    11.   <!-- 页头 -->
    12.   <div class="header-border-bottom">
    13.     <div class="header-nav">
    14.       <div class="header logo">
    15.         <a href=""> <img src="../static/images/logo.png" alt="千图网" /></a>
    16.       </div>
    17.       <div class="header">
    18.         <div class="header-search">
    19.           <span><a href="">全部&nbsp;></a></span>
    20.           <input type="search" name="search" id="search" />
    21.           <label for="search"
    22.             ><img src="../static/images/search.png" alt=""
    23.           /></label>
    24.         </div>
    25.       </div>
    26.       <div class="header">
    27.         <a href=""
    28.           ><span class="iconfont icon-gengduo"></span> <span>更多</span></a
    29.         >
    30.       </div>
    31.       <div class="header">
    32.         <a href=""
    33.           ><span class="iconfont icon-icon-"></span> <span>创作中心</span></a
    34.         >
    35.       </div>
    36.       <div class="header">
    37.         <a href=""
    38.           ><span class="iconfont icon-diamonds"></span>
    39.           <span>个人中心</span></a
    40.         >
    41.       </div>
    42.       <div class="header">
    43.         <a href=""
    44.           ><span class="iconfont icon-shenqingchengweiVIP"></span>
    45.           <span>企业中心</span></a
    46.         >
    47.       </div>
    48.       <div class="header">
    49.         <span
    50.           ><a href="">登录</a
    51.           >&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="" alt=""
    52.             >注册</a
    53.           ></span
    54.         >
    55.       </div>
    56.     </div>
    57.   </div>
    59.   <!-- 导航 -->
    60.   <nav>
    61.     <div><a href="">发现</a></div>
    62.     <div><a href="">平面广告</a></div>
    63.     <div><a href="">元素|插画</a></div>
    64.     <div><a href="">背景|摄影</a></div>
    65.     <div><a href="">电商设计</a></div>
    66.     <div><a href="">PPT文档</a></div>
    67.     <div><a href="">视频|配乐</a></div>
    68.     <div><a href="">字库|艺术字</a></div>
    69.     <div><a href="">装饰|模型</a></div>
    70.     <div><a href="">UI|新媒体</a></div>
    71.   </nav>
    73.   <!-- 轮播图 -->
    74.   <div class="banner-image">
    75.     <img src="../static/images/banner.png" alt="" />
    76.   </div>
    78.   <!-- 图片列表 -->
    80.   <!-- 列表 1 -->
    81.   <!-- 列表 1 标题-->
    82.   <div class="headline-title">
    83.     <a href="">创意海报</a>
    84.     <a href="">千图精选</a>
    85.     <a href="">节日海报</a>
    86.     <a href="">招聘海报</a>
    87.     <a href="">促销海报</a>
    88.     <a href="">公益海报</a>
    89.     <a href="">查看更多&nbsp;→</a>
    90.   </div>
    91.   <!-- 列表 1 图片-->
    92.   <div class="image-list">
    93.     <a href=""
    94.       ><img src="../static/images/plate1.png" alt="" />
    95.       <p class="image-list-p">
    96.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    97.       </p></a
    98.     >
    99.     <a href=""
    100.       ><img src="../static/images/plate2.png" alt="" />
    101.       <p class="image-list-p">
    102.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    103.       </p></a
    104.     >
    105.     <a href=""
    106.       ><img src="../static/images/plate3.png" alt="" />
    107.       <p class="image-list-p">
    108.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    109.       </p></a
    110.     >
    111.     <a href=""
    112.       ><img src="../static/images/plate4.png" alt="" />
    113.       <p class="image-list-p">
    114.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    115.       </p></a
    116.     >
    117.     <a href=""
    118.       ><img src="../static/images/plate5.png" alt="" />
    119.       <p class="image-list-p">
    120.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    121.       </p></a
    122.     >
    123.     <a href=""
    124.       ><img src="../static/images/plate6.png" alt="" />
    125.       <p class="image-list-p">
    126.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    127.       </p></a
    128.     >
    129.     <a href=""
    130.       ><img src="../static/images/plate7.png" alt="" />
    131.       <p class="image-list-p">
    132.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    133.       </p></a
    134.     >
    135.     <a href=""
    136.       ><img src="../static/images/plate8.png" alt="" />
    137.       <p class="image-list-p">
    138.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    139.       </p></a
    140.     >
    141.   </div>
    143.   <!-- 列表 2 标题-->
    144.   <div class="headline-title">
    145.     <a href="">展板展架</a>
    146.     <a href="">千图精选</a>
    147.     <a href="">卡通手绘</a>
    148.     <a href="">纹理边框</a>
    149.     <a href="">图标元素</a>
    150.     <a href="">广告背景</a>
    151.     <a href="">查看更多&nbsp;→</a>
    152.   </div>
    153.   <!-- 列表 2 图片-->
    154.   <div class="image-list">
    155.     <a href=""
    156.       ><img src="../static/images/poster1.png" alt="" />
    157.       <p class="image-list-p">
    158.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    159.       </p></a
    160.     >
    161.     <a href=""
    162.       ><img src="../static/images/poster2.png" alt="" />
    163.       <p class="image-list-p">
    164.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    165.       </p></a
    166.     >
    167.     <a href=""
    168.       ><img src="../static/images/poster3.png" alt="" />
    169.       <p class="image-list-p">
    170.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    171.       </p></a
    172.     >
    173.     <a href=""
    174.       ><img src="../static/images/poster4.png" alt="" />
    175.       <p class="image-list-p">
    176.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    177.       </p></a
    178.     >
    179.     <a href=""
    180.       ><img src="../static/images/poster5.png" alt="" />
    181.       <p class="image-list-p">
    182.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    183.       </p></a
    184.     >
    185.     <a href=""
    186.       ><img src="../static/images/poster6.png" alt="" />
    187.       <p class="image-list-p">
    188.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    189.       </p></a
    190.     >
    191.     <a href=""
    192.       ><img src="../static/images/poster7.png" alt="" />
    193.       <p class="image-list-p">
    194.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    195.       </p></a
    196.     >
    197.     <a href=""
    198.       ><img src="../static/images/poster8.png" alt="" />
    199.       <p class="image-list-p">
    200.         <strong>原创</strong>素材学校复课防疫科普小知识系列海报素材学校
    201.       </p></a
    202.     >
    203.   </div>
    205.   <!-- 页脚 -->
    206.   <footer>
    207.     <div class="item item1">常见问题</div>
    208.     <div class="item item2">成为签约设计师</div>
    209.     <div class="item item3">注册登录</div>
    210.     <div class="item item4">帐号/密码</div>
    211.     <div class="item item5">发票/售后</div>
    212.     <div class="item item6">版权投诉</div>
    213.     <div class="item item7 iconfont icon-diamonds">
    214.       <a href="">注册声明</a><a href=""> 版权声明</a><a href="">售后服务</a
    215.       ><a href="">隐私声明</a>
    216.     </div>
    217.     <div class="item item8">
    218.       <p>为了防范电信网络诈骗，如网民接到962110电话，请立即接听</p>
    219.       <p>
    220.         Copyright ©2013-现在 千图网 沪ICP备10011451号-6 ICP证书: 沪B2-20180057
    221.         上海工商 沪公网安备 31011502008675号
    222.       </p>
    223.     </div>
    224.     <div class="item item9">关于千图网</div>
    225.     <div class="item item10">关于我们</div>
    226.     <div class="item item11">加入我们</div>
    227.     <div class="item item12">心系千图</div>
    228.     <div class="item item13">Q群联盟</div>
    229.     <div class="item item14"></div>
    230.     <div class="item item15">产品服务</div>
    231.     <div class="item item16">官方博客</div>
    232.     <div class="item item17">帮助中心</div>
    233.     <div class="item item18"></div>
    234.     <div class="item item19"></div>
    235.     <div class="item item20"></div>
    236.     <div class="item item21"></div>
    237.     <div class="item item22">客服咨询</div>
    238.     <div class="item item23">
    239.       <a href=""><img src="../static/images/chat.png" alt="" /></a>
    240.       <a href="" alt="">常见问题&nbsp;>></a>
    241.     </div>
    242.     <div class="item item24 iconfont icon-shouye">
    243.       &nbsp;feedback@58pic.com
    244.     </div>
    245.   </footer>
    246. </body>
    247. </html>
  • 显示效果

学习总结：

模仿千图网前端页面有8成，感觉有很多源码有冗余的地方，需要改进的地方还有很多，grid布局感觉这个非常好，相信以后用到的地方还有很多，总之，这个页面完成的有点吃力，算是入了个门槛，给自己加油ヾ(◍°∇°◍)ﾉﾞ

上一条：HTML文档结构与属性下一条：EZSQL最全功能 中文翻译+整理
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多