页面结构设计-顶部导航与脚部分

·顶部导航演示效果：

 

 ·脚部分演示效果：

1.什么是顶部导航和脚部分

1. 吸顶导航

吸顶导航是一种流行的网页结构设计方法，它允许导航栏保持在屏幕的顶部，使得用户可以直接跳转至想要前往的页面，从而提高用户的导航体验。

2.脚部分

在网页设计和开发中，“脚部分”通常指的是网页的底部区域，也就是页面内容的最下方部分。

这个区域通常包含版权信息、联系信息等。

2.顶部导航的制作： 

1.代码思路

1.我在<script setup>中：

使用了ref来创建一个响应式的导航列表navList，这个列表包含了导航项的ID、名称和链接。 没有使用额外的逻辑来处理吸顶效果，如果页面很长需要额外添加这部分逻辑。

2.在<template>中：

使用了<header>标签来定义导航栏，并且使用了一个.container类来包裹所有的导航内容，这使得导航内容水平居中。 导航项是通过v-for指令遍历navList生成的，每个导航项都有一个RouterLink组件，用于Vue Router的路由跳转。

3.最后的<style scoped>中：

导航栏使用了position: absolute;，这意味着它会被固定在页面的顶部，但不会在滚动时吸顶。又使用了scoped属性，这意味着样式只应用于当前组件，不会影响到其他组件。

2.代码演示

<script setup>
import {ref} from 'vue'

const navList = ref([
  {id:'1',name:'首页',url:'/'},
  {id:'2',name:'精品课程',url:'course'},
  {id:'3',name:'项目实战',url:'project'},
  {id:'4',name:'题库',url:'questionbank'},
  {id:'5',name:'考试认证',url:'exams'},
  {id:'6',name:'比赛竞赛',url:'competition'},
  {id:'7',name:'求职助手',url:'jobassistant'},
  {id:'8',name:'工具资源',url:'toolsResources'}
])


</script>

<template>
  <header class='app-header'>
    <div class="container">
      <h1 class="logo">
        <RouterLink to="/">黑吗喽</RouterLink>
      </h1>
      <ul class="app-header-nav">
        <li class="home" v-for="item in navList" :key="item.id">
          <RouterLink active-class="active" :to="item.url">{{ item.name }}</RouterLink>
        </li>

      </ul>
      <div class="right">
        <!-- <RouterLink to="/" v-if="userInfoStore.userName">{{userInfoStore.userName}}</RouterLink> -->
        <RouterLink to="/login" >登录/注册</RouterLink>
        <RouterLink to="/">社区</RouterLink>
      </div>
    </div>
</header>
</template>


<style scoped lang='scss'>
.app-header {
  background: #000000;
  opacity: 1;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  .container {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 200px;

    a {
      display: block;
      height: 60px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/asset/images/logo1.jpg') no-repeat center 5px / contain;
      
    }
  }

  .app-header-nav {
    width: 820px;
    display: flex;
    padding-left: 40px;
    position: relative;
    z-index: 998;

    li {
      margin-right: 20px;
      width: 60px;
      text-align: center;

      a {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.68);
        line-height: 32px;
        height: 32px;
        display: inline-block;
        font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, sans-serif;
        
        &:hover {
          color: #fff;
          //border-bottom: 1px solid $xtxColor;
        }
      }

      // .active {
      //   //color: $xtxColor;
      //   //border-bottom: 1px solid $xtxColor;
      // }
    }
  }
  .cart {
    width: 150px;
    .curr {
      height: 32px;
      line-height: 32px;
      text-align: center;
      position: relative;
      display: block;

      .icon-cart {
        font-size: 22px;
      }

      em {
        font-style: normal;
        position: absolute;
        right: 0;
        top: 0;
        padding: 1px 6px;
        line-height: 1;
        background: $helpColor;
        color: #fff;
        font-size: 12px;
        border-radius: 10px;
        font-family: Arial;
      }
    }
  }

}
.right {
    width: 300px;
    display: flex;
    text-align: center;
    padding-left: 40px;
    border-left: 2px solid $xtxColor;

    a {
      width: 80px;
      margin-right: 40px;
      font-size: 14px;
      line-height: 1;
      color: rgba(255, 255, 255, 0.68);
      font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, sans-serif;
      &:hover {
        color: #fff;
      }
    }
    .active {
        //color: #0c0c0c;
        border-bottom: 1px solid #888;
      }
  }
