vue实现一个记事本待办事项代码
代码语言:html
所属分类:布局界面
代码描述:vue实现一个记事本待办事项代码,可增加删除。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @charset "utf-8"; *{ padding: 0; margin: 0; } ul{ list-style: none; } body{ background-color: #2d2d2d; } #box{ width: 500px; margin: 50px auto; background-color: #fff; box-shadow: 0 0 10px #ccc ; border-radius: 5px; overflow: hidden; } #box .head{ background-color: #DFF0D8; padding: 20px; } #box .head h2{ color: #3C763D; } #box .head p{ font-size: 12px; color: #3C763D; line-height: 30px; } #box .head .input{ height: 30px; line-height: 30px; border-radius: 5px; background-color:#EEEEEE ; overflow: hidden; border: 1px solid #ccc; } #box .head .input span{ display: inline-block; width: 50px; height: 30px; text-align: center; font-size: 12px; float: left; } #box .head .input input{ float: left; width: calc(100% - 102px); border: none; outline: none; height: 30px; text-indent: 20px; } #box .head .input span:first-child{ border-right: 1px solid #ccc; } #box .head .input span:last-child{ border-left: 1px solid #ccc; cursor: pointer; } #box .list{ padding: 20px; } #box .list li{ border-bottom: 1px dashed #ccc; height: 40px; font-size: 14px; color: #2D2D2D; } #box .list li:last-child{ line-height: 40px; border-bottom: none; padding: 0 20px; } #box .list li span{ float: left; height: 20px; line-height: 20px; margin: 10px 0; text-align: center; } #box .list li span:first-child{ width: 50px; border-right: 1px solid #ccc; margin-right: 10px; } #box .list li span:last-child{ width: 30px; background: url(//repo.bfw.wiki/bfwrepo/icon/5d834b3fc7ffe.png) no-repeat center center; background-size: cover; float: right; margin-right: 20px; cursor: pointer; } #box .list li:last-child b:first-child{ float: left; } #box .list li:last-child b:last-child{ float: right; cursor: pointer; } </style> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0