介绍 & lt; ! DOCTYPE html> & lt; html>
& lt; head>
& lt; meta charset=癠TF-8"祝辞
& lt; title>减价编辑器& lt;/title>
& lt; style 类型=拔谋?css"比;
*,{保证金:0;填充:0;轮廓:,没有;border - radius:, 0;
}
html, body {宽度:100%;高:100%;字体类型:,“Helvetica Neue",, Helvetica,, Arial,,无衬线;background:, # ebebeb;
}# toolbar {高度:50 px; background:, # 444;宽度:,100%;颜色:,# fff;行高:,50 px;
}# container {溢出:汽车;位置:,绝对的,底部:,0;左:,0;右:,0;:,50 px;
}# editor-column # preview-column {宽度:49.5%;高:100%;溢出:,汽车;位置:,相对;background:, # fff;
}.pull-left {浮动:左;
}
.pull-right {浮动:,;
}& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=皌oolbar"祝辞& lt;/div>
& lt; div id=癱ontainer"祝辞
& lt; div id=癳ditor-column",类=皃ull-left"比;
& lt; div id=皃anel-editor"祝辞
& lt;/div>
& lt;/div>
& lt; div id=皃review-column",类=皃ull-right"比;
& lt; div id=皃anel-preview"祝辞
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/body> & lt;/html> & lt; ! DOCTYPE html> & lt; html>,
& lt; head>
& lt; meta charset=& # 39; utf - 8 # 39;比;
& lt; title>减价编辑器& lt;/title>
& lt; script src=https://www.yisu.com/zixun/" js/jquery-2.1.4.min.js ">
js/marked.js
这篇文章主要介绍了如何使用HTML + CSS做一个实时预览的减价编辑器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
第一步搭建布局:
1。构思布局(以下是总体布局)
2。项目下新建个索引。html页面,写入以下代码:
第二步引入资源实现初步效果:
1。项目下创建js文件夹
2。解从下载好的压缩包解标记/lib下的marked.js到js文件夹
3。解从下载好的压缩包解ace-builds/src到js文件夹重命名为王牌
4。引入js文件
(注:减价。css是减价样式文件,可以自行编写或从网上下载比如:github-markdown-css)
