calendar+codeflask实现实时编辑代码预览日历插件效果代码
代码语言:html
所属分类:选择器
代码描述:calendar+codeflask实现实时编辑代码预览日历插件效果代码
代码标签: calendar codeflask 实时 编辑 代码 预览 日历 插件
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/calendar.min.css"> <style> body { font-family: sans-serif; } h1 { text-align: center; margin: 10vh 0; padding: 0 10px; } h2 { text-align: center; margin: 5vh; } main { display: flex; max-width: 1000px; margin: auto; } #content { margin: auto; max-width: 1000px; } #editor { border: 1px solid #eee; flex: 1; margin-left: 20px; } @media (max-width: 992px) { h1 { margin: 20px 0; } main { flex-direction: column; } #editor { margin-left: 0; margin-top: 20px; } } .codeflask { position: relative !important; min-height: 400px; } .codeflask--has-line-numbers .codeflask__flatten { /* width: auto !important; */ } .calendar-wrapper { width: 100%; max-width: 400px; margin: auto; border: 1px solid #eee; padding: 10px; } footer { font-size: 10px; color: #777; margin-top: 20px; text-transform: uppercase; text-align: center; width: 100%; display: inline-block; left: 0; } #content pre { background-color: #eee; padding: 8px; border-radius: 4px; overflow-y: auto; } #content code { background-color: #eee; padding: 0 4px; line-height: 20px; border-radius: 4px; font-size: 16px; } #content pre code { padding: 0; } ul { padding-left: 16px; } ul li { margin-bottom: 8px; } a, a:visited { color: rgb(34, 110, 252); text-decoration: none; } blockquote { position: relative; margin-left: 24px; margin-right: 0; } blockquote::before.........完整代码请登录后点击上方下载按钮下载查看
网友评论0