html 索引界面

最新推荐文章于 2024-04-28 15:36:04 发布
最新推荐文章于 2024-04-28 15:36:04 发布
阅读量2.7k 收藏 10
点赞数 3
分类专栏： HTML 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coolsunxu/article/details/90112635
版权

原来大家这么喜欢网页设计呀，这个也是我模仿的，分享一下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}

#head {
	height: 120px;
	width: 100;
	background-color: #66CCCC;
	text-align: center;
	position: relative;
}
.list .center p {
	font-family: "宋体";
	font-size: 12px;
	font-weight: bold;
	color: purple;
}
#foot {
	width: 100%;
	height: 146px;
	background-color: #CC9933;
	position: relative;
}

.title {
	font-family: "宋体";
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
	font-size: 36px;
	height: 40px;
	width: 30%;
}

.leftsidebar_box {
	width: 12%;
	height: 100%;
	background-color: #f2f2f2;
	float: left;
	margin-right: 2%;
	position: absolute;
}

.leftsidebar_box dt {
	background-color: #f9f9f9;
	color: #333;
	font-size: 14px;
	position: relative;
	line-height: 44px;
	cursor: pointer;
	border-bottom: 1px solid #dedede;
	border-right: 1px solid #dedede;
	padding-left: 40px;
}

.leftsidebar_box dd {
	display: none;
	position: relative;
	background-color: white;
	padding-left: 65px;
	border-bottom: 1px solid #dedede;
	border-right: 1px solid #dedede;
}

.leftsidebar_box dd a {
	color: #333;
	line-height: 42px;
	width: 100%;
	height: 100%;
	display: inline-block;
	cursor: pointer;
	text-decoration:none;
}

.leftsidebar_box dt img.icon1 {
	display: none;
	position: absolute;
	top: 10px;
	left: 10px;
}

.leftsidebar_box dt img.icon2 {
	position: absolute;
	top: 10px;
	left: 10px;
}

.leftsidebar_box dt img.icon3 {
	display: none;
	position: absolute;
	top: 20px;
	right: 12px;
}

.leftsidebar_box dt img.icon4 {
	position: absolute;
	top: 20px;
	right: 12px;
}

.leftsidebar_box dd img.icon5 {
	display: none;
	position: absolute;
	top: 0px;
	right: 0px;
}

.leftsidebar_box dd img.coin11 {
	display: none;
	position: absolute;
	top: 0px;
	left: 40px;
}

.leftsidebar_box dd img.coin22 {
	position: absolute;
	top: 0px;
	left: 40px;
}

.leftsidebar_box dl dd:last-child {
	padding-bottom: 10px;
}

.leftsidebar_box .line {
	background-color: #f9f9f9;
	color: #333;
	font-size: 14px;
	position: relative;
	line-height: 44px;
	cursor: pointer;
	border-bottom: 1px solid #dedede;
	border-right: 1px solid #dedede;
	padding-left: 40px
}

.leftsidebar_box .line img {
	position: absolute;
	top: 10px;
	left: 10px;
}

.leftsidebar_box .menu_chioce1 {
	color: #106ea9;
}

.leftsidebar_box .menu_chioce2 {
	color: #106ea9;
}

.copyright {
	font-family: "宋体";
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
	height: 60px;
	width: 40%;
	text-align:center;
}
	

#foot .copyright .img {
	width: 100%;
	height: 24px;
	position: relative;
}
.copyright .img .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-image: url(img/login/email_address.png);
	background-repeat: no-repeat;
	margin-right: 5px;
}
	
.copyright .img .icon1 {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-image: url(img/login/address.png);
	background-repeat: no-repeat;
	margin-right: 5px;
}
.copyright .img .icon2 {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-image: url(img/login/phone.png);
	background-repeat: no-repeat;
	margin-right: 5px;
}
#foot .copyright p {
	height: 24px;
	width: 100%;
}
#wrap {
	height: 719px;
	width: 100%;
	background-image: url(img/background/background.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}
.right {
	float: right;
	height: 100%;
	width: 88%;
	position: relative;
}
.project {
	height: 200px;
	width: 88%;
	position: relative;
	float: left;
	margin-left: 60px;
	margin-top: 40px;
}
.list {
	height: 100px;
	width: 10%;
	background-color: #FFFFFF;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 20px;
	float: left;
	border-radius : 20px;
	position: relative;
}
	