</style>

注：记得做完顶部导航后，在主index中引用方可生效。

<script setup lang="ts">
import HomeNav from './components/HomeNav.vue';
</script>

<template>
    <div>
        <HomeNav></HomeNav>
 </div>
</template>

3.脚部分的制作

1.代码含义

.app_footer类为页脚设置了背景颜色、内边距和溢出隐藏。

.contact和.extra类为页脚的不同部分提供了背景颜色和内边距。

.copyright类为版权信息设置了文本对齐、颜色和字体大小。

2.代码演示

<template>
    <footer class="app_footer">
      <!-- 联系我们 -->
      <div class="contact">

      </div>
      <!-- 其它 -->
      <div class="extra">
        <div class="container">
          <!-- 版权信息 -->
          <div class="copyright">
            <p>
              <a href="javascript:;">关于我们</a>
              <a href="javascript:;">帮助中心</a>
              <a href="javascript:;">客户服务</a>
              <a href="javascript:;">商务合作</a>
              <a href="javascript:;">搜索推荐</a>
            </p>
            <p>CopyRight © 黑神话·吗喽</p>
          </div>
        </div>
      </div>
    </footer>
</template>
  
<style scoped lang='scss'>
  .app_footer {
    overflow: hidden;
    background-color: #f5f5f5;
    padding-top: 0px;
  
    .contact {
      background: #fff;
  
      .container {
        padding: 60px 0 40px 25px;
        display: flex;
      }
  
      dl {
        height: 190px;
        text-align: center;
        padding: 0 72px;
        border-right: 1px solid #f2f2f2;
        color: #999;
  
        &:first-child {
          padding-left: 0;
        }
  
        &:last-child {
          border-right: none;
          padding-right: 0;
        }
      }
  
      dt {
        line-height: 1;
        font-size: 18px;
      }
  
      dd {
        margin: 36px 12px 0 0;
        float: left;
        width: 92px;
        height: 92px;
        padding-top: 10px;
        border: 1px solid #ededed;
  
        .iconfont {
          font-size: 36px;
          display: block;
          color: #666;
        }
  
        &:hover {
          .iconfont {
            color: $xtxColor;
          }
        }
  
        &:last-child {
          margin-right: 0;
        }
      }
  
      .qrcode {
        width: 92px;
        height: 92px;
        padding: 7px;
        border: 1px solid #ededed;
      }
  
      .download {
        padding-top: 5px;
        font-size: 14px;
        width: auto;
        height: auto;
        border: none;
  
        span {
          display: block;
        }
  
        a {
          display: block;
          line-height: 1;
          padding: 10px 25px;
          margin-top: 5px;
          color: #fff;
          border-radius: 2px;
          background-color: $xtxColor;
        }
      }
  
      .hotline {
        padding-top: 20px;
        font-size: 22px;
        color: #666;
        width: auto;
        height: auto;
        border: none;
  
        small {
          display: block;
          font-size: 15px;
          color: #999;
        }
      }
    }
  
    .extra {
      background-color: #333;
    }
  
    .slogan {
      height: 178px;
      line-height: 58px;
      padding: 60px 100px;
      border-bottom: 1px solid #434343;
      display: flex;
      justify-content: space-between;
  
      a {
        height: 58px;
        line-height: 58px;
        color: #fff;
        font-size: 28px;
  
        i {
          font-size: 50px;
          vertical-align: middle;
          margin-right: 10px;
          font-weight: 100;
        }
  
        span {
          vertical-align: middle;
          text-shadow: 0 0 1px #333;
        }
      }
    }
  
    .copyright {
      height: 170px;
      padding-top: 40px;
      text-align: center;
      color: #999;
      font-size: 15px;
  
      p {
        line-height: 1;
        margin-bottom: 20px;
      }
  
      a {
        color: #999;
        line-height: 1;
        padding: 0 10px;
        border-right: 1px solid #999;
  
        &:last-child {
          border-right: none;
        }
      }
    }
  }
</style>

注：图片皆取自网络