基本信息

---

下载

   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

---

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

支付宝支付

微信支付

   源码介绍

---

门禁安防系统的设计主要有三个模块，分别是新卡注册、就卡注销和查询信息。

新卡注册的界面设计如下图所示。其中包括基本信息有姓名、房号、证件号，注册成功后系统自动生成一个卡号。

查询信息界面设计如图所示。可以通过姓名、房号、证件号进行入住客人信息的查询。

*{
margin:0;
padding:0;
}
a{
text-decoration:none;
color:inherit; /*继承父类*/
}
ul{
list-style:none;
}

body{

height:1800px;
background:url(../img/bg1.jpg) no-repeat top,
                  url(../img/bg2.jpg) no-repeat bottom;
}


/***************************head样式************************************/
#head{
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:0;
width:100%;
height:160px;

}
/**logo***/
.logo{
position:absolute;
margin-left:10%;
width:254px;
height:110px;
background:url(../img/logo.gif);

}

/***搜索样式****/
.sc{
position:absolute;
margin-top:65px;
margin-left:62%;
width:395px;
height:30px;
opacity:0.5;

-moz-transition:1s ease-in-out;
-webkit-transition:1s ease-in-out;
-ms-transition:1s ease-in-out;
-o-transition:1s ease-in-out;
transition:1s ease-in-out;
}

.sc:hover{
opacity:1.0;
}
.sc .sub{
width:30px;
height:30px;
background:url(../img/s.jpg);
border:1px solid red;
cursor:pointer;
border-radius:5px;

-moz-transition:0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-ms-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;s
}
.sc .sub:hover{
box-shadow:0 0 3px 1px #999999;
}
.sc .txt{
margin:0;
width:350px;
height:25px;
color:18px;
font-size:18px;
border:inset 1px solid #CCC;
border-radius:5px;

-moz-transition:1s ease-in-out;
-webkit-transition:1s ease-in-out;
-ms-transition:1s ease-in-out;
-o-transition:1s ease-in-out;
transition:1s ease-in-out;

}
.sc .txt:hover{
box-shadow:0 0 5px 1px #999999;
}

