<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>markdown编辑器</title>
<link rel="stylesheet" href="myth.css">
<style type="text/css">
.EditMainBox {
height: 100%;
position: relative;
}
.header {
height: 90px;
width: 100%;
top: 0;
position: absolute;
}
.content {
width: 100%;
background-color: lime;
top:90px;
bottom:20px;
position: absolute;
overflow: auto;
}
.footer{
width:100%;
height:20px;
position:absolute;
bottom:0;
background-color: red;
}
.titleBox{padding: 3px 5px;position: relative;height: 33px;}
.m-input{border: 1px solid #ccc;}
.titleInput{position: absolute;right: 80px;left: 10px;padding: 3px 10px;}
.icoSelect{width: 32px;position: absolute;right: 43px;top:3px}
.icoSelect img{width: 32px;height: 32px;}
.colorSelect{width: 32px;height: 28px;background-color: black;position: absolute;right: 10px;top:3px}
.ToolsBox{background-color: #ececec;padding: 3px 10px;font-size: 12px;}
.ToolsBox li {display: inline-block;margin: 0px;padding: 0 3px;color: #3D3D3D;}
.icoTop{font-size: 26px;display: block;height: 28px;text-align: center;color: #444;cursor: pointer;}
</style>
</head>
<body>
<div class="EditMainBox">
<div class="header">
<div class="titleBox">
<input type="text" class="m-input radius10 titleInput">
<span class="icoSelect"><img src="2.png" alt=""></span>
<span class="colorSelect radius10">0</span>
</div>
<div class="ToolsBox">
<ul>
<li><span class="myth-icon mythicons-bold icoTop"></span><span>粗体</span></li>
<li><span class="myth-icon mythicons-italic icoTop"></span><span>斜体</span></li>
<li><span class="myth-icon mythicons-title icoTop"></span><span>标题</span></li>
<li><span class="myth-icon mythicons-linethrough icoTop"></span><span>删除线</span></li>
<li><span class="myth-icon mythicons-outoforder icoTop"></span><span>无序</span></li>
<li><span class="myth-icon mythicons-order icoTop"></span><span>有序</span></li>
<li><span class="myth-icon mythicons-pending icoTop"></span><span>待办</span></li>
<li><span class="myth-icon mythicons-reference icoTop"></span><span>引用</span></li>
<li><span class="myth-icon mythicons-code icoTop"></span><span>代码块</span></li>
<li><span class="myth-icon mythicons-pic icoTop"></span><span>图片</span></li>
<li><span class="myth-icon mythicons-video icoTop"></span><span>视频</span></li>
<li><span class="myth-icon mythicons-table icoTop"></span><span>表格</span></li>
<li><span class="myth-icon mythicons-link icoTop"></span><span>超链接</span></li>
<li><span class="myth-icon mythicons-template icoTop"></span><span>模板</span></li>
<li><span class="myth-icon mythicons-logo icoTop"></span><span>神话</span></li>
</ul>
</div>
</div>
<div class="content m-flex">
<div class="EditBox">1</div>
<div class="ViewBox">2</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
评论10