本周我们初步做出了知识学习内容的格式,可以作为后面内容填充时的格式模板
其中模板的内容有标题、文本格式,目录格式,以及代码框格式等等
下面为框架代码
<template>
<div class="app" style="min-height: 100%;display: flex;width: 100%">
<el-container style="display: flex;">
<el-container style="width: 100%;">
<el-header style="background-color: rgb(255,255,255)">
<learnHeader />
</el-header>
<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 style="display: flex; justify-content: flex-start;text-align: left;">
<div style="margin-left: 40px;">
<div style="height: 20px;"></div> <!-- 第一行空白 -->
<div style="height: 20px;"></div> <!-- 第二行空白 -->
<div style="height: 20px;"></div> <!-- 第三行空白 -->
<div style="height: 20px;"></div> <!-- 第四行空白 -->
<div style="height: 20px;"></div> <!-- 第一行空白 -->
<div style="height: 20px;"></div> <!-- 第二行空白 -->
<div style="height: 20px;"></div> <!-- 第三行空白 -->
<div style="height: 20px;"></div> <!-- 第四行空白 -->
<div style="height: 20px;"></div> <!-- 第一行空白 -->
<div style="height: 20px;"></div> <!-- 第二行空白 -->
<div style="height: 20px;"></div> <!-- 第三行空白 -->
<div style="height: 20px;"></div> <!-- 第四行空白 -->
</div>
</div>
</el-text>
</div>
</el-container>
</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>
<script>
import learnAside from "@/components/learnAside.vue";
import learnHeader from "@/components/learnHeader.vue";
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>
<style>
:deep .icon{
}
.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 {
background-color: #83ea83; /* 淡绿色背景 */
padding: 10px; /* 可选的内边距,让内容有一些空间 */
border-radius: 5px; /* 可选的圆角边框 */
overflow: auto; /* 如果内容过多,显示滚动条 */
white-space: pre-wrap; /* 保留空格和换行符,同时允许文本换行 */
word-wrap: break-word; /* 防止长单词撑破容器 */
width: 1000px;
}
/* 为标题h2添加样式 */
.example h2 {
color: #333; /* 字体颜色 */
font-size: 1.5em; /* 字体大小 */
margin-bottom: 10px; /* 下边距 */
}
/* 为包含代码的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; /* 侧边栏高度设置为视口高度 */
/* 其他样式,如背景色、边框等 */
background-color: transparent;
padding: 0px;
box-sizing: border-box; /* 确保 padding 不会增加元素的总宽度 */
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 垂直方向 */
justify-content: center; /* 垂直居中子元素 */
}
.list {
list-style-type: disc; /* 或者其他你想要的列表样式 */
padding-left: 20px; /* 适当的内边距,让列表项和列表标记之间有空间 */
}
.list li {
/* 设置列表项文本居左 */
text-align: left; /* 实际上这是默认值,但明确写出可以确保不会被其他样式覆盖 */
}
</style>