每天学一个jquery插件-仿富文本框1

每天学一个jquery插件-仿富文本框1

仿富文本框1

想来想去设计有点麻,所以直接照着csdn的markdown编辑器仿一个一样的界面出来

效果如下
每天学一个jquery插件-仿富文本框1_第1张图片

代码部分

*{
     
	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%;
}

<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插件,javascript,jquery)