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

```

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css