案例-todolist计划列表[基本代码]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
			width:600px;
			margin:50px auto 0;
		}
		.inputtxt{
			width:550px;
			height:30px;
			border:1px solid #ccc;
			padding:0px;
			text-indent:10px;
		}
		.inputbtn{
			width:40px;
			height:32px;
			padding:0px;
			border:1px solid #ccc;
		}
		.list{
			margin:0;
			padding:0;
			list-style:none;
			margin-top:20px;
		}
		.list li{
			height:40px;
			line-height:40px;
			border-bottom:1px solid #ccc;
		}

		.list li span{
			float:left;
		}

		.list li a{
			float:right;
			text-decoration:none;
			margin:0 10px;
		}
	</style>
</head>
<body>
	<div class="list_con">
		<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn">

		<ul id="list" class="list">
			<!-- javascript:; # 阻止a标签跳转 -->
			<li>
				<span>学习html</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
			</li>
			<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
			<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
		</ul>
	</div>
</body>
</html>

原文地址：https://www.cnblogs.com/eliwen/p/12042049.html

时间： 2024-10-10 22:37:54

案例-todolist计划列表[基本代码]的相关文章

案例-todolist计划列表【添加计划】

<div class="list_con" id="todolist"> <h2>To do list</h2> <input type="text" v-model="text" id="txt1" class="inputtxt"> <input type="button" name=""

案例-todolist计划列表【删除计划】

<div class="list_con" id="todolist"> <h2>To do list</h2> <input type="text" v-model="text" id="txt1" class="inputtxt"> <input type="button" name=""

案例-todolist计划列表【显示列表】

<div class="list_con" id="todolist"> <h2>To do list</h2> <input type="text" name="" id="txt1" class="inputtxt"> <input type="button" name="" value=&

MVC案例之新闻列表作者:白宁超 2016年6月6日15:26:30 摘要:本文主要针对javaweb基本开发之MVC案例的简单操作,里面涉及mysql数据库及表的创建,以及jsp页面和servlet的操作,整个操作流程进行梳理.其中涉及的概念问题,不在一一详述.对于整个操作流程按照开发顺序创建.(本文原创,转载标明出处:MVC案例之新闻列表). 实验准备: 1 win*系统,一般配置笔记本或者台式机 2 安装MyEclipse开发平台,本实验使用MyEclipse2015(点击下载) 3

ecshop二次开发功能插件计划列表

原文地址:php ecshop 二次开发 http://phpecshop.blog.51cto.com/6296699/1854849 ecshop功能开发计划列表 1.搜索页面添加筛选功能,类似京东 2.搜索结合coreseek实现中文分词功能,后台可以添加修改删除关键词 3.搜索框输入关键词自动提示,类似京东效果 4.缓存使用memcached储存,加快访问速度 5.添加多语言,一个后台管理多个语言商城内容 6.每天登录送积分,设置连续登录不同的天数再奖励相应的积分 7.注册添加手机验证码

Spring计划列表

通过对产品需求做出分析后做出如下Spring计划列表及预计完成时间任务时间学习VB编程相关知识 2days 学习SQL相关知识 2days 编写登录界面程序 5h 卸载及进入窗体 2h 主界面部分 9h 允许主界面添加修改 3h 指定数据源 6h 查看数据库数据界面 12h 成绩查询界面 16h 索引卡的故事: VB:vb是我们编程的基本语言,需要对其进行掌握,可以编写出可以运行的程序 SQL SERVER:因为我们做的是成绩查询系统,所以会有大量的数据,数据库的学习就是必不可少的

React组件开发经典案例--todolist

点开查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>todolist2</title> <link rel="stylesheet" href=&qu

react综合案例-todolist、localstorage缓存数据

1.工具类storage.js var app ={ set(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(localStorage.getItem(key)); }, delete(key){ localStorage.removeItem(key); }, countFalseNum(key){ let count=new Number(0); let l

php案例2——用户列表页

一.用户列表页 1 <?php 2 $userInfo[]=array('id'=>'1','username'=>'clive1','sex'=>'男','age'=>'20'); 3 $userInfo[]=array('id'=>'2','username'=>'clive2','sex'=>'男','age'=>'20'); 4 $userInfo[]=array('id'=>'3','username'=>'clive3','se