`待办事项css样式

```vue

<template>

<div class="box">

<div class="head">

<h2>待办事项</h2>

<input type="text" placeholder="请输入您的待办事项,按回车添加">

</div>

<div class="main">

<ul>

<li>

<div class="text">

<input type="checkbox">

<span>学习Vue.js前端框架</span>

</div>

<div class="删除"><input type="button" value="删除"></div>

</li>

</ul>

</div>

<div class="foot">

<div class="left">

<input type="button" value="总计:">

</div>

<div class="right">

<input type="button" value="全部">

<input type="button" value="未完成">

<input type="button" value="已完成">

</div>

</div>

</div>

</template>

<script setup>

</script>

<style>

*{

margin: 0px;

padding: 0px;

}

#app{

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

.box{

width: 500px;

height: 500px;

border: 1px solid black;

background-color: #ddd;

display: flex;

flex-direction: column;

}

.box > div{

border: 1px solid black;

}

.head{

height: 80px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.head > input[type=text]{

width: 97%;

padding-left: 5px;

border: transparent;

margin-top: 5px;

font-size: 12px;

height: 30px;

border-radius: 7px;

}

.main{

flex:1;

}

.foot{

height: 50px;

width: 100%;

display: flex;

flex-direction: row;

justify-content: space-between;

}

li{

list-style: none;

width: 97%;

border-radius: 7px;

display: flex;

flex-direction: row;

/* 分开左右两边 */

justify-content: space-between;

height: 35px;

background-color: white;

margin: 8px;

line-height: 50px;

}

li > div{

display: flex;

align-items: center;

justify-content: center;

margin: 5px;

}

span{

display: inline-flexbox;

padding-left: 5px;

}

input[type=button]{

border: transparent;

margin: 10px;

font-size: 15px;

}

</style>

```

跑项目

  1. **克隆/下载项目**
  • 确保已安装Git。

  • 打开终端:Win+R打开运行窗口,输入`cmd`回车。

  • 执行克隆命令:

```bash

git clone https://gitee.com/myhfw003/grade23-fullstack-class2-todos-demo.git

```

  1. **进入项目目录,安装依赖,运行项目**

```bash

cd todos // 进入项目目录

yarn // 安装依赖

yarn format // 格式化组件代码

yarn dev // 在开发环境中运行项目

```

  1. **打包项目**

```bash

yarn build // 打包项目,打包好的文件在dist目录

yarn review // 预览打包后的项目

```

相关推荐
Dolphin_海豚21 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件24 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易1 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma771 小时前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在1 小时前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang1 小时前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式