104.实战网页建立页脚-第一节

最新推荐文章于 2023-09-04 19:57:28 发布

网络点点滴

最新推荐文章于 2023-09-04 19:57:28 发布

阅读量265

点赞数

分类专栏： HTML5+CSS3 文章标签： HTML5+CSS3

本文链接：https://blog.csdn.net/weixin_42952508/article/details/131269187

版权

HTML5+CSS3 专栏收录该内容

122 篇文章 1 订阅

订阅专栏

之前我们实现的网页如下图所示：
在这里插入图片描述

这节课我们来建立页脚的部分
在这里插入图片描述

● 如图所示，我们首先建立五个grid的部分

<footer class="footer">
  <div class="container grid grid--5-cols">
    <div class="logo-col">
      Logo
    </div>
    <div class="address-col">
      Adress
    </div>
    <nav class="nav-col">Nav 1</nav>
    <nav class="nav-col">Nav 2</nav>
    <nav class="nav-col">Nav 3</nav>
  </div>
</footer>

/*******************************/
/* 页脚部分 */
/*******************************/

.footer {
  padding: 9.6rem 0;
}

在这里插入图片描述

● 之后替换一些logo和地址信息之类的

<footer class="footer">
  <div class="container grid grid--5-cols">
    <div class="logo-col">
      <a href="#" class="footer-logo">
        <img src="img/omnifood-logo.png" alt="LOGO" class="logo" />
        </a>
        <p class="copyright">Copyright &copy; 2027 by Omnifood, Inc. All rights reserved.</p>
    </div>
    <div class="address-col">
      <p class="footer-heading">关于我们</p>
      <address class="contacts">
        <p>加利福尼亚州旧金山哈里森街623号2楼,邮编:94107</p>
        <p>
          <a href="tel:415-201-6370">415-201-6370</a><br>
          <a href="mailto:hello@omnifood.com">hello@omnifood.com</a>
        </p>
      </address>
     
    </div>
    <nav class="nav-col">Nav 1</nav>
    <nav class="nav-col">Nav 2</nav>
    <nav class="nav-col">Nav 3</nav>
  </div>
</footer>

在这里插入图片描述

● 接着替换其他东西

  <nav class="nav-col">
      <p class="footer-heading">账户</p>
      <ul class="footer-nav">
        <li><a href="#">创建</a></li>
        <li><a href="#">登录</a></li>
        <li><a href="#">IOS app</a></li>
        <li><a href="#">Android APP</a></li>
      </ul>
    </nav>
    <nav class="nav-col">
      <p class="footer-heading">公司</p>
      <ul class="footer-nav">
        <li><a href="#">关于 Omnifood</a></li>
        <li><a href="#">关于企业</a></li>
        <li><a href="#">合作伙伴</a></li>
        <li><a href="#">职业生呀</a></li>
      </ul>
    </nav>
    <nav class="nav-col">
      <p class="footer-heading">资源</p>
      <ul class="footer-nav">
        <li><a href="#">菜单目录</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">隐私条款</a></li>
      </ul>
    </nav>

在这里插入图片描述

● 之后我们添加一些社交logo

 <ul class="social-links">
              <li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
              <li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
              <li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
            </ul>