项目及人员管理系统-修改员工信息列表展示

最新推荐文章于 2024-06-25 16:24:51 发布
最新推荐文章于 2024-06-25 16:24:51 发布
阅读量5.3k 收藏 8
点赞数 3
分类专栏： 我的项目 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xionghui2007/article/details/55004173
版权

尝试通过更加绚丽的图形化展示方式来设计列表界面。

1、2D旋转



代码：

<!DOCTYPE HTML>
<html>


<head>
<meta charset="utf-8">
<title>人员信息图形化展示</title>
<script>
</script>
<style type="text/css">
#content{
width: auto;
height: auto;
}
/*组合区域*/

.box {
width: 250px;
height: 250px;
margin: 10px auto;
position: relative;
/*overflow: hidden;*/
/*border: 1px solid black;*/
transform-style: preserve-3d;
animation: rotateZ360 50s ease-in-out infinite;
}
/*组合区域1定位*/
.box:first-child {
position: absolute;
left: 450px;
top: 250px;
}
/*组合区域2定位*/
.box:nth-child(2) {
position: absolute;
left: 200px;
top: 250px;
}
/*组合区域3定位*/
.box:nth-child(3) {
position: absolute;
left: 700px;
top: 250px;
}
/*组合区域4定位*/
.box:nth-child(4) {
position: absolute;
left: 200px;
top: 0px;
}
/*组合区域5定位*/
.box:nth-child(5) {
position: absolute;
left: 200px;
top:500px;
}
/*组合区域6定位*/
.box:nth-child(6) {
position: absolute;
left: 700px;
top: 0px;
}
/*组合区域7定位*/
.box:nth-child(7) {
position: absolute;
left: 700px;
top: 500px;
}

/*想要让这个相册动起来，加一个动画就好了*/

@keyframes rotateZ360 {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
/*标签*/

.tag {
width: 60px;
height: 30px;
font-size: 16px;
color: blue;
line-height: 30px;
text-align: center;
border: 1px solid red;
position: absolute;
left: 95px;
top: 110px;
}
/* tag的父元素的1个子元素 ，旋转40度角度*/

.tag:first-child {
transform: rotateZ(180deg) translateY(100px);
}
/* tag的父元素的2个子元素 */

.tag:nth-child(2) {
transform: rotateZ(140deg) translateY(100px);
}
/* tag的父元素的3个子元素 */

.tag:nth-child(3) {
transform: rotateZ(100deg) translateY(100px);
}
/* tag的父元素的4个子元素 */

.tag:nth-child(4) {
transform: rotateZ(60deg) translateY(100px);
}
/* tag的父元素的5个子元素 */

.tag:nth-child(5) {
transform: rotateZ(20deg) translateY(100px);
}
/* tag的父元素的6个子元素 */

.tag:nth-child(6) {
transform: rotateZ(-20deg) translateY(100px);
}
/* tag的父元素的7个子元素 */

.tag:nth-child(7) {
transform: rotateZ(-60deg) translateY(100px);
}
/* tag的父元素的8个子元素 */

.tag:nth-child(8) {
transform: rotateZ(-100deg) translateY(100px);
}
/* tag的父元素的9个子元素 */

.tag:nth-child(9) {
transform: rotateZ(-140deg) translateY(100px);
}
/*中心角色的圆形*/

#center {
width: 100px;
height: 100px;
border: 1px solid blue;
border-radius: 50%;
position: absolute;
left: 50%;
/*盒子左上角点距离左边框50%*/
top: 50%;
/*盒子左上角点距离上边框50%*/
transform: translate(-50%, -50%);
cursor: pointer;
display: table;
/*按照表格显示*/
}
/*中心角色的文本信息*/
#centering {
text-align: center;
/*文本居中显示*/
display: table-cell;
/*按照表格内容显示*/
vertical-align: middle;
/*垂直显示*/
}
</style>
</head>


