列表页面（html+css+js）

html文件

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<link rel="stylesheet" href="css/index.css"/>

		<script src="js/jquery.min.js"></script>

	</head>

	<body>

		<div class="condition">

			用户名<input type="text"/>

			用户名<input type="text"/>

			用户名<input type="text"/>

			<button>查询</button>

			<button onclick="window.location.href='add.html'">新增</button>

		</div>

		<table border="1" class="tablelist">

			<thead>

				<tr>

					<th>asfd</th>

					<th>asfd</th>

					<th>asfd</th>

					<th>asfd</th>

					<th>asfd</th>

					<th width="120px">操作</th>

				</tr>

			</thead>

			<tr>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>

					<button class="edit">修改</button>

					<button class="remove">删除</button>

				</td>

			</tr>

			<tr>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>

					<button class="edit">修改</button>

					<button class="remove">删除</button>

				</td>

			</tr>

			<tr>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>

					<button class="edit">修改</button>

					<button class="remove">删除</button>

				</td>

			</tr>

			<tr>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>asfd</td>

				<td>

					<button class="edit">修改</button>

					<button class="remove">删除</button>

				</td>

			</tr>

		</table>

		<table class="page">

			<td>

				<button>首页</button>

				<button>上一页</button>

				<button>下一页</button>

				<button>尾页</button>

				<input type="text" class="page-no" name="pageNo"/>

				<button>转</button>

			</td>

		</table>

	</body>

</html>

css文件

*{

	margin: 0px;

	padding: 0px;

	font-size: 14px;

	font-family: "microsoft yahei";

}

body{

	background-color: #f8f8f8;

}

.header{

	height: 70px;

	background-color: #2196F3;

}

.left{

	position: absolute;

	top: 70px;

	bottom: 0px;

	left: 0px;

	width: 200px;

	float: left;

	border: 1px solid #e1e1e1;

}

.left .title{

	height: 48px;

	line-height: 48px;

	background-color: #e9e9e9;

	border-bottom: 1px solid #E1E1E1;

	font-size: 15px;

	font-weight: bold;

	text-align: center;

}

.menux p{

	height: 40px;

	line-height: 40px;

	background-color: #f8f8f8;

	border-bottom: 1px solid #E1E1E1;

	text-align: center;

}

.menux p:hover{

	background-color: #2196F3;

	color: white;

	/* cursor: pointer; */

}

.menux ul{

	list-style: none;

	display: none;

}

.menux ul li{

	line-height: 36px;

	height: 36px;

	border-bottom: 1px dotted #cccccc;

	box-sizing: border-box;

}

.menux ul li a{

	display: block;

	padding-left: 50px;

	color: black;

	text-decoration: none;

}

.menux ul li a:hover{

	background-color: #f7f2ff;

	color: #467FE6;

	cursor: pointer;

}

.main{

	position: absolute;

	top: 70px;

	bottom: 0px;

	left: 210px;

	right: 0px;

	float: right;

}

.location{

	height: 40px;

	line-height: 40px;

	background-color: white;

	border-bottom: 1px solid #E1E1E1;

	border-right: 1px solid #E1E1E1;

	border-left: 1px solid #E1E1E1;

	padding-left: 10px;

	box-sizing: border-box;

}

.condition{

	background-color: #FFFFFF;

	border: 1px solid #E1E1E1;

 	margin-top: 10px;

	padding: 10px 5px;

	color: #666666;

}

.condition input{

	height: 25px;

	border: 1px solid #E0E0E0 ;

	border-radius: 4px;

}

.condition button{

	margin-right: 10px;

	background-color: #467fe6;

	color: white;

	border:1px solid #e0e0e0;

	padding: 5px 5px;

	font-size: 12px;

	border-radius: 5px;

	cursor: pointer;

}

.condition button:hover{

	background-color: #2196F3;

}

.tablelist{

	width: 100%;

	border: 1px solid e0e0e0;

	margin-top: 10px;

	background-color: white;

	border-collapse: collapse;

}

.tablelist th,td{

	height: 30px;

	border: 1px solid e0e0e0;

}

.tablelist th{

	background-color: #F8F8F8;

}

.tablelist td{

	padding:0px 2px;

}

.tablelist .edit{

	color: #2196F3;

}.tablelist .remove{

	color: #ff254d;

}

.tablelist .edit,.tablelist .remove{

	background-color: transparent;

	border: 1px solid transparent;

	cursor: pointer;

	margin: 5px;

}

.tablelist tr:nth-child(odd){

	background-color: #FFFFFF;

}

