视频弹幕设计网站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


相关文章
|
16天前
|
数据库
视频弹幕设计网站10-----弹幕列表信息获取
视频弹幕设计网站10-----弹幕列表信息获取
视频弹幕设计网站10-----弹幕列表信息获取
|
16天前
|
前端开发 JavaScript
视频弹幕设计网站04--------header样式
视频弹幕设计网站04--------header样式
|
10天前
|
小程序 数据可视化 智能硬件
好看的设计------App小程序设计资料,AppUI设计相关资源,up主
好看的设计------App小程序设计资料,AppUI设计相关资源,up主
|
16天前
|
JavaScript 数据库
视频弹幕设计网站08-------video样式
视频弹幕设计网站08-------video样式
|
16天前
|
前端开发 JavaScript
视频弹幕设计网站07-----------创建video
视频弹幕设计网站07-----------创建video
|
16天前
|
存储 前端开发 JavaScript
视频弹幕设计网站11-----绘制弹幕
视频弹幕设计网站11-----绘制弹幕
|
16天前
|
缓存 前端开发
视频弹幕设计网站06--------home样式_1,WebConfig配置,如何获取路径前部分的内容
视频弹幕设计网站06--------home样式_1,WebConfig配置,如何获取路径前部分的内容
|
16天前
|
XML SQL 前端开发
视频弹幕设计网站05-------静态资源与接口
视频弹幕设计网站05-------静态资源与接口
弹幕视频设计网站14--------修改bug
弹幕视频设计网站14--------修改bug
|
16天前
|
JavaScript 开发工具 git
大事件项目项目25------文章分类---页面组件和路由
大事件项目项目25------文章分类---页面组件和路由