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. VS2017激活key

    密钥 KBJFW-NXHK6-W4WJM-CRMQB-G3CDH

  2. 【LeetCode】645. Set Mismatch 解题报告(Python)

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

  3. 【剑指Offer】删除链表中重复的结点 解题报告(Python)

    [剑指Offer]删除链表中重复的结点 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interview ...

  4. 重重封锁,让你一条数据都拿不到《死磕MySQL系列 十三》

    在开发中有遇到很简单的SQL却执行的非常慢,甚至只查询一行数据. 咔咔遇到的只有两种情况,一种是MySQL服务器CPU占用率很高,所有的SQL都执行的很慢直到超时,程序也直接502,另一种情况是行锁造 ...

  5. mysql多条件过滤查询之mysq高级查询

    一.什么是高级查询: ① 多条件的过滤查询 简单说,即拼接sql语句,在sql查询语句之后使用: where 条件1 and/or 条件2 and/or 条件3 - ② 分页查询 二.多条件过滤查询: ...

  6. MMD

    目录 概 主要内容 定义 MMD for kernel function classes 一个无偏统计量 MMD test Borgwardt K., Gretton A., Rasch M., Kr ...

  7. 决策树之PEP(悲观剪枝)

    引用这2篇文章 https://blog.csdn.net/taoqick/article/details/72818496 https://www.open-open.com/lib/view/op ...

  8. HTML网页设计基础笔记 • 【第5章 常用的样式属性】

    全部章节   >>>> 本章目录 5.1 字体及文本属性 5.1.1 字体属性 5.1.2 文本属性 5.2 边距和填充 5.2.1 边距 5.2.2 填充 5.3 边框属性 ...

  9. Java面向对象笔记 • 【第3章 继承与多态】

    全部章节   >>>> 本章目录 3.1 包 3.1.1 自定义包 3.1.2 包的导入 3.1.3 包的访问权限 3.1.4 实践练习 3.2 继承 3.2.1 继承概述 3 ...

  10. Laravel Redis分布式锁的使用

    创建锁 use Illuminate\Support\Facades\Cache; $lock = Cache::lock('foo', 10); if ($lock->get()) { // ...