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()">清   除</button>
         
<button onclick="back1()">撤   回</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>