html+css实现简单记事本

最新推荐文章于 2024-04-08 21:07:42 发布

彩色面团儿

最新推荐文章于 2024-04-08 21:07:42 发布

阅读量2k

点赞数 2

分类专栏：网站制作笔记文章标签：前端

本文链接：https://blog.csdn.net/m0_63172128/article/details/123801169

版权

笔记同时被 2 个专栏收录

42 篇文章 15 订阅

订阅专栏

网站制作

6 篇文章 0 订阅

订阅专栏

html+css实现简单记事本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: none;
				background-color: #F4F7FE;
			}

			.box {

				width: 600px;
				height: 500px;
				background-color: #ADD8E6;
				text-align: center;
				margin: 20px auto;
				border-radius: 10px  ;
				

			}

			textarea {
				/* background-color: #008CBA; */
				border: 0.2rem #1b91b5 solid;
				width:550px ;
				height: 300px;
				margin-top: 0px;
				margin-bottom: 20px;
				font-size: 26px;//按钮中字体大小
				text-align: left;
				padding-top:10px; 
			}

				button {
				
				    color: #4C4C4C;
				  
				  
				  width: 160px;//按钮格子宽高
				  height: 70px;
				
					font-weight: bold;
					font-family:"微软雅黑","宋体";
					border: 0.1875rem #888888 outset;
				text-align: center;
				/* text-decoration: none; */
				display: inline-block;
				font-size: 26px;//按钮中字体大小
				margin: 10px 15px;
				/* cursor: pointer; */
				border-radius: 12px;
				}
		button:focus,button:hover{
		 color:#1B91B5;
		
		   }
		</style>


	</head>
	<body>
		<div class="box">
				<br />	<br />
			<p>临时记事本</p>
		
				<br />	
				<textarea type="text" id="inp"  ></textarea>
			
			
			<br />
		
			
			<button onclick="cls()">清&nbsp&nbsp&nbsp除</button> 
				
				&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
				<button onclick="back1()">撤&nbsp&nbsp&nbsp回</button>
				
				<br />
				<br />
			
			</div>
		
		<script>
			

			//清除
			function cls() {

				var inp = document.getElementById("inp");

				inp.value = "";

			}

			function back1() {

				var inp = document.getElementById("inp");
				var str = inp.value.substr(0, inp.value.length - 1);
				inp.value = str;

			}
		</script>



	</body>
</html>

彩色面团儿

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+css实现简单记事本

html+css实现简单记事本<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; border: none; background-color: #F4F7FE; }.
复制链接

扫一扫