创新实训第七周

流云缱绻意

已于 2024-06-24 11:41:55 修改

阅读量86

点赞数 2

文章标签： vue.js

于 2024-05-30 15:24:57 首次发布

本文链接：https://blog.csdn.net/qq_63043240/article/details/139325576

版权

本周我们初步做出了知识学习内容的格式，可以作为后面内容填充时的格式模板

其中模板的内容有标题、文本格式，目录格式，以及代码框格式等等

下面为框架代码

      <el-container style="width: 1300px;display: flex;flex-direction: row">
        <el-aside :width="sideWidth+'px'" style="height: 100%" >
          <learnAside />
        </el-aside>

        <el-container style="display: flex; flex-direction: column; background-color: rgb(238,241,246); ">
          <div style="display: flex;justify-content: flex-start;margin: 0">
            <el-text>
              <div style="display: flex; align-items: center; margin: 0;">
                <div style="display: flex; align-items: center; margin-left: 20px; margin-top: 18px;">
                  <el-icon class="icon" size="large" style="margin-right: 10px;"><Notebook /></el-icon>
                  <h2 id="section1">Bootstrap 教程</h2>
                </div>
              </div>

</div>

</el-container>

    </el-container>
      <div class="sidebar" style="width: 200px;">
        <ul>
          <li v-for="(section, index) in sections" :key="index" @click="scrollToSection(section.id)">
            {{ section.title }}
          </li>
        </ul>
      </div>
    </el-container>
</div>
</template>

export default {
name: 'learnHtml2',
data(){
    return{
      tableData: [{
        date: '1991',
        name: 'HTML'
      }, {
        date: '1993',
        name: 'HTML +'
      }, {
        date: '1995',
        name: 'HTML 2.0'
      }, {
        date: '1997',
        name: 'HTML 3.2'
      }, {
        date: '1999',
        name: 'HTML 4.01'
      }, {
        date: '2000',
        name: 'XHTML 1.0'
      }, {
        date: '2012',
        name: 'HTML 5'
      }, {
        date: '2013',
        name: 'XHTML 5'
      }],
      sideWidth:200,
      sections: [

        { id: 'section1', title: '顶部' },
        { id: 'section2', title: 'Bootstrap 简介' },
        { id: 'section3', title: 'Bootstrap 环境安装' },
        { id: 'section4', title: 'Bootstrap CSS 概览' },
        // ... 其他章节 ...

      ],
    }
},
components:{
    learnAside,
    learnHeader
},
methods:{
    scrollToSection(id) {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
}
}
</script>

}
.copy-code-button {

display: none;

}
.reference {
width: 150%; /* 表格宽度为100% */
border-collapse: collapse; /* 合并相邻单元格边框 */
margin-bottom: 30px; /* 添加底部外边距 */
}
/* 表格标题和单元格样式 */
.reference th,
.reference td {
padding: 8px; /* 单元格内边距 */
text-align: left; /* 文本左对齐 */
border: 2px solid #000700; /* 添加边框 */
}
/* 表格标题样式 */

.reference th {

background-color: #95f195; /* 背景色 */

font-weight: bold; /* 字体加粗 */

}

/* 粗体显示操作系统名称 */

.reference td strong {

font-weight: bold; /* 字体加粗 */

}

/* 去除默认的内边距和边距（如果浏览器默认添加了） */

.reference,

.reference th,

.reference td {

box-sizing: border-box; /* 包括内边距和边框在元素的总宽度和高度内 */

margin: 0;

padding: 0;

}

/* 清除可能存在的默认样式 */

.reference * {

border: none;

background: none;

}
/* 为包含示例的外部div添加样式 */
.example {
margin: 20px; /* 外部边距 */
padding: 10px; /* 内部填充 */
border: 1px solid #ccc; /* 边框 */
border-radius: 5px; /* 边框圆角 */
background-color: #f5f5f5; /* 背景色 */
}
.prettyprint {

background-color: #83ea83; /* 淡绿色背景 */
padding: 10px; /* 可选的内边距，让内容有一些空间 */
border-radius: 5px; /* 可选的圆角边框 */
overflow: auto; /* 如果内容过多，显示滚动条 */
white-space: pre-wrap; /* 保留空格和换行符，同时允许文本换行 */
word-wrap: break-word; /* 防止长单词撑破容器 */
width: 1000px;
}
.prettyprint.prettyprinted {

/* 为包含代码的div添加样式 */
.example_code {
background-color: #fff; /* 背景色 */
border: 1px solid #ddd; /* 边框 */
max-width: 1000px;
min-width: 800px;
padding: 10px; /* 内部填充 */
font-family: 'Courier New', Courier, monospace; /* 字体 */
font-size: 0.9em; /* 字体大小 */
white-space: pre-wrap; /* 保留空白和换行符 */
overflow: auto; /* 滚动条在需要时出现 */
}
.example_code .code-textarea {

font-size: 16px; /* 你可以根据需要调整这个值 */

font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; /* 常用的代码字体 */

white-space: pre-wrap; /* 允许换行 */

word-wrap: break-word; /* 防止长单词撑破容器 */
max-width: 980px;
min-width: 800px;

/* 其他样式... */

}
/* 其他可能的代码元素样式... */
.sidebar {

/* 设置侧边栏的固定位置和大小 */

position: fixed;

top: 0px;

right: 0px;

width: 300px; /* 侧边栏宽度 */

height: 100vh; /* 侧边栏高度设置为视口高度 */