.list:hover {
	background-color: #CCFF99;
}
	
.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('img/index_right/Artificial_intelligence1.png','img/index_right/Artificial_intelligence_car1.png','img/index_right/Artificial_intelligence_robot1.png','img/index_right/autopilot1.png','img/index_right/Intelligent_analysis1.png','img/index_right/Intelligent_cloud1.png','img/index_right/Intelligent_data1.png','img/index_right/Intelligent_robot_arm1.png','img/index_right/Intelligent_rocker_robot1.png','img/index_right/Intelligent_search1.png','img/index_right/Intelligent_speakers1.png','img/index_right/Intelligent_voice1.png','img/index_right/Rocket_robot1.png','img/index_right/Smart_chip1.png','img/index_right/Smart_devices1.png','img/index_right/Smart_game1.png','img/index_right/Smart_home1.png','img/index_right/Smart_setting1.png','img/index_right/The_robot1.png','img/index_right/Visual_intelligence1.png','img/index_right/unmanned1.png')">
<div class="header" id="head">
  <div class="title">企业人事管理系统</div>
	
</div>
	
<div id="wrap">
	<div class="leftsidebar_box">
			<a href="index.html" target="_self">
			<div class="line">
					<img src="img/index_left/coin01.png" /> 首页
			</div></a>
			<dl class="system_log">
				<dt>
					<img class="icon1" src="img/index_left/coin03.png" /><img class="icon2"
						src="img/index_left/coin04.png" /> 查询管理<img class="icon3"
						src="img/index_left/coin19.png" /><img class="icon4"
						src="img/index_left/coin20.png" />
				</dt>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" /><a class="cks" href="basic_Information.jsp"
						target="_blank">基本信息</a><img class="icon5" src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" /><a class="cks" href="resignation_record.jsp"
						target="_blank">辞职记录</a><img class="icon5" src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" /><a class="cks" href="transfer_record.jsp"
						target="_blank">调职记录</a><img class="icon5" src="img/index_left/coin21.png" />
				</dd>
			</dl>
			<dl class="system_log">
				<dt>
					<img class="icon1" src="img/index_left/coin01.png" /><img class="icon2"
						src="img/index_left/coin02.png" /> 学历管理<img class="icon3"
						src="img/index_left/coin19.png" /><img class="icon4"
						src="img/index_left/coin20.png" />
				</dt>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" /><a class="cks" href="education_record.jsp"
						target="_blank">员工学历</a><img class="icon5" src="img/index_left/coin21.png" />
				</dd>
			</dl>
			<dl class="system_log">
				<dt>
					<img class="icon1" src="img/index_left/coin07.png" /><img class="icon2"
						src="img/index_left/coin08.png" /> 通讯管理<img class="icon3"
						src="img/index_left/coin19.png" /><img class="icon4"
						src="img/index_left/coin20.png" />
				</dt>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" /><a href="communication_record.jsp" target="_blank"
						class="cks">通讯信息</a><img class="icon5" src="img/index_left/coin21.png" />
				</dd>
			</dl>
			<dl class="system_log">
				<dt>
					<img class="icon1" src="img/index_left/coin10.png" /><img class="icon2"
						src="img/index_left/coin09.png" /> 财务管理<img class="icon3"
						src="img/index_left/coin19.png" /><img class="icon4"
						src="img/index_left/coin20.png" />
				</dt>
				<dd>
					<img class="coin11" src="img/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="finance_application.jsp" target="_blank">财务申请</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="finance_record.jsp" target="_blank">财务记录</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
			</dl>
			<dl class="system_log">
				<dt>
					<img class="icon1" src="img/index_left/coin11.png" /><img class="icon2"
						src="img/index_left/coin12.png" /> 培训管理<img class="icon3"
						src="img/index_left/coin19.png" /><img class="icon4"
						src="img/index_left/coin20.png" />
				</dt>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="training_release.jsp" target="_blank">培训发布</a><img class="icon5" src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="training_record_query.jsp" target="_blank">培训记录</a><img class="icon5" src="img/index_left/coin21.png" />
				</dd>
			</dl>
			<dl class="system_log">
				<dt>
					<img class="icon1" src="img/index_left/coin14.png" /><img class="icon2"
						src="img/index_left/coin13.png" /> 薪水管理<img class="icon3"
						src="img/index_left/coin19.png" /><img class="icon4"
						src="img/index_left/coin20.png" />
				</dt>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="salary_record.jsp" target="_blank">薪水记录</a><img class="icon5" src="img/index_left/coin21.png" />
				</dd>
			</dl>
			<dl class="system_log">
				<dt>
					<img class="icon1" src="img/index_left/coin15.png" /><img class="icon2"
						src="img/index_left/coin16.png" /> 考勤管理<img class="icon3"
						src="img/index_left/coin19.png" /><img class="icon4"
						src="img/index_left/coin20.png" />
				</dt>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="attendance_record.jsp" target="_blank">考勤记录</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="publishing_check_in_table.jsp" target="_blank">发布签到</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="holiday_arrangement.jsp" target="_blank">假日安排</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="leave_record.jsp" target="_blank">请假记录</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="travel_record.jsp" target="_blank">出差记录</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="holiday_record.jsp" target="_blank">假日记录</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
			</dl>
			<dl class="system_log">
				<dt>
					<img class="icon1" src="img/index_left/coin17.png" /><img class="icon2"
						src="img/index_left/coin18.png" />审批管理<img class="icon3"
						src="img/index_left/coin19.png" /><img class="icon4"
						src="img/index_left/coin20.png" />
				</dt>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="leave_application.jsp" target="_blank">请假申请</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="travel_application.jsp" target="_blank">出差申请</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="resignation_application.jsp" target="_blank">辞职申请</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="transfer_application.jsp" target="_blank">调职申请</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="tab.html" target="main">培训申请</a><img class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
			</dl>
			<dl class="system_log">
				<dt>
					<img class="icon1" src="img/index_left/coinL1.png" /><img class="icon2"
						src="img/index_left/coinL2.png" /> 系统管理<img class="icon3"
						src="img/index_left/coin19.png" /><img class="icon4"
						src="img/index_left/coin20.png" />
				</dt>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="change_the_password.jsp" target="_blank">修改密码</a><img 
						class="icon5"
						src="img/index_left/coin21.png" />
				</dd>
				<dd>
					<img class="coin11" src="img/index_left/coin111.png" /><img class="coin22"
						src="img/index_left/coin222.png" />
					<a class="cks" href="login.jsp" target="_self">退出</a><img
						class="icon5" src="img/index_left/coin21.png" />
				</dd>
				
			</dl>
	</div>
	<!--显示右边部分-->
	<div class="right">
	  <div class="project">
	    <div class="list">
	      <div class="center"><a href="basic_Information.jsp" target="_blank"><img src="img/index_right/Artificial_intelligence.png" alt="" width="48" height="48" id="Image1" onMouseOver="MM_swapImage('Image1','','img/index_right/Artificial_intelligence1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>基本信息</p>
		  </div>
	    </div>
		  
	    <div class="list">
			<div class="center"><a href="education_record.jsp" target="_blank"><img src="img/index_right/Artificial_intelligence_car.png" alt="" width="48" height="48" id="Image2" onMouseOver="MM_swapImage('Image2','','img/index_right/Artificial_intelligence_car1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>员工学历</p>
		  </div>
		</div>
		  
		<div class="list">
			<div class="center"><a href="communication_record.jsp" target="_blank"><img src="img/index_right/Artificial_intelligence_robot.png" alt="" width="48" height="48" id="Image3" onMouseOver="MM_swapImage('Image3','','img/index_right/Artificial_intelligence_robot1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>通讯信息</p>
		  </div>
		</div>
		  
		<div class="list">
			<div class="center"><a href="training_release.jsp" target="_blank"><img src="img/index_right/autopilot.png" alt="" width="48" height="48" id="Image4" onMouseOver="MM_swapImage('Image4','','img/index_right/autopilot1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>培训发布</p>
		  </div>
		</div>
		  
		<div class="list">
			<div class="center"><a href="finance_application.jsp" target="_blank"><img src="img/index_right/Intelligent_analysis.png" alt="" width="48" height="48" id="Image5" onMouseOver="MM_swapImage('Image5','','img/index_right/Intelligent_analysis1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>财务申请</p>
		  </div>
		</div>
		  
		<div class="list">
			<div class="center"><a href="finance_record.jsp" target="_blank"><img src="img/index_right/Intelligent_cloud.png" alt="" width="48" height="48" id="Image6" onMouseOver="MM_swapImage('Image6','','img/index_right/Intelligent_cloud1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>财务记录</p>
		  </div>
		</div>
		  
		<div class="list">
			<div class="center"><a href="training_application.jsp" target="_blank"><img src="img/index_right/Intelligent_data.png" alt="" width="48" height="48" id="Image7" onMouseOver="MM_swapImage('Image7','','img/index_right/Intelligent_data1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>培训申请</p>
		  </div>
		</div>
      </div>
		
		<div class="project">
	    <div class="list">
			<div class="center"><a href="training_record_query.jsp" target="_blank"><img src="img/index_right/Intelligent_robot_arm.png" alt="" width="48" height="48" id="Image8" onMouseOver="MM_swapImage('Image8','','img/index_right/Intelligent_robot_arm1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>培训记录</p>
		  </div>
		</div>
			
	    <div class="list">
			<div class="center"><a href="salary_record.jsp" target="_blank"><img src="img/index_right/Intelligent_rocker_robot.png" alt="" width="48" height="48" id="Image9" onMouseOver="MM_swapImage('Image9','','img/index_right/Intelligent_rocker_robot1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>薪水纪录</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="leave_application.jsp" target="_blank"><img src="img/index_right/Intelligent_search.png" alt="" width="48" height="48" id="Image10" onMouseOver="MM_swapImage('Image10','','img/index_right/Intelligent_search1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>请假申请</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="leave_record.jsp" target="_blank"><img src="img/index_right/Intelligent_speakers.png" alt="" width="48" height="48" id="Image11" onMouseOver="MM_swapImage('Image11','','img/index_right/Intelligent_speakers1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>请假记录</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="resignation_application.jsp" target="_blank"><img src="img/index_right/Intelligent_voice.png" alt="" width="48" height="48" id="Image12" onMouseOver="MM_swapImage('Image12','','img/index_right/Intelligent_voice1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>辞职申请</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="resignation_record.jsp" target="_blank"><img src="img/index_right/Rocket_robot.png" alt="" width="48" height="48" id="Image13" onMouseOver="MM_swapImage('Image13','','img/index_right/Rocket_robot1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>辞职记录</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="transfer_application.jsp" target="_blank"><img src="img/index_right/Smart_chip.png" alt="" width="48" height="48" id="Image14" onMouseOver="MM_swapImage('Image14','','img/index_right/Smart_chip1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>调职申请</p>
		  </div>
		</div>
      </div>
		
		<div class="project">
	    <div class="list">
			<div class="center"><a href="transfer_record.jsp" target="_blank"><img src="img/index_right/Smart_devices.png" alt="" width="48" height="48" id="Image15" onMouseOver="MM_swapImage('Image15','','img/index_right/Smart_devices1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>调职记录</p>
		  </div>
		</div>
			
	    <div class="list">
			<div class="center"><a href="attendance_record.jsp" target="_blank"><img src="img/index_right/Smart_game.png" alt="" width="48" height="48" id="Image16" onMouseOver="MM_swapImage('Image16','','img/index_right/Smart_game1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>考勤记录</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="holiday_arrangement.jsp" target="_blank"><img src="img/index_right/Smart_home.png" alt="" width="48" height="48" id="Image17" onMouseOver="MM_swapImage('Image17','','img/index_right/Smart_home1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>假日安排</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="travel_record.jsp" target="_blank"><img src="img/index_right/Smart_setting.png" alt="" width="48" height="48" id="Image18" onMouseOver="MM_swapImage('Image18','','img/index_right/Smart_setting1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>出差记录</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="holiday_record.jsp" target="_blank"><img src="img/index_right/The_robot.png" alt="" width="48" height="48" id="Image19" onMouseOver="MM_swapImage('Image19','','img/index_right/The_robot1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>假日记录</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="change_the_password.jsp" target="_blank"><img src="img/index_right/unmanned.png" alt="" width="48" height="48" id="Image21" onMouseOver="MM_swapImage('Image21','','img/index_right/unmanned1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>修改密码</p>
		  </div>
		</div>
			
		<div class="list">
			<div class="center"><a href="login.jsp" target="_self"><img src="img/index_right/Visual_intelligence.png" alt="" width="48" height="48" id="Image20" onMouseOver="MM_swapImage('Image20','','img/index_right/Visual_intelligence1.png',1)" onMouseOut="MM_swapImgRestore()"/></a>
			  <p>退出系统</p>
		  </div>
		</div>
      </div>
		
		
	</div>
	
</div>
	
<div class="footer" id="foot">
  <div class="copyright">
    <p>Copyright © 2018 Qunar.com Inc. All Rights Reserved.</p>
    <div class="img">
		<i class="icon"></i><span>联系邮箱：jiankangsun@yahoo.com</span>
	</div>
	
	  
	<div class="img">
	  <i class="icon2"></i><span>联系电话：18355042634</span>
	</div>

  </div>
</div>
	
</body>
</html>

图片资源在这里哦：

链接：https://pan.baidu.com/s/1gowQs50vHIEEVDP3v3rRew
提取码：gspr
 

coolsunxu
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
html列表滑动字母索引,移动端列表索引效果
weixin_36373787的博客
05-31 447
移动端列表索引效果非常实用，比如：手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果，写出来的代码，代码的结构基本一样，但功能会少一些，去掉了搜索框搜索，只有单纯的字母索引，不过这也基本够用了。这个效果是基于 jQuery 库的，所以在用的时候就记得引入 jQuery 库。移动端列表索引效果非常实用，比如：手机通讯录。你可以根据字母来查找对应的内容。下面这...
如何制作html页面索引,索引一个重定向的HTML页面
weixin_42372837的博客
06-03 1315
我有一个纯粹的基于GWT的网站，我们知道搜索引擎不能索引纯基于gwt的网站。因此，我创建了一个替代网页，如下所示，它作为单独的html存储在war文件夹中。此网页的目的是征集和索引有关我网站的详细信息。这个页面从不显示在我的网站上，而是仅用于索引。通往此网页的网址是Sitemaps.xml的一部分。因此，我假设下面的html将被索引，因为它是Sitemaps的一部分。因此，这里是我的问题：索引一个...
html查询页面制作,HTML+CSS实现漂亮的查询部件实例
weixin_30682043的博客
06-03 1583
一、参考网址：www.kuhnsjewelers.com二、效果：三、HTML复制代码代码如下:四、CSS复制代码代码如下:#search-box{position: relative;float: left;width: 265px;height: 55px;background: url(Images/search-bg.gif) top right no-repeat;}.searchTe...
html好看的登录界面2（十四种风格登录源码）_html登录页面
最新发布
2301_82243626的博客
04-28 1883
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
html手机索引列表,HUI
weixin_34542623的博客
06-17 162
HUI 索引列表HUI - 索引列表完整代码html>HUI#hui-index-list-bar{width:25px;height:100%;position:fixed;z-index:2;top:46px;right:0px;background:#E4E4E4;padding-top:8px;}#hui-index-list-bara{display:block;...
nutch_elastic_web_ui:一个简单的谷歌的网络界面，比如搜索由 nutch 生成的弹性搜索索引
06-14
一个简单的谷歌的网络界面，比如搜索由 nutch 生成的 elasticsearch 索引。 它不包含任何 server ，只在当前目录中运行一个 http-server 。 ad 修改 localhost 以指向您的 elasticsearch 服务器。 待办事项显示突出...
html音乐播放器.pdf
04-02
使用`getElementById`和`$("selector")`获取DOM元素，通过`val()`, `append()`, `css()`, `click()`, `change()`等方法与用户交互，控制音频播放、修改界面状态等。 这个简单的HTML音乐播放器示例是一个很好的起点...
jQuery实现的简单获取索引功能示例
10-18
在jQuery中，获取元素的索引是一项常见的...这在实际开发中非常有用，特别是在需要根据用户交互更新界面状态或进行数据处理时。通过理解这个示例，你可以更好地掌握jQuery中的元素选择、事件绑定和索引获取等核心概念。
HTML 索引器：自动多语言 html 索引、打印索引、批量图像缩放-matlab开发
05-30
HTML Indexer就是这样，一个自动化的多语言html索引文件生成器。 它也可以用作批量图像调整大小的工具。 最后，它还可以在您选择的纸张尺寸上生成缩略图索引。 html 索引和画廊以及“联系表”都基于输入文件列表。 ...
WebMIaS:提供MIaS的Web界面
05-09
WebMIaS - Web界面 是一个网络接口。 WebMIaS接受结合文本查询的TeX或MathML表示法的数学查询。 TeX查询可即时转换为MathML。 结果包含匹配片段。 用法 ，将您的数据集放置到名为dataset/的目录中，并使用 Docker...
HTML常见语法与标签索引
11-16
HTML常见的语法与标签索引
11种炫酷的HTML5搜索界面设计
12-13
这是一组炫酷的HTML5搜索界面设计效果。这组搜索界面设计效果共11种不同的特效，分别使用不同CSS3动画来展示搜索界面。
图文直播html页面_建站SEO原来如此简单（HTML篇）
weixin_39636176的博客
12-04 175
之前的文章向大家介绍了内容管理系统CMS的详细内容，也曾提到HTML是基于CMS的。那么这篇文章就带大家彻底的了解一下HTML的各项内容。html一．什么是HTMLHTML，超文本标记语言。是为了创建网页和可在网页浏览器中看到的信息设计的一种标记语言。HTML同时也被用来结构化信息例如：标题、段落、关键词、列表等等。其目的是为了把存储在一台电脑中的图文与存储在另一台电脑中的图文紧密地联系在一起，形...
查询 html页面
y4418的博客
08-01 2200
下面我们来看一下用vs做的查询功能 首先看一下html的代码 3.这边我们先做一个layui的一个表格，也就是在页面上显示的图表的表头 4.首先先初始化layui模块 5.Elem就是获取id cols就是开始写表头数据 6.然后渲染数据表，这个做的是表头啊按照代码去写就好，没什么难度 7.然后在绑定图书名称和图书类型的下拉框，获取id然后写一个路径就好了 8.自定义表这个省略这是做修改的。 9.条件查询就是根据id获取val中的内容 10就是重载表格基本就这样了 .
html手机城市索引列表,微信小程序全国城市列表索引开发案例
weixin_30899789的博客
06-19 371
在一些需求中，我们需要有一个全国城市的列表供我们选择，并且可以获得对应的经纬度坐标。今天，我们就一起来实现这个需求。好，我们先看一下我们期望的最终效果，如下图：我们看到左侧有个下拉选项，右侧是供搜索的输入关键字用到的输入框。关于搜索的需求可以看这个教程使用高德地图微信小程序SDK开发案例-输入提示(附源码)我们今天主要实现如下需求：1.页面布局。2.进入页面自动定位当前所在的城市。3.获取全国城市...
html字母索引实现,一步一步实现字母索引导航栏
weixin_29529047的博客
06-04 471
先来看下实现后的效果：DEMO这个索引导航栏的效果在很多 APP 中都有应用，我也是参考了一些 APP 的效果进行实现。不过之前接触移动端页面开发较少，所以是边学边做，也就把这个过程中的一些东西整理记录下来。设计这个功能的基本需求可以总结为一句话：手指在导航栏(也就是 DEMO 上页面右侧的包含字母的竖条)拖动时，根据当前手指位置，页面主体内容列表跳转到对应字母的内容项。当然，延伸开来，可以是对于...
javaweb基础(5)
成长的烧年
10-25 710
HTML对象(object) 指定了 HTML 文档遵循的文档类型定义(DTD)。         批注                  标明超链接的起始或目的位置。      指定超级链接的分割窗口     指定锚名称的超级链接             指定超级链接      被连结点的名称            标明缩写词。            
三种方法编写的简单html界面(2）
Sakura_sql的专栏
10-12 405
菜鸟级 第一发仍然是最终主界面显示效果
html界面中获取json数组中的值
04-20
可以使用JavaScript代码，通过JSON.parse()将json字符串转化为JavaScript对象，然后通过对象的属性名或索引获取数组中的值。示例代码如下： ``` var jsonStr = '[{"name":"Tom","age":18},{"name":"Jerry","age":20}]'; var jsonObj = JSON.parse(jsonStr); console.log(jsonObj[0].name); //输出Tom console.log(jsonObj[1].age); //输出20 ``` 注意，以上代码只是示例，具体使用方法要根据你的实际情况进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值