/***导航样式**/
.nav{
position:absolute;
margin-top:110px;
width:100%;
height:50px;
/*背景渐变效果*/
background: -moz-linear-gradient(#C153A0, #6F2B46);
background: -webkit-linear-gradient(#C153A0, #6F2B46);
background: -ms-linear-gradient(#C153A0, #6F2B46);
background: -o-linear-gradient(#C153A0, #6F2B46);
background: linear-gradient(#C153A0, #6F2B46);


}
.nav ul li ul{
position:absolute;
width:895%;
height:200px;
background:#999;
z-index:10;
border-radius:0 0 10px 10px;
margin-top:-1px;
margin-left:-270px;
background:rgba(0,0,0,0.5);
display:none;

}
.nav ul li:hover > ul{
display:block;
}
.nav ul{
width: 1100px;
height: 60px;
position: relative;
margin: 0 auto ;
list-style: none;

}
.nav ul li{
float: left;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
color:white;
font-weight:bold;
font-size:20px;
z-index: 2;
position: relative;
cursor: pointer;

-moz-transition:2s ease-in-out;
-webkit-transition:2s ease-in-out;
-ms-transition:2s ease-in-out;
-o-transition:2s ease-in-out;
transition:2s ease-in-out;
}
.nav ul li:hover{

background: -moz-linear-gradient(yellow, red);
background: -webkit-linear-gradient(yellow, red);
background: -ms-linear-gradient(yellow, red);
background: -o-linear-gradient(yellow, red);
background: linear-gradient(yellow, red);
}
.nav .bg{
width: 151px;
height: 5px;
overflow: hidden;
background-color: white;
border: none;
position: absolute;
border-radius:0 0 60px 60px;
/*top: 24px;*/
left: 0;
z-index: 1;
}
/***********/
.nav ul li ul div{
float:left;
margin-left:100px;
margin-top:20px;
width:300px;
height:150px;
background:rgba(0,0,0,0.7);
}
.nav ul li ul div:hover{
box-shadow:0 0 10px 1px black;
}
.nav ul li ul div img{
float:left;
width:200px;
height:150px;
}
.nav ul li ul div p{
float:left;
text-align:center;
font-size:10px;
text-indent:10px;
line-height:20px;
}
/*******顶部小导航*******/
.xtop{
position:absolute;
margin-top:0;
margin-left:47%;
width:600px;
height:40px;

}
.xtop ul{
list-style:none;
width:600px;
height:40px;
font-size:15px;
}
.xtop ul li{
float:left;
width:100px;
height:40px;
color:#666;
line-height:40px;
text-align:center;
margin-left:1px;
background:rgba(0,0,0,0.1);
cursor:pointer;

-moz-transition:0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-ms-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;
}
.xtop ul li:hover{
color:white;
background:rgba(0,0,0,0.4);
}
.xtop .li_1{
width:80px;
border-radius:0 0 0 40px;
}
.xtop .li_2{
width:135px;
}
.xtop .li_3{
width:99px;
}
.xtop .li_4{
width:82px;
}
.xtop .li_5{
width:130px;
}
.xtop .li_6{
width:65px;
}


/***************************content样式**********************************/
#content{
position:relative;
margin-top:10px;
width:1100px;
height:1140px;
margin-left:auto;
margin-right:auto;

}
/***content_left**/
.content_left{
float:left;
background:url(../img/content-left.jpg) no-repeat;
background-size:100%;
height:1140px;
width:200px;

-moz-transition:0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-ms-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;
}
.content_left:hover{
box-shadow:0 0 10px 1px #333333;
}
/**signup**/
.signup{
position:absolute;
margin-top:150px;
margin-left:35px;
width:130px;
height:40px;
border-radius:10px;
cursor:pointer;
text-align:center;
line-height:40px;
color:white;
font-size:18px;

background: -moz-linear-gradient(#F2B3D8, #E1519C);
background: -webkit-linear-gradient(#F2B3D8, #E1519C);
background: -ms-linear-gradient(#F2B3D8, #E1519C);
background: -o-linear-gradient(#F2B3D8, #E1519C);
background: linear-gradient(#F2B3D8, #E1519C);

-moz-transition:0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-ms-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;
}
.signup:hover{
background: -moz-linear-gradient(#C153A0, #6F2B46);
background: -webkit-linear-gradient(#C153A0, #6F2B46);
background: -ms-linear-gradient(#C153A0, #6F2B46);
background: -o-linear-gradient(#C153A0, #6F2B46);
background: linear-gradient(#C153A0, #6F2B46);
}
/**banner**/
.banner{
float:left;
width:890px;
height:500px;
margin-left:10px;
overflow:hidden;
background:url(../img/banner.jpg) no-repeat;
background-size:890px 500px;

-moz-transition:0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-ms-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;

}
.banner:hover{
box-shadow:0 0 10px 1px #333333;
}


.banner li{ 
    list-style:none;
}
.banner #div1{ 
    min-width:890px; 
height:500px; 
position:relative; 
overflow:-hidden;
}
 .banner #div1 ul{ 
    position:absolute; 
left:0;
}
.banner #div1 ul li{ 
    float:left;
}
.banner #div1 ul li img{
width:890px;
height:500px;
    position:relative; 
left:0;
}

.banner #btn{ 
    position:absolute; 
width:100%; 
text-align:center; 
bottom:0;
}
.banner #btn a{ 
    cursor:pointer; 
display:inline-block; 
width:11px; 
height:11px; 
background:#666666;
}
.banner #btn a.active { 
    background:white;
} 
.banner #btn a:hover{ 
    background:white;
}

*html .ie6_out{ 
     margin-left:1000px; 
zoom:1;
}
*html .ie6_in{ 
     position:relative; 
float:left;
margin-left:-1000px;
}
/**bands**/
.bands{
padding:0;
float:left;
width:900px;
height:640px;

}
/*****/
 figure {
margin-top:10px;
margin-left:10px;
margin-right:0;
  position: relative;
  float: left;
  overflow: hidden;
  width: 440px;
  height: 203px;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
  
  -moz-transition:0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-ms-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;
}
 figure:hover{
box-shadow:0 0 10px 1px #333333;
 }

 figure img {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0.8;
}

 figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

 figure figcaption::before,
 figure figcaption::after {
  pointer-events: none;
}

 figure figcaption,
 figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

 figure p {
  margin: 0;
}

 figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/*************/
figure.effect-apollo {
  background: #3498db;
}

figure.effect-apollo img {
  opacity: 0.95;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale3d(1.05,1.05,1);
  transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
  content: '';
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
  transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 3em;
  padding: 0 1em;
  max-width: 150px;
  border-right: 4px solid #fff;
  text-align: right;
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}


figure.effect-apollo:hover img {
  opacity: 0.6;
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
  -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
  transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

/****************beside**********************/
#beside{
position:relative;
margin-top:10px;
width:1100px;
height:350px;
margin-left:auto;
margin-right:auto;
background:rgba(255,255,255,0.5);

-moz-transition:0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-ms-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;

}

#beside:hover{
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; 
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); 

behavior: url(ie-css3.htc);


}

/**beside_left**/
.beside_left{
float:left;
height:350px;
width:650px;
color:#666;
}
.beside_left h2{
margin-left:20px;
margin-top:10px;
}
.beside_left p{
margin-top:25px;
margin-left:20px;
width:60px;
font-size:18px;

}



/**beside_top**/
.beside_top{
float:left;
height:220px;
width:450px;
color:#666;
}

.beside_top h2{
margin-left:20px;
margin-top:10px;
}
.beside_top p{
margin-top:25px;
margin-left:20px;
width:60px;
font-size:18px;
}

/***.beside_bottom***/
.beside_bottom{
float:left;
height:130px;
width:450px;
color:#666;
}
.beside_bottom h2{
margin-left:20px;
}


/**3D图标**/
.beside_bottom ul{
list-style:none;
}
ul.osx-dock {
margin-top:15px;
margin-left:80px;
  float: left;
  height: 55px;
  width: 280px;
}
ul.osx-dock li {
   position: relative;
float: left;
margin-left:10px;
width: 40px;
height: 40px;
-webkit-transition: 0.15s linear;
-moz-transition: 0.15s linear;
-ms-transition: 0.15s linear;
-o-transition: 0.15s linear;
transition: 0.15s linear;
text-align: center;
}
ul.osx-dock li a {
display: block;
height: 40px;
margin-top: 4px;
-webkit-transition: 0.15s linear;
-moz-transition: 0.15s linear;
-ms-transition: 0.15s linear;
-o-transition: 0.15s linear;
transition: 0.15s linear;
}
ul.osx-dock li a img {
width: 35px;
}
ul.osx-dock li:hover {
margin-left: 9px;
margin-right: 9px;
z-index: 20;
}
ul.osx-dock li:hover a {
-webkit-transform-origin: center bottom;
-webkit-transform: scale(1.2);
-moz-transform-origin: center bottom;
-moz-transform: scale(1.2);
-ms-transform-origin: center bottom;
-ms-transform: scale(1.2);
-o-transform-origin: center bottom;
-o-ransform: scale(1.2)
transform-origin: center bottom;
transform: scale(1.2)
}
ul.osx-dock li span {
position: absolute;
bottom: 38px;
margin: 0 auto;
display: none;
width: auto;
font-size: 11px;
font-weight: bold;
padding: 3px 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
color:red;
}
ul.osx-dock li:hover span {
display: block;
}
/***侧边栏***/
#ce {
  width: 50px;
  height: 110px;
  position: fixed;
margin-top:450px;
margin-left:20px;
z-index:100;
opacity: 0.5;
transition:1s ease-in-out;
 }
#ce:hover{
opacity: 1.0;
}  
#ce img{
 width:50px;
 height:50px;
}
#ce ul li{
 width:50px;
 height:50px;
 cursor:pointer;
}
 
#ce ul li ul{
   list-style:none;
  width: 150px;
  height: 150px;
  line-height: 20px;
  text-align: center;
  left: 60px;
  top: 0px;
  background-color: yellow;
  position: absolute;
background:url(../img/e.jpg) no-repeat;
background-size:150px;
box-shadow:0 0 10px 2px black;
display:none;

 }
#ce ul li:hover > ul{
display:block;

}