代码滚动 在线预览
目录 阶段一：让字符实现自动滚动 阶段二：字符可以应用到CSS 阶段三：完成太极的制作 阶段四：手机用户访问 阶段五：部署到GitHub最好的学习方法，不是看书也不是问人，而是定一个目标然后去实现它。
在桌面建一个文件夹，暂命名为 Code scroll，是代码滚动的意思，文件夹中建一个子文件夹命名为 src，用vscode打开 Code scroll文件夹，在src目录下建3个文件，index.html 、style.css 、main.js 。index.html里面要关联 style.css 和 mian.js.
安装parcel,最好使用楼主相似的版本，1.12.3，
初始化文件夹npm init -y
安装parcel的命令
yarn global add parcel 或者 npm i -g parcel
运行预览
parcel src/index.html
实现字符的滚动
回车变成html里面的空格
让一个div 左边黑，右边白
伪元素：CSS在div的第一个子元素加1，第二个加2，,然后让1和2都变成两个球，记得做定位。
#div1::before {
content: "";
display: block;
position: relative;
}
#div1::after {
content: "";
display: block;
position: relative;
}
接下来怎么让两个伪元素里面有扣除一个洞呢。还是背景渐变(css gradient background)实现镜像渐变。
媒体查询：
@media (max-width: 500px) {
#bb {
background: blanchedalmond; //媒体查询，将背景设置为浅白色
}
#html { // 代码滚动区域
height: 55vh; //手机上的布局，分为上下结构，上半部分滚动代码，下半部分展示太极
overflow: auto;
word-break: break-all; //手机屏幕窄，要设置换行
border: 2px solid black;
background: rgba(7, 49, 60, 0.9);
color: white;
font-family: Fira Code;
margin-top: 30px;
margin-bottom: 20px;
padding: 20px;
border-radius: 1%;
}
#div1Wrapper { // 太极展示区域
border: 1px solid black;
background: rgba(7, 49, 60, 0.1);
border-radius: 1%;
height: 35vh;
}
#div1 {
position: relative;
top: 20px;
right: 0;
margin: 0 auto;
}
}
阶段五：部署到GitHub
上传到GitHub,让更多的人看到你！
程序分享程序预览链接、程序下载链接
由于本人水平有限，如有描述不准确的地方请给我留言，欢迎交流~
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
