<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>js便笺</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #fff;
}
.note-container {
position: absolute;
width: 300px;
height: 400px;
background-color: #f1f180;
box-shadow: 0 3px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 20px #000;
}
.note-title {
position: relative;
width: 100%;
color: #000;
background-color: #e4be32;
user-select: none;
cursor: default;
}
.note-title h6 {
margin: 0;
padding-left: 15px;
font-size: 16px;
font-weight: 700;
height: 40px;
line-height: 40px;
}
.note-title .btn-close {
position: absolute;
height: 40px;
width: 40px;
line-height: 40px;
right: 0;
top: 0;
color: #000;
text-align: center;
text-decoration: none;
}
.note-title .btn-close:hover {
background-color: #c3a01e;
color: #fff;
}
.note-content {
height: 300px;
padding: 10px;
overflow-y: auto;
outline: none;
}
.note-footer {
height: 40px;
line-height: 40px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.note-footer .btn-new,
.note-footer .btn-remove {
flex: 1;
width: 40px;
height: 40px;
color: #333;
text-align: center;
font-size: 16px;
font-weight: 700;
text-decoration: none;
outline: none;
border: none;
background-color: #e4be32;
}
.note-footer .btn-new:hover,
.note-footer .btn-remove:hover {
opacity: 0.7;
color: #fff;
}
</style>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
</body>
</html>