每天学一个jquery插件-仿富文本框1
Posted 阿飞超努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天学一个jquery插件-仿富文本框1相关的知识，希望对你有一定的参考价值。
每天学一个jquery插件-仿富文本框1
仿富文本框1
想来想去设计有点麻，所以直接照着csdn的markdown编辑器仿一个一样的界面出来
效果如下
代码部分
*{
margin: 0;
padding: 0;
}
#title{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: rgb(243,243,243);
border-bottom: 1px solid lightgray;
display: flex;
align-items: center;
}
#title *{
height: 60%;
display: flex;
justify-content: center;
align-items: center;
outline: none;
border: none;
}
#titles{
flex-basis: 100px;
color: rgb(135,135,135);
}
#titles span:nth-of-type(1){
font-size: 24px;
font-weight:bold;
}
#titles span:nth-of-type(2){
font-size: 18px;
}
#srk{
flex: 1;
font-size: 16px;
font-weight: 500;
border: 1px solid lightgray;
border-radius: 50px;
text-indent: 12px;
}
#save{
flex-basis: 100px;
color: rgb(252,93,58);
border: 1px solid rgb(252,93,58);
border-radius: 50px;
margin: 10px;
cursor: pointer;
}
#upload{
flex-basis: 100px;
border-radius: 50px;
color: white;
cursor: pointer;
background-image: linear-gradient(0,rgb(255,162,37),rgb(255,32,68));
}
#head{
flex-basis: 90px;
display: flex;
justify-content: center;
align-items: center;
}
#head #img{
height: 40px;
width: 40px;
border-radius: 50%;
background-image: url(../img/doctor.jpeg);
overflow: hidden;
background-size: 100% 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>富文本框啊</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/fwbka.js"></script>
<link href="css/fwbka.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="title">
<div id="titles"><span><</span><span>文章管理</span></div>
<input type="text" id="srk" placeholder="2021-05-18" />
<div id="save">保存草稿</div>
<div id="upload">发布文章</div>
<div id="head">
<div id="img"></div>
</div>
</div>
<div id="tools"></div>
<div id="edit"></div>
<div id="center"></div>
<div id="show"></div>
<div id="foot"></div>
</body>
</html>
<script>
$(function(){
})
</script>
思路解释
- 今天先抄外观，就抄了一丢丢.
以上是关于每天学一个jquery插件-仿富文本框1的主要内容，如果未能解决你的问题，请参考以下文章