master

分支 (1)

管理

管理

master

vue-courseware
/
todolist综合练习.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <title>Document</title>
</head>

<body>
    <div id="root">
        <div>
            <header class="header">
                <h1>待办清单</h1>
                <input type="text" class="new-todo" placeholder="type something here" />
            </header>

            <section class="main">
                <input type="checkbox" class="toggle-all" />
                <ul class="todo-list">
                    <li class="completed">
                        <!--该li有三种状态
								class=""的时候为未完成状态
								class="completed"的时候为已完成状态
								class="editing"的时候为编辑任务状态
							-->
                        <div class="view">
                            <input type="checkbox" class="toggle" />
                            <label ref="label">我是 todo 内容</label>
                            <button class="destroy"></button>
                        </div>
                        <input type="text" class="edit" />
                    </li>
                </ul>
            </section>

            <footer class="footer">
                <span class="todo-count">
						<strong> 8 </strong>
						<span>item left</span>
                </span>
                <ul class="filters">
                    <li>
                        <a class="selected">All</a>

                    </li>
                    <li>
                        <a class="selected">Active</a>
                    </li>
                    <li>
                        <a>Completed</a>
                    </li>
                </ul>
                <button class="clear-completed">
						clear all completed
					</button>
            </footer>

        </div>
    </div>
</body>

</html>