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

随机推荐

Mac下好用的“visio”之 OmniGraffle Pro
!!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的转载!! 作者:mohist 1.官方网站:https://www.omnigroup.com/omnigraffle/ ...
【LeetCode】801. Minimum Swaps To Make Sequences Increasing 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录题目描述题目大意解题方法动态规划参考资料日期题目地址:https:// ...
datatables scrollX设置水平滚动无效问题
如下:设置了水平滚动之后, 页面并没有滚动效果$(document).ready(function() { $('#example').dataTable( { "scrollX" ...
简单的 for 循环也会踩的坑
前言最近实现某个业务时,需要读取数据然后再异步处理:在 Go 中实现起来自然就比较简单,伪代码如下: list := []*Demo{{"a"}, {"b"} ...
『学了就忘』vim编辑器基础 — 97、vim使用技巧
目录 1.在vim中导入其他文件内容或命令结果 (1)导入其他文件内容 (2)在vim中执行系统命令 (3)导入命令结果 2.设定快捷键 3.字符替换 4.多文件打开 vim使用技巧,就是vim编辑器 ...
Spring中的@Bean注解
@Bean 基础概念 @Bean:Spring的@Bean注解用于告诉方法,产生一个Bean对象,然后这个Bean对象交给Spring管理.产生这个Bean对象的方法Spring只会调用一次,随后这个 ...
ProtoBuf3语法指南(Protocol Buffers)_上
0.说明 ProtoBuf3语法指南, 又称为proto3, 是谷歌的Protocol Buffers第3个版本. 本文基于官方英文版本翻译, 加上了自己的理解少量修改, 一共分为上下两部分. 1.序 ...
2.HTML5基本标签
一.标题标签 h1-->h6 h1最大 h6最小 <body> <h1>一级标题</h1> <h2>二级标题</h2> ...
分享一款开源堡垒机-jumpserver
本文主文章地址为:https://blog.csdn.net/KH_FC JumpServer是由FIT2CLOUD(飞致远)公司旗下一款开源的堡垒机,这款也是全球首款开源的堡垒机,使用 GNU GP ...
初识python 之 cx_oracle
使用cx_oracle操作oracle数据库 oracleClient 包 #!/user/bin env python # author:Simple-Sir # create_time: 2021 ...

列表页面（html+css+js）

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

随机推荐

热门专题