简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1230作业+grid实战项目+10期线上班
Blogger Information
Blog 25
fans 1
comment 1
visits 17094
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
1230作业+grid实战项目+10期线上班
江川林
Original
554 people have browsed it

通过上次的学习，本次自己运用Grid布局，进行了页脚的实现

底部信息相对于其他组件来说相对于很简单了，这是使用grid布局，也让自己更深刻的了解了Grid，当真正的运用的时候，并不复杂，相对来说很方面，很轻松

感谢老师的辛勤付出！

以下是效果图：

以下是HTML和CSS代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid实战之底部信息</title>
  6.     <style>
  7.             * :not(body) {
  8.                 padding: 0;
  9.                 margin: 0;
  10.                 /*outline: 1px solid red;*/
  11.                 font-size: 13px;
  12.             }
  13.             a {
  14.                 color: #959ba2;
  15.                 text-decoration: none;
  16.                 font-size: 13px;
  17.             }
  18.             footer {
  19.                 background-color: #282c31;
  20.                 color: #959ba2;
  21.                 display: grid;
  22.                 grid-template-columns: 165px 550px 200px;
  23.                 grid-template-rows: 30px 100px;
  24.                 justify-content: center;
  25.             }
  26.         footer > .list6 >img {
  27.             width: 80px;
  28.             height: 80px;
  29.             padding-left: 10px;
  30.         }
  31.         footer span {
  32.             padding: 0 20px;
  33.             box-sizing: border-box;
  34.         }
  35.         .list4 span {
  36.             font-size: 30px;
  37.         }
  38.             .list4 {
  39.                 justify-self: center;
  40.                 align-self: center;
  41.             }
  42.             footer > .list1,.list2,.list3 {
  43.                 padding-top: 5px;
  44.             }
  46.             .list2,.list5 {
  47.                 border-right: 1px solid #555555;
  48.             }
  50.         .list5 {
  51.             display: flex;
  52.             flex-direction: column;
  53.             justify-content: space-between;
  54.         }
  55.             .list5 > span {
  56.                 padding: 5px;
  57.             }
  59.     </style>
  60. </head>
  61. <body>
  62.         <footer>
  63.                 <div class="list1">
  64.                     <a href=""><span>简介</span></a>
  65.                     <a href=""><span>联系我们</span></a>
  66.                 </div>
  67.                 <div class="list2">
  68.                     <a href=""><span>招聘信息</span></a>
  69.                     <a href=""><span>友情链接</span></a>
  70.                     <a href=""><span>用户服务协议</span></a>
  71.                     <a href=""><span>隐私权声明</span></a>
  72.                     <a href=""><span>法律投诉声明</span></a>
  73.                 </div>
  74.                 <div class="list3">
  75.                     <span>关注公众号</span>
  76.                 </div>
  77.                 <div class="list4">
  78.                     <span>LOGO</span>
  79.                 </div>
  80.                 <div class="list5">
  81.                     <span>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</span>
  82.                     <span>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</span>
  83.                     <span>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</span>
  84.                 </div>
  85.                 <div class="list6">
  86.                     <img src="../1225/static/images/1.jpg" alt="">
  87.                 </div>
  88.         </footer>
  89. </body>
  90. </html>

以下是手写图片：

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！