黑马程序员VUE学习笔记-小黑记事本案例

最新推荐文章于 2024-03-05 11:50:25 发布

YuKing_HONG

最新推荐文章于 2024-03-05 11:50:25 发布

阅读量2.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/YuKing_HONG/article/details/114874120

本文是黑马程序员的Vue学习笔记，通过实现小黑记事本案例，探讨了CSS、HTML和JS的结合应用。虽然CSS部分存在不足，但整体功能正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己写的样式，有很多不足，敬请见谅和指正。功能还是正常的。

CSS部分


* {
    padding: 0;
    margin: 0;
}

#todoapp {
    width: 300px;
    margin: 5px auto;
    box-shadow: 0px 3px 10px 2px rgba(0,0,0,.1);

}

.biaoti {
    font:normal 200 34px '微软雅黑' ;
   color:  rgb(219, 82, 82);
   text-align: center;
   padding-top:100px ;
   padding-bottom: 10px;
}
.new-todo{
width: 100%;
height: 40px;
padding-left:10px;
color: rgb(88, 88, 88);
box-sizing:border-box;
border: 1px solid rgb(236, 236, 236);/*这里之前宽写成100%就出现对不齐的问题*/
}
.new-todo:focus{
    outline: none;
}
.footer{
    position: relative;
    width:100%;
    height: 40px;
    box-sizing:border-box; /*border-box你想要设置的边框和内边距的值是包含在width内的.不包含margin*/
    border: 1px solid rgb(236, 236, 236);
    background-color: white;
    
}

.footer span{
    font-size: 12px;
    color