列表页面（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 ...

随机推荐

VS2017激活key
密钥 KBJFW-NXHK6-W4WJM-CRMQB-G3CDH
【LeetCode】645. Set Mismatch 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法 Hash方法直接计算日期题目地址: https ...
【剑指Offer】删除链表中重复的结点解题报告（Python）
[剑指Offer]删除链表中重复的结点解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interview ...
重重封锁，让你一条数据都拿不到《死磕MySQL系列十三》
在开发中有遇到很简单的SQL却执行的非常慢,甚至只查询一行数据. 咔咔遇到的只有两种情况,一种是MySQL服务器CPU占用率很高,所有的SQL都执行的很慢直到超时,程序也直接502,另一种情况是行锁造 ...
mysql多条件过滤查询之mysq高级查询
一.什么是高级查询: ① 多条件的过滤查询简单说,即拼接sql语句,在sql查询语句之后使用: where 条件1 and/or 条件2 and/or 条件3 - ② 分页查询二.多条件过滤查询: ...
MMD
目录概主要内容定义 MMD for kernel function classes 一个无偏统计量 MMD test Borgwardt K., Gretton A., Rasch M., Kr ...
决策树之PEP(悲观剪枝)
引用这2篇文章 https://blog.csdn.net/taoqick/article/details/72818496 https://www.open-open.com/lib/view/op ...
HTML网页设计基础笔记 • 【第5章常用的样式属性】
全部章节 >>>> 本章目录 5.1 字体及文本属性 5.1.1 字体属性 5.1.2 文本属性 5.2 边距和填充 5.2.1 边距 5.2.2 填充 5.3 边框属性 ...
Java面向对象笔记 • 【第3章继承与多态】
全部章节 >>>> 本章目录 3.1 包 3.1.1 自定义包 3.1.2 包的导入 3.1.3 包的访问权限 3.1.4 实践练习 3.2 继承 3.2.1 继承概述 3 ...
Laravel Redis分布式锁的使用
创建锁 use Illuminate\Support\Facades\Cache; $lock = Cache::lock('foo', 10); if ($lock->get()) { // ...

列表页面（html+css+js）

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

随机推荐

热门专题