视频弹幕设计网站03-----main组件与样式

简介: 视频弹幕设计网站03-----main组件与样式


这里有一些资料可供大家参考,小编的资料是参考的B站up主,语末终停的,感兴趣的小伙伴可以到链接地址去看,这里有些资料可供大家参考,希望对大家有帮助。

资源地址是:

链接:https://pan.baidu.com/s/19Vt4MUaIZYc7xEGUOHSejA?pwd=4h6z  提取码:4h6z

 

1、前端的主页面

2、在App.vue里的东西全部删掉

3、打开index.js文件,删掉不需要的东西

4、在App.vue里的主文件,里面可以删掉

5、主页面使用main

6、在index里面给他

7、创建一个main组件

8、在index中导入组件

9、main组件

10、设置重定向属性

11、使用ELEMENT-UI完成框架的书写

12、找到第一个

13、把代码复制上去

14、再给他一个CSS样式

15、复制header属性

16、把header属性复制上

17、把main样式给复制过来

18、ELEMENT-UI无法识别的错误

19、造成这个错误的原因就是没有导入ELEMENT-UI这个组件框架

代码样式:

<template>
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </div>
  </template>
<script>
export default {
 
}
</script>
 
<style scoped lang="less">
.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}
.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
 
</style>

最终呈现效果: image.png


相关文章
|
2月前
|
前端开发
一个方便的小系统,用于 CSS 中的动画入口
一个方便的小系统,用于 CSS 中的动画入口
|
5天前
|
前端开发 JavaScript
视频弹幕设计网站04--------header样式
视频弹幕设计网站04--------header样式
|
5天前
|
JavaScript 数据库
视频弹幕设计网站08-------video样式
视频弹幕设计网站08-------video样式
|
5天前
|
前端开发 JavaScript
视频弹幕设计网站07-----------创建video
视频弹幕设计网站07-----------创建video
|
5天前
|
缓存 前端开发
视频弹幕设计网站06--------home样式_1,WebConfig配置,如何获取路径前部分的内容
视频弹幕设计网站06--------home样式_1,WebConfig配置,如何获取路径前部分的内容
|
5天前
|
JavaScript 开发工具 git
大事件项目项目25------文章分类---页面组件和路由
大事件项目项目25------文章分类---页面组件和路由
弹幕视频设计网站14--------修改bug
弹幕视频设计网站14--------修改bug
|
2月前
|
PHP
【ripro美化】moban-child模板子主题原创美化包(适用于各类资源下载站)
RiPro主题版本:8.0 PHP版本要求:7.2 当前版本:V1.4 主题设置:全功能后台设置,无需改代码 主题特色:无需替换RIPRO原主题包任何内容即可实现后台全功能开关修改!!!
18 2
【ripro美化】moban-child模板子主题原创美化包(适用于各类资源下载站)
|
2月前
ripro子主题wori-child集成后台美化包(适用于设计素材站+资源下载站等)
新内容如下 1、子主题独立运行,彻底摆脱覆盖原主题文件 2、下载信息插件升级优化 3、细节优化
25 0
ripro子主题wori-child集成后台美化包(适用于设计素材站+资源下载站等)
|
8月前
uni-app动态修改顶部原生导航栏文字跟颜色
uni-app动态修改顶部原生导航栏文字跟颜色
211 0