<body>
<div id="content">
<div class="box">
<div class="tag">已转正</div>
<div class="tag">男性</div>
<div class="tag">28岁</div>
<div class="tag">本科</div>
<div class="tag">5年</div>
<div class="tag">3年</div>
<div class="tag">2年</div>
<div class="tag">深圳</div>
<div class="tag">优秀</div>
<div id="center">
<div id="centering">张三<br>组长</div>
</div>
</div>


<div class="box">
<div class="tag">已转正</div>
<div class="tag">男性</div>
<div class="tag">26岁</div>
<div class="tag">本科</div>
<div class="tag">3年</div>
<div class="tag">3年</div>
<div class="tag">2年</div>
<div class="tag">南昌</div>
<div class="tag">良好</div>
<div id="center">
<div id="centering">李四<br>小组长</div>
</div>
</div>

<div class="box">
<div class="tag">已转正</div>
<div class="tag">男性</div>
<div class="tag">26岁</div>
<div class="tag">本科</div>
<div class="tag">3年</div>
<div class="tag">3年</div>
<div class="tag">2年</div>
<div class="tag">南昌</div>
<div class="tag">良好</div>
<div id="center">
<div id="centering">李四<br>小组长</div>
</div>
</div>


<div class="box">
<div class="tag">已转正</div>
<div class="tag">女性</div>
<div class="tag">25岁</div>
<div class="tag">专科</div>
<div class="tag">2年</div>
<div class="tag">1年</div>
<div class="tag">1年</div>
<div class="tag">南京</div>
<div class="tag">良好</div>
<div id="center">
<div id="centering">王芳<br>组员</div>
</div>
</div>
<div class="box">
<div class="tag">已转正</div>
<div class="tag">女性</div>
<div class="tag">25岁</div>
<div class="tag">专科</div>
<div class="tag">2年</div>
<div class="tag">1年</div>
<div class="tag">1年</div>
<div class="tag">南京</div>
<div class="tag">良好</div>
<div id="center">
<div id="centering">王芳<br>组员</div>
</div>
</div>
<div class="box">
<div class="tag">已转正</div>
<div class="tag">女性</div>
<div class="tag">25岁</div>
<div class="tag">专科</div>
<div class="tag">2年</div>
<div class="tag">1年</div>
<div class="tag">1年</div>
<div class="tag">南京</div>
<div class="tag">良好</div>
<div id="center">
<div id="centering">王芳<br>组员</div>
</div>
</div>
<div class="box">
<div class="tag">已转正</div>
<div class="tag">女性</div>
<div class="tag">25岁</div>
<div class="tag">专科</div>
<div class="tag">2年</div>
<div class="tag">1年</div>
<div class="tag">1年</div>
<div class="tag">南京</div>
<div class="tag">良好</div>
<div id="center">
<div id="centering">王芳<br>组员</div>
</div>
</div>
</div>
</body>


</html>


3、3D旋转



使用3D旋转来展示员工信息列表页面：




代码：

<!DOCTYPE HTML>
<html>


<head>
<meta charset="utf-8">
<title>员工信息列表</title>
<script type="text/javascript">
</script>


<style type="text/css">
a {
text-decoration: none;
}

header {
width: auto;
height: 80px;
position: relative;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid black;
margin-bottom: 10px;
}

header ul {
width: 900px;
height: 80px;
margin: 0 auto;
list-style: none;
}

header ul li {
width: 160px;
height: 70px;
line-height: 70px;
font-size: 24px;
color: blue;
text-align: center;
margin: 0 10px 0 0;
float: left;
border: 1px solid black;
border-radius: 50%;
box-shadow: 5px 10px 10px #333;
/*水平阴影 垂直阴影 羽化值 阴影的大小 阴影的颜色 阴影的类别：内和外阴影，默认是外阴影*/
transform: rotateX(15deg) rotateY(15deg) rotateZ(-15deg);
}

#content {
position: relative;
width: auto;
height: auto;
top: 0;
left: 0;
background-color: #D7FFEB;
padding: 10px 0 10px;
}


