目录

我们重新布局样式

个人习惯写一个最外层的样式

Header Content Footer

布局出来了

加上标签和容器

绑定样式

我们设置一些样式

页面展示效果

我们加入导航栏

搜索组件

我们这边把导航菜单抽象成一个公共的组件

引入好

页面中成功进行了展示

我们可以把这边替换成我们的logo

首先我们把图片文件引入

我们就能引入图片

我们接下来指定样式

用原生css设置一下样式

最终效果 

---

接下来我们要做我们项目的模版

我们重新布局样式

BasicLayout.vue

我们在app.vue里面引入这个样式

个人习惯写一个最外层的样式

div

我们是在组件库里找一下布局

 <a-layout style="height: 400px;"><a-layout-header>Header</a-layout-header><a-layout-content>Content</a-layout-content><a-layout-footer>Footer</a-layout-footer></a-layout>

写在里面

有三部分

Header Content Footer

我们去网页中看

布局出来了

首先我们设置一下布局

加上标签和容器

<template><div id="basicLayout"><a-layout style="height: 400px"><a-layout-header class="header">Header</a-layout-header><a-layout-content class="content"><router-view /></a-layout-content><a-layout-footer class="footer">Footer</a-layout-footer></a-layout></div>
</template>

绑定样式

<style scoped>
#basicLayout {
}#basicLayout .header {
}#basicLayout .content {
}
</style>

我们设置一些样式

页面展示效果

我们加入导航栏

菜单

搜索组件

 <a-menu mode="horizontal" :default-selected-keys="['1']"><a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled><div:style="{width: '80px',height: '30px',borderRadius: '2px',background: 'var(--color-fill-3)',cursor: 'text',}"/></a-menu-item><a-menu-item key="1">Home</a-menu-item><a-menu-item key="2">Solution</a-menu-item><a-menu-item key="3">Cloud Service</a-menu-item><a-menu-item key="4">Cooperation</a-menu-item></a-menu>

我们这边把导航菜单抽象成一个公共的组件

引入好

<template><div id="globalHeader"><a-menu mode="horizontal" :default-selected-keys="['1']"><a-menu-itemkey="0":style="{ padding: 0, marginRight: '38px' }"disabled><div:style="{width: '80px',height: '30px',borderRadius: '2px',background: 'var(--color-fill-3)',cursor: 'text',}"/></a-menu-item><a-menu-item key="1">Home</a-menu-item><a-menu-item key="2">Solution</a-menu-item><a-menu-item key="3">Cloud Service</a-menu-item><a-menu-item key="4">Cooperation</a-menu-item></a-menu></div>
</template><script setup lang="ts"></script><style scoped></style>

页面中成功进行了展示

我们可以把这边替换成我们的logo

首先我们把图片文件引入

我们就能引入图片

我们接下来指定样式

        <div class="title-bar"><img class="logo" src="../assets/oj.png" /><div>多多oj</div></div>

<style scoped>
.logo {height: 80px;
}
</style>

我们现在的样式是这样子的

这边改回方便一些

在浏览器控制台去书写

用原生css设置一下样式

.title {font-size: 30px;color: #ff91df;margin-left: 16px;margin-top: 10px;font-family: 幼圆;
}

最终效果 

个人号推广

博客主页

朱道阳-CSDN博客

Web后端开发

https://blog.csdn.net/qq_30500575/category_12624592.html?spm=1001.2014.3001.5482

Web前端开发

https://blog.csdn.net/qq_30500575/category_12642989.html?spm=1001.2014.3001.5482

数据库开发

https://blog.csdn.net/qq_30500575/category_12651993.html?spm=1001.2014.3001.5482

项目实战

https://blog.csdn.net/qq_30500575/category_12699801.html?spm=1001.2014.3001.5482

算法与数据结构

https://blog.csdn.net/qq_30500575/category_12630954.html?spm=1001.2014.3001.5482

计算机基础

https://blog.csdn.net/qq_30500575/category_12701605.html?spm=1001.2014.3001.5482

回忆录

https://blog.csdn.net/qq_30500575/category_12620276.html?spm=1001.2014.3001.5482