前言
继续总结过程中学到的新知识,这是第3部分。
一、设置上下两部分,上方展示代码,下方跟随展示效果
1 设置HTML结构
<link rel="stylesheet" href="./css/default.css"> /*默认框架样式*/
<style id="styleTag"></style> /*引入跟随展示效果 样式*/
......
<div class="code-wrapper">
<pre id="code"></pre>
</div>
<div class="preview-wrapper">
<div class="preview">
<div class="wrapper">
......
<div class="upperLip right"></div>
</div>
</div>
</div>
2 框架的默认样式
*{margin: 0; padding: 0; box-sizing: border-box;}
*::after{
box-sizing: border-box;
}
......
body{
display: flex;
flex-direction: column;
h