/*舞台*/

.showBox {
margin: 5px auto;
perspective: 300px;
width: 300px;background-color: #D7FFEB;
}
/*组合区域1定位*/

.showBox:first-child {
position: absolute;
left: 500px;
top: 0px;
}
/*组合区域2定位*/

.showBox:nth-child(2) {
position: absolute;
left: 200px;
top: 100px;
}
/*组合区域3定位*/

.showBox:nth-child(3) {
position: absolute;
left: 800px;
top: 100px;
}
/*组合区域4定位*/

.showBox:nth-child(4) {
position: absolute;
left: 50px;
top: 250px;
}
/*组合区域5定位*/

.showBox:nth-child(5) {
position: absolute;
left: 350px;
top: 250px;
}
/*组合区域6定位*/

.showBox:nth-child(6) {
position: absolute;
left: 650px;
top: 250px;
}
/*组合区域7定位*/

.showBox:nth-child(7) {
position: absolute;
left: 950px;
top: 250px;
}
/*组合区域*/

.box {
width: 250px;
height: 150px;
margin: 10px auto;
position: relative;
/*border: 1px solid black;*/
transform-style: preserve-3d;
animation: rotateY360 60s ease infinite;
}
/*想要让这个相册动起来，加一个动画就好了*/

@keyframes rotateY360 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
/*标签*/

.tag {
width: 60px;
height: 40px;
font-size: 12px;
text-align: center;
border: 1px solid red;
position: absolute;
left: 95px;
top: 80px;
}

.tag span {
font-size: 14px;
color: blue;
line-height: 20px;
}
/* tag的父元素的1个子元素 ，旋转40度角度*/

.tag:first-child {
transform: rotateY(0deg) translateZ(100px);
}
/* tag的父元素的2个子元素 */

.tag:nth-child(2) {
transform: rotateY(40deg) translateZ(100px);
}
/* tag的父元素的3个子元素 */

.tag:nth-child(3) {
transform: rotateY(80deg) translateZ(100px);
}
/* tag的父元素的4个子元素 */

.tag:nth-child(4) {
transform: rotateY(120deg) translateZ(100px);
}
/* tag的父元素的5个子元素 */

.tag:nth-child(5) {
transform: rotateY(160deg) translateZ(100px);
}
/* tag的父元素的6个子元素 */

.tag:nth-child(6) {
transform: rotateY(200deg) translateZ(100px);
}
/* tag的父元素的7个子元素 */

.tag:nth-child(7) {
transform: rotateY(240deg) translateZ(100px);
}
/* tag的父元素的8个子元素 */

.tag:nth-child(8) {
transform: rotateY(280deg) translateZ(100px);
}
/* tag的父元素的9个子元素 */

.tag:nth-child(9) {
transform: rotateY(320deg) translateZ(100px);
}
/*中心角色的圆形*/

.center {
width: 80px;
height: 80px;
border: 1px solid blue;
border-radius: 50%;
position: absolute;
left: 50%;
/*盒子左上角点距离左边框50%*/
top: 10%;
/*盒子左上角点距离上边框50%*/
transform: translate(-50%, -10%);
cursor: pointer;
display: table;
/*按照表格显示*/
}
/*中心角色的文本信息*/

.centering {
font-size: 24px;
color: blue;
text-align: center;
/*文本居中显示*/
display: table-cell;
/*按照表格内容显示*/
vertical-align: middle;
/*垂直显示*/
}
</style>
</head>


