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

随机推荐

c++之面试题(1)
题目有十瓶药,每瓶里都装有100片药,其中有八瓶里的药每片重10克,另有两瓶里的药每片重9克.用一个蛮精确的小秤,只称一次,如何找出份量较轻的那两个药瓶? 解法 1.分别给10个药瓶按照斐波那契数列 ...
nim_duilib(14)之xml配置半透明窗体控件不透明
before starting note 截至目前,我只能用xml写一些简单的布局和设置控件属性,循序渐进吧. 正在学习nim_duilib的xml的一些属性. xml配置半透明 GTAV中就有很多控 ...
java源码——计算大于一个数的最小素数
根据输入数字,计算大于一个数的最小素数. 话不多说,直接贴码. package com.fuxuemingzhu.countprime.main; import java.util.Scanner; ...
【LeetCode】480. 滑动窗口中位数 Sliding Window Median（C++）
作者: 负雪明烛 id: fuxuemingzhu 公众号: 每日算法题本文关键词:LeetCode,力扣,算法,算法题,滑动窗口,中位数,multiset,刷题群目录题目描述题目大意解题方 ...
codeforces 624C Graph and String
C. Graph and String time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
Frp内网穿透搭建，家庭主机对外提供接口，支持ssh访问
Frp内网穿透搭建,家庭主机对外提供接口,支持ssh访问 1.使用场景: 需求1.家中服务器 ubuntu 主机,跑接口服务,需要对外暴漏, 需求2.同时需要在外网ssh远程关键词: frp内网 ...
[数据结果]C语言基础指令汇编
数据结构 C语言核心操作集合 (1)预定义常量和类型 //函数结果状态代码 #define TRUE 1 #define FALSE 0 #define OK 1 #define ERROR 0 #d ...
Eclipse 常用快捷键大全
15 个 Eclipse 常用开发快捷键使用技巧 1.alt+? 或 alt+/:自动补全代码或者提示代码 2.ctrl+o:快速outline视图 3.ctrl+shift+r:打开资源列表 4.c ...
使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片
查看本章节查看作业目录需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片实现思路: 在 ...
Java+HTML5 试题云南农业职业技术学院 - 互联网技术学院
摸底测试 100题_共100.00分_及格60.00分第1题 [单选题][1.00分][概念理解] 执行完下面程序片段后, ( )的结论是正确的. int a, b, c; a = 1; b = ...

列表页面（html+css+js）

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

随机推荐

热门专题