实例介绍
【实例简介】
门禁安防系统的设计主要有三个模块,分别是新卡注册、就卡注销和查询信息。
新卡注册的界面设计如下图所示。其中包括基本信息有姓名、房号、证件号,注册成功后系统自动生成一个卡号。
查询信息界面设计如图所示。可以通过姓名、房号、证件号进行入住客人信息的查询。
【实例截图】
【核心代码】
*{
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;
}
网友评论
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
支持(0) 盖楼(回复)