Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月29日练习：php中文网footer案例（组件footer）
Blogger Information
Blog 145
fans 7
comment 7
visits 164441
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
12月29日练习：php中文网footer案例（组件footer）
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1023 people have browsed it

练习一：
php中文网public_footer组件：
1、html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_footer.css">
  6.     <title>Title</title>
  7. </head>
  8. <body>
  9.     <div class="public-footer">
  10.         <div class="nav">
  11.             <a href=""><span>链接1</span></a>
  12.             <a href=""><span>链接2</span></a>
  13.             <a href=""><span>链接3</span></a>
  14.             <a href=""><span>链接4</span></a>
  15.             <a href=""><span>链接5</span></a>
  16.             <a href=""><span>链接6</span></a>
  17.             <a href=""><span>链接7</span></a>
  18.         </div>
  19.         <div class="logo">
  20.             <a href=""><img src="../../../images/logo.png" alt=""></a>
  21.         </div>
  22.         <div class="info">
  23.             <p>2019 fengniao.com. All rights reserved . 安徽闹着玩（无聊网）版权所有</p>
  24.             <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  25.             <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  26.         </div>
  27.         <div>
  28.             <p>关注公众号</p>
  29.             <img src="../../../static/images/erwei-code.png" alt="">
  30.         </div>
  31.     </div>
  32. </body>
  33. </html>

2、css代码：

  1. @import url(../../public_reset.css);
  3. .public-footer {
  4.     min-width: 800px;
  5.     max-width: 1200px;
  6.     height: 200px;
  7.     margin: 0 auto;
  8.     outline:1px dashed red;
  9.     color:#ffffff;
  10.     background-color: #404040;
  11.     display: grid;
  12.     grid-template-columns: 1.5fr 4.5fr 4fr;
  13.     grid-tempalte-rows: 2fr 8fr;
  16. }
  17. .public-footer > .nav {
  18.     grid-column:1/3;
  19.     margin-left: 30px;
  20.     align-self: center;
  22. }
  23. .public-footer > .nav > a {
  24.     margin-left:20px ;
  25.     color:#ffffff;
  26. }
  27. .public-footer > .logo {
  28.     grid-row:2/3;
  29.     margin-top: 21px;
  30.     /*align-self: end;*/
  31.     justify-self: end;
  32. }
  33. .public-footer > .logo  img {
  34.     width: 140px;
  35.     height: 60px;
  37. }
  38. .public-footer > .info {
  39.     grid-column: 2/3;
  40.     grid-row:2/3;
  41.     justify-self: center;
  44. }
  45. .public-footer > .info > p {
  46.     margin-top: 15px;
  47. }
  48. .public-footer > :last-child {
  49.     grid-column: 3/4;
  50.     grid-row:1/3;
  51.     align-self: center;
  52.     margin-left: 20px;
  53. }
  54. .public-footer > :last-child > p {
  55.     margin-left: 24px;
  56. }
  57. .public-footer > :last-child > img {
  58.     width: 120px;
  59.     margin-top: 10px;
  61. }

3、效果图：在火狐浏览器中打开网格线

总结：
1、补充网格线定位练习；从1开始，整数递增，反向 从-1开始 负数递减
(1)划网格线：grid-template-columns/rows:
属性值：px; fr; 函数：repeat(1,1fr)——(1:重复次数，重复内容）,minmax(100px,150px)伸缩空间
(2)网格线定位：grid-row/column-strat/end:1;
简写：grid-row/column: start/end ; (start网格定位起点线-end定位终止线)
2、网格中单元格对齐方法：是否旨在有空隙的时候有作用？
3、单元格内容对其：grid容器属性和项目属性易混淆：
容器属性：
(1)align/justify（水平垂直）-items/content(内容、单元格):
属性值：start center end;
(2)简写：place-items/content（内容/单元格）：align justify;
项目属性：align/justify-self:
属性值：start center end :
4、网格间隙很少用：
（1）grid-column/row-gap: 属性值：px;
(2) 简写grid-gap: row column /gap

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