`待办事项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 // 预览打包后的项目

```

相关推荐
FanetheDivine1 分钟前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis11 分钟前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络22 分钟前
Vue3 原生移动应用开发来了
前端·javascript·css
GISer_Jing25 分钟前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
我爱学习_zwj1 小时前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
小谭鸡米花1 小时前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
摆烂工程师1 小时前
什么是 ChatGPT Business 会员?与 ChatGPT Plus 有什么不同?
前端·后端·程序员
闲不住的李先森1 小时前
使用Context7:告别AI“幻觉”,让编程助手永远生成最新、可用的代码
前端·ai编程·cursor
西瓜树枝1 小时前
解决 JS 大整数精度丢失?一文读懂 BigInt 的底层逻辑与实战规则
前端·javascript
刺客_Andy1 小时前
React 第四十六节 Router中useInRouterContext的使用详细介绍及注意事项
前端·javascript·react.js