当前位置: 首页 > news >正文

`待办事项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

      ```

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

    ```bash

    cd todos // 进入项目目录

    yarn // 安装依赖

    yarn format // 格式化组件代码

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

    ```

3. **打包项目**

    ```bash

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

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

    ```


 

http://www.dtcms.com/a/179881.html

相关文章:

  • vue3: pdf.js5.2.133 using typescript
  • Spring Web MVC快速入门
  • Android对工程中的String中文字符的整理
  • Android framework功能配置开发
  • logback日志输出到项目运行目录
  • qtcreater配置opencv
  • 探索大型语言模型的 LLM 安全风险和 OWASP 十大漏洞
  • PEP 750 t-string 深度解析:与 f-string 的差异与进化
  • C 语言中的 对象(object),值(Value),类型(Type)
  • 国债收益率、需求与抛售行为的逻辑解析
  • Maven 处理依赖冲突
  • 软件鉴定测试报告编写有哪些注意事项?又有什么作用?
  • vue3: pdf.js 2.16.105 using typescript
  • 【2025最新】gitee+pycharm完成项目的上传与管理
  • 雷赛伺服L7-EC
  • 如何解决Jmeter中的乱码问题?
  • JVM之jcmd命令详解
  • uniapp小程序轮播图高度自适应优化详解
  • 影楼精修-牙齿美型修复算法解析
  • SSHv2公钥认证示例-Paramiko复用 Transport 连接
  • 养生:塑造健康生活的良方
  • 【挑战项目】 --- 微服务编程测评系统(在线OJ系统)(二)
  • React 第三十八节 Router 中useRoutes 的使用详解及注意事项
  • HOT 100 | 【子串】76.最小覆盖子串、【普通数组】53.最大子数组和、【普通数组】56.合并区间
  • electron 结合 react(cra创建的) 创建桌面应用和打包桌面应用
  • 掌握Multi-Agent实践(三):ReAct Agent集成Bing和Google搜索功能,采用推理与执行交替策略,增强处理复杂任务能力
  • “ES7+ React/Redux/React-Native snippets“常用快捷前缀
  • 【K8S系列】Kubernetes常用 命令
  • CUDA编程 - CUDA编程中处理半精度浮点运算(FP16) - fp16ScalarProduct
  • 5.9-selcct_poll_epoll 和 reactor 的模拟实现