.tablelist tr:nth-child(even){

	background-color:S #F8F8F8;

}

.tablelist tr:hover{

	background-color: #467FE6;

}

.page{

	width: 100%;

	border-bottom: 1px solid e0e0e0;

	border-right: 1px solid e0e0e0;

	border-top: 1px solid e0e0e0;

	background-color: white;

	border-collapse: collapse;

	height: 35px;

	padding-left:20px ;

}

.page button{

	margin-right: 10px;

	background-color: #467fe6;

	color: white;

	border:1px solid #e0e0e0;

	padding: 3px 5px;

	font-size: 12px;

	border-radius: 5px;

	cursor: pointer;

}

.page button:hover{

	background-color: #2196F3;

}

.page-no{

	width: 40px;

	border-radius: 4px;

	border: 1px solid #E1E1E1;

}

.add{

	position: absolute;

	border:1px solid #e0e0e0;

	background-color: #FFFFFF;

	bottom: 0px;

	top: 10px;

	right: 0px;

	left: 0px;

}

.tableadd{

	width: 100%;

	margin: auto;

	margin-top: 20px;

}

.tableadd td{

	height: 35px;

	padding-left: 2px;

	color: #666666;

}

.tableadd td input{

	height: 25px;

	border: 1px solid #E0E0E0 ;

	border-radius: 4px;

}

.tableadd td button{

	margin-right: 10px;

	background-color: #467fe6;

	color: white;

	border:1px solid #e0e0e0;

	padding: 3px 5px;

	font-size: 16px;

	border-radius: 5px;

	cursor: pointer;

}

列表页面（html+css+js）的更多相关文章

对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...
页面(html,css,js)上传到服务器后乱码
http://blog.csdn.net/u011606714/article/details/44649159 将文件使用记事本保存成ANSI格式或者UTF格式(根据需要)即可. 设置格式: htm ...
前端小白页面开发注意事项及小工具（html\css\js）
技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...
MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
HTML+CSS+JS设计注册页面
HTML实战--设计一个个人信息填写界面应用的技术:HTML+CSS+JS CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用效果图: 代码: <!DOCTYPE html&g ...
Sublime Text 插件之HTML-CSS-JS Prettify—格式化HTML CSS JS与显示函数列表
插件名称:HTML-CSS-JS Prettify 安装步骤: 1.ctrl + shift + p 打开控制台2.输入install package,选择install package(如果已经安装 ...
3. web前端开发分享-css,js提高篇
一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative[ ...
HTML+CSS+JS简介
1.HTML与 CSS 1 1.1 HTML 1 1.2 HTML5 2 1.2.1 HTML5的特性 3 1.3 CSS 4 2.JavaScript 6 2.1特性 7 2.2编程 8 3.Sp ...

随机推荐

ubuntu web服务器配置
1.安装Apachesudo apt-get install apache2 查看状态: service apache2 status/start/stop/restartWeb目录: /var/ww ...
【LeetCode】371. Sum of Two Integers 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法位运算日期题目地址:https://leetco ...
【剑指Offer】栈的压入、弹出队列解题报告（Python）
[剑指Offer]栈的压入.弹出队列解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews ...
【剑指Offer】二叉搜索树的第k个结点解题报告（Python）
[剑指Offer]二叉搜索树的第k个结点解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-intervie ...
【LeetCode】473. Matchsticks to Square 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法回溯法日期题目地址:https://leetco ...
Codeforces Gym-100985C： MaratonIME plays Nim（交互题&博弈）
C. MaratonIME plays Nim time limit per test : 2.0 smemory limit per test : 64 MBinputstandard inputo ...
Deepin20系统安装Nvidia驱动
Deepin20系统安装Nvidia驱动系统设备配置信息如下: 电脑型号:华硕天选air[ASUS-FX516P] 显卡型号:RTX 3070 移动版独显处理器型号: 11th Gen Intel ...
docker学习：docker安装
Centos7 安装docker 下载安装 yum install docker-ce 启动docker systemctl start docker 创建并编写镜像加速文件 vim /etc/doc ...
啥是Gossip协议？
你好呀,我是歪歪. 元旦的时候我看到一个特别离谱的谣言啊,具体是什么内容我就不说了,我怕脏了大家的眼睛. 但是,我看到一个群里传的那叫一个绘声绘色,大家讨论的风生水起的,仿佛大家就在现场似的. 这事吧 ...
通过 v-once 创建低开销的静态组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...

列表页面（html+css+js）

列表页面（html+css+js）的更多相关文章

随机推荐

热门专题