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）的更多相关文章

  1. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

  2. 页面(html,css,js)上传到服务器后乱码

    http://blog.csdn.net/u011606714/article/details/44649159 将文件使用记事本保存成ANSI格式或者UTF格式(根据需要)即可. 设置格式: htm ...

  3. 前端小白页面开发注意事项及小工具（html\css\js）

    技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...

  4. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  5. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  6. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  7. HTML+CSS+JS设计注册页面

    HTML实战--设计一个个人信息填写界面 应用的技术:HTML+CSS+JS CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用 效果图: 代码: <!DOCTYPE html&g ...

  8. Sublime Text 插件之HTML-CSS-JS Prettify—格式化HTML CSS JS与显示函数列表

    插件名称:HTML-CSS-JS Prettify 安装步骤: 1.ctrl + shift + p 打开控制台2.输入install package,选择install package(如果已经安装 ...

  9. 3. web前端开发分享-css,js提高篇

    一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative[ ...

  10. 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 ...

随机推荐

  1. 【LeetCode】1099. Two Sum Less Than K 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力求解 日期 题目地址:https://leetco ...

  2. 【LeetCode】950. Reveal Cards In Increasing Order 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 模拟 日期 题目地址:https://leetcod ...

  3. 1105 第K大的数

    1105 第K大的数 基准时间限制:1 秒 空间限制:131072 KB  数组A和数组B,里面都有n个整数.数组C共有n^2个整数,分别是A[0] * B[0],A[0] * B[1] ...... ...

  4. 1030 - Discovering Gold

    1030 - Discovering Gold    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 M ...

  5. 如何在 Go 中将 []byte 转换为 io.Reader？

    原文链接: 如何在 Go 中将 []byte 转换为 io.Reader? 在 stackoverflow 上看到一个问题,题主进行了一个网络请求,接口返回的是 []byte.如果想要将其转换成 io ...

  6. TensorFlow.NET机器学习入门【6】采用神经网络处理Fashion-MNIST

    "如果一个算法在MNIST上不work,那么它就根本没法用:而如果它在MNIST上work,它在其他数据上也可能不work". -- 马克吐温 上一篇文章我们实现了一个MNIST手 ...

  7. Chapter 9 Measurement Bias

    目录 9.1 Measurement Error The structure of measurement error 9.3 Mismeasured confounders 9.4 Intentio ...

  8. Vue-cli3.0配置全局less

    第一种配置方式(推荐) npm install style-resources-loader vue-cli-plugin-style-resources-loader less-loader les ...

  9. HTML网页设计基础笔记 • 【第2章 排列页面内容】

    全部章节   >>>> 本章目录 2.1 音频标签和视频标签 2.1.1 音频标签 2.1.2 视频标签 2.2 列表.div 以及 span 标签 2.2.1 列表标签 2. ...

  10. ActiveMQ基础教程（一）：认识ActiveMQ

    ActiveMQ是Apache软件基金会所研发开源的消息中间件,为应用程序提供高效的.可扩展的.稳定的和安全的企业级消息通信. 现在的消息队列有不少,RabbitMQ.Kafka.RocketMQ,Z ...