<body>
<header>
<ul>
<li>
<a href="新增项目.html">新增项目</a>
</li>
<li>
<a href="项目分配表.html">项目分配表</a>
</li>
<li>
<a href="人员分配表.html">人员分配表</a>
</li>
<li>
<a href="员工信息列表.html">员工信息列表</a>
</li>
<li>
<a href="新增员工.html">新增员工</a>
</li>
</ul>
</header>
<div id="content">
<div class="showBox">
<div class="box">
<div class="tag"><span>性别</span><br>男性</div>
<div class="tag"><span>年龄</span><br>28岁</div>
<div class="tag"><span>学历</span><br>本科</div>
<div class="tag"><span>总年限</span><br>5年</div>
<div class="tag"><span>本行年限</span><br>3年</div>
<div class="tag"><span>入职年限</span><br>2年</div>
<div class="tag"><span>入职地址</span><br>深圳</div>
<div class="tag"><span>能力评估</span><br>优秀</div>
<div class="tag"><span>员工状态</span><br>已转正</div>
</div>
<div class="center">
<div class="centering"><span>组长</span><br>张三</div>
</div>
</div>


<div class="showBox">
<div class="box">
<div class="tag"><span>性别</span><br>男性</div>
<div class="tag"><span>年龄</span><br>27岁</div>
<div class="tag"><span>学历</span><br>本科</div>
<div class="tag"><span>总年限</span><br>4年</div>
<div class="tag"><span>本行年限</span><br>3年</div>
<div class="tag"><span>入职年限</span><br>1年</div>
<div class="tag"><span>入职地址</span><br>深圳</div>
<div class="tag"><span>能力评估</span><br>良好</div>
<div class="tag"><span>员工状态</span><br>已转正</div>
</div>
<div class="center">
<div class="centering"><span>小组长</span><br>李四</div>
</div>
</div>


<div class="showBox">
<div class="box">
<div class="tag"><span>性别</span><br>男性</div>
<div class="tag"><span>年龄</span><br>26岁</div>
<div class="tag"><span>学历</span><br>本科</div>
<div class="tag"><span>总年限</span><br>3年</div>
<div class="tag"><span>本行年限</span><br>2年</div>
<div class="tag"><span>入职年限</span><br>2年</div>
<div class="tag"><span>入职地址</span><br>南京</div>
<div class="tag"><span>能力评估</span><br>优秀</div>
<div class="tag"><span>员工状态</span><br>已转正</div>
</div>
<div class="center">
<div class="centering"><span>小组长</span><br>王二</div>
</div>
</div>


<div class="showBox">
<div class="box">
<div class="tag"><span>性别</span><br>男性</div>
<div class="tag"><span>年龄</span><br>26岁</div>
<div class="tag"><span>学历</span><br>本科</div>
<div class="tag"><span>总年限</span><br>4年</div>
<div class="tag"><span>本行年限</span><br>2年</div>
<div class="tag"><span>入职年限</span><br>1年</div>
<div class="tag"><span>入职地址</span><br>深圳</div>
<div class="tag"><span>能力评估</span><br>良好</div>
<div class="tag"><span>员工状态</span><br>已转正</div>
</div>
<div class="center">
<div class="centering"><span>组员</span><br>陈马</div>
</div>
</div>


<div class="showBox">
<div class="box">
<div class="tag"><span>性别</span><br>女性</div>
<div class="tag"><span>年龄</span><br>27岁</div>
<div class="tag"><span>学历</span><br>本科</div>
<div class="tag"><span>总年限</span><br>3年</div>
<div class="tag"><span>本行年限</span><br>2年</div>
<div class="tag"><span>入职年限</span><br>1年</div>
<div class="tag"><span>入职地址</span><br>南昌</div>
<div class="tag"><span>能力评估</span><br>优秀</div>
<div class="tag"><span>员工状态</span><br>已转正</div>
</div>
<div class="center">
<div class="centering"><span>组员</span><br>王小佳</div>
</div>
</div>


<div class="showBox">
<div class="box">
<div class="tag"><span>性别</span><br>女性</div>
<div class="tag"><span>年龄</span><br>23岁</div>
<div class="tag"><span>学历</span><br>本科</div>
<div class="tag"><span>总年限</span><br>2年</div>
<div class="tag"><span>本行年限</span><br>1年</div>
<div class="tag"><span>入职年限</span><br>1年</div>
<div class="tag"><span>入职地址</span><br>深圳</div>
<div class="tag"><span>能力评估</span><br>良好</div>
<div class="tag"><span>员工状态</span><br>已转正</div>
</div>
<div class="center">
<div class="centering"><span>组员</span><br>郑芳</div>
</div>
</div>


<div class="showBox">
<div class="box">
<div class="tag"><span>性别</span><br>男性</div>
<div class="tag"><span>年龄</span><br>25岁</div>
<div class="tag"><span>学历</span><br>专科</div>
<div class="tag"><span>总年限</span><br>3年</div>
<div class="tag"><span>本行年限</span><br>2年</div>
<div class="tag"><span>入职年限</span><br>1年</div>
<div class="tag"><span>入职地址</span><br>南京</div>
<div class="tag"><span>能力评估</span><br>一般</div>
<div class="tag"><span>员工状态</span><br>已转正</div>
</div>
<div class="center">
<div class="centering"><span>组员</span><br>李小二</div>
</div>
</div>
</div>
</body>


</html>




PandaCode辉
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个简单的员工信息增删改界面
07-31
要自己改一下数据库连接，超简单的界面
基于SpringMVC的Restful风格的增删改查--④更新员工信息
Ruanyz_china的专栏
08-18 3693
基本思想：点击某一个员工的更新链接，进入Spring的from表单，回显该员工数据 =》 submit后，交给handler做save处理 =》重定向至员工列表界面 注意的点：(1) 员工的lastName不可以被修改（需要使用modelattribute技术） (2) 需要将post请求转为PUT请求（需要借助HiddenHttpMethodFilter） 具体流程以及核心代码： (1) 链接
使用Vue3构建一个交互式个人信息展示页面
最新发布
ScriptEcho的博客
06-25 1020
开发这段代码的过程让我对 Vue.js 的状态管理和动态渲染有了更深入的了解。我还学会了如何使用 HTML 和 CSS 创建一个干净、现代的用户界面。未来，该个人信息卡片功能可以扩展和优化：**添加验证：**验证用户输入的个人信息，确保其格式正确。**实现错误处理：**处理服务器更新请求的错误，并向用户提供反馈。**使用响应式设计：**使卡片在不同屏幕尺寸上自适应。**整合第三方服务：**集成第三方服务，如 Gravatar，用于获取用户头像。更多组件：获取更多Echos本文由。
实现对员工信息的增删改查实例（全注解）
10-13
框架搭建：SpringMVC+Spring4.x+Hibernate4.x 开发工具：MyEclipse8.5+SqlServer2005+Tomcat7.0
PWA-项目详细信息页面功能
robinooo的博客
05-05 361
项目详细信息页面功能简介
员工信息管理系统后台HTML 模板
11-01
本模板适合用于管理系统，可以很好的实现靓丽页面【实例为员工信息管理系统，可以修改为其他的，用于借鉴哈】
企业员工信息管理系统-jsp+servlet+mysql
05-08
总结起来，"企业员工信息管理系统-jsp+servlet+mysql"是一个典型的Java Web入门项目，它涵盖了数据库设计、后端开发和前端展示等多个层面，对于初学者来说，这是一个很好的实践平台，能帮助他们理解和掌握Web开发的...
Java员工信息管理系统
05-29
总的来说，【Java员工信息管理系统】是一个涵盖了数据库操作、对象模型设计、数据处理和用户交互等多个方面的项目，展示了Java在桌面应用程序开发中的强大能力。通过学习和理解这个系统，开发者可以深入理解Java SE...
WPF人员管理系统界面
07-08
在人员管理系统中，DataGrid可能被用于展示员工列表，自定义列可以显示员工的不同信息，如姓名、部门、职位等。 Button控件是用户界面中的基本元素，通常用于触发某种操作。自定义Button可以改变其外观、添加特效或...
C++公司人员信息管理系统-课程设计报告.pdf
11-02
《C++公司人员信息管理...这个C++公司人员信息管理系统，不仅锻炼了开发者的编程技能，还展示了面向对象设计思想在实际项目中的应用。通过这个系统，可以有效管理公司的员工信息，提高工作效率，并为决策提供数据支持。
C++公司人员信息管理系统-课程设计报告.docx
11-02
这篇文档主要描述了一个基于C++的公司人员信息管理系统的设计和实现过程，适用于互联网行业的人员管理。该系统涵盖了从需求分析到系统设计，再到详细实现和测试的全过程，旨在提高企业对员工信息的管理效率。 1 **...
C#写的员工管理信息系统，有C#完整项目+源代码
04-06
C#写的员工管理信息系统，有C#完整项目+源代码。
JavaWeb项目系列（一）：员工管理系统（SSH框架）
07-25
这是一个员工管理系统，应用的是SSH框架Spring+SpringMVC+Hibernate的项目，功能介绍： * - 增删改查员工。 * - 增删改查页面显示当前用户信息（session里获取） * - 点击button，倒序，正序显示员工列表 * - 在list页面模糊查询（按姓名查询） * - 分页功能 * - 部分前端代码 （2）运用的知识： spring，springmvc，hibernate，mysql * - 基本数据库知识MySQL * - Spring+SpringMVC+Hibernate * - （重点）框架的MVC设计模式的应用 * - （重点）分页查询 * - 部分前端代码（css的应用）
Java员工管理系统
05-09
这是个员工管理系统，可以对员工进行登陆管理，考勤管理，工资管理等。
“员工信息管理系统”项目开发方案
10-20
员工信息管理系统项目概述 1）开发背景 随着市场经济的快速发展和信息化水平的不断提高，如何利用先进的管理手段，提高企业员工信息管理的水平，是当今社会所面临的一个课题。面对信息时代的挑战，利用高科技手段来提高企业员工信息管理无疑是一条行之有效的途径。信息与科技在企业管理与现代化建设中显现出越来越重要的地位，员工管理方面的信息化与科学化，已成为现代化生活水平步入高台阶的重要标志。 .......
JQuery 操作表格和JqGrid了解
热门推荐
mike_caoyong的专栏
02-26 1万+
jquery 表格(checkbox) http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 .even{ background:#CCC } .odd{ background:#999 } .selected{ bac
excel制作录入和查询系统_叮咚！您有一份Excel人员信息查询系统，请您查收~
weixin_39891694的博客
11-24 1874
叮咚！您有一份Excel人员信息查询系统，请您查收~打开中……123open！哦豁，瞅着还不错哦~下面介绍如何制作一个简易的人员信息查询系统。数据源准备第一步当然是准备数据源，数据源一般为员工入职信息 ，包括姓名、手机号、身份证号、家庭住址、照片信息等等。如下图所示，第一个插页《人员基本信息》包含了所有员工的基本信息，第一列为员工姓名，方便后期匹配基本信息。PS：明星信息都是随机写入的，真爱粉勿喷...
Jquery动态表格
aKuang_JH的博客
09-26 1442
实现目的： 1添加新纪录弹出DIV表单，要求用户输入相应的字段信息。点击保存自动关闭后会在表格最后追加一行刚才的信息。 2.点击编辑时，会弹出一个div表单，要求用户对现有记录进行修改操作。关闭后表格更新信息。 3.点击删除操作会弹出警告，问用户是否真的删除，确定后记录才删除（加批量删除） 初始效果图： 初始 图1-1 添加新纪录 图1-2 编辑信
CSS+html+js人员信息表
liaojsgtcg的博客
10-05 523
给查询，修改，删除，加入具体操作 查看 function view(currentObj) { var stuNo = currentObj.parentNode.parentNode.children[1].innerHTML; var name = currentObj.parentNode.parentNode.children[2].innerHTML; var major = currentObj.parentNode.parentNode.children[3].innerHTML; aler
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值