<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/animate.css">
<script src="js/jquery.min.js"></script>
<script src="js/weather.js"></script>
<title>jQuery电脑桌面用户登录界面代码 - 源码之家</title>
</head>
<style>
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
.lock {
z-index: 10;
position: absolute;
width: 100%;
height: 100%;
background: url(images/lock.jpg) no-repeat center;
background-size: 100%;
}
.form {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 250px;
height: 270px;
text-align: center;
background: rgba(255,255,255,.3);
}
.pic {
margin-top: 30px;
width: 80px;
height: 80px;
background: url(images/pic.jpg) no-repeat center;
background-size: 100%;
border-radius: 50%;
opacity:0.8;
}
.pic:hover {
cursor: pointer;
opacity: 1;
}
.name {
margin-top: 15px;
color: white;
font-size: 18px;
}
.input input {
margin-top: 20px;
255d255 255;px;
height: 30px;
text-indent: 10px;
}
.container {
z-index: 4;
position: relative;
width: 100%;
height: 100%;
background: url(./images/bg7.jpg) no-repeat center;
background-size: 100%;
overflow: hidden;
}
.nav {
z-index: 3;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0px auto;
width: 1100px;
height: 60px;
background: rgba(229,232,237,.5);
}
.nav ul {
position: relative;
width: 98%;
top: 6px;
left: 13px;
right: 0;
bottom: 0;
margin: auto;
}
.nav ul li {
float: left;
text-align: center;
transition: .5s;
margin: 0 5px;
}
.nav ul li:hover {
cursor: pointer;
transform: scale(1.2);
}
.nav ul li img {
width: 80%;
}
/*====photo=====*/
.photo {
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
background: rgba(210,210,212,.7);
display: none;
}
.title {
padding-top: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.small_pic {
position: relative;
float: left;
width: 32%;
height: 40%;
margin-top: 10px;
margin-left: 6px;
overflow: hidden;
}
.small_pic img {
z-index: 2;
position: relative;
width: 100%;
height: 100%;
transition: .5s;
}
.small_pic img:hover {
cursor: pointer;
transform: scale(1.2);
}
.img_cover {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 60%;
height: 10%;
border-radius: 15px;
background: rgba(255,255,255,.6);
display: none;
}
.progress {
position: inherit;
left: 0;
width: 0%;
height: 100%;
border-radius: 15px;
background: green;
}
.notice {
z-index: 4;
position: absolute;
right: 0;
bottom: 0;
width: 240px;
height: 230px;
background: rgba(240,240,240,.8);
display: none;
}
.n_x,.w_x,.photo_exit {
position: inherit;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background: white;
right: 0px;
top: 4px;
transition: .3s;
}
.photo_exit {
right: 0;
top: 0;
}
.n_x:hover,.w_x:hover,.photo_exit:hover {
cursor: pointer;
transform: rotateZ(180deg);
}
.notice_title {
padding: 5px 0;
text-align: center;
font-size: 15px;
background: black;
color: white;
}
.notice_content {
margin-top: 10px;
width: 90%;
height: 85%;
font-size: 14px;
color: #1A1A1A;
/*background: red;*/
}
.notice_content ul li {
height: 30px;
width: 100%;
letter-spacing: 2px;
}
.notice_content ul li:hover {
cursor: pointer;
font-weight: bold;
}
.works {
z-index: 3;
position: absolute;
left: 10%;
right: 0px;
bottom: 30px;
top: 0px;
margin: auto;
width: 70%;
height: 80%;
display: none;
overflow: hidden;
}
.works ul {
width: 100%;
height: 100%;
}
.works ul li {
z-index: 3;
position: relative;
float: left;
width: 98px;
height: 100%;
background: rgba(240,240,240,.8);
border-left: 1px solid gray;
border-right: 1px solid gray;
display: none;
}
.works ul li:nth-of-type(2) {
border: none;
}
.w_x {
z-index: 5;
position: absolute;
right: 1px;
top: 0px;
display: none;
}
.w_font {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
font-size: 20px;
width: 18%;
height: 30%;
}
.w_content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90%;
height: 36%;
background: white;
display: none;
}
.w_content img {
width: 100%;
}
.w_con_one {
padding-top: 10px;
text-align: center;
}
.loading{position:fixed;z-index:999;top:0;left:0;display:table;width:100%;height:100%;background:#fff;text-align:center}.loading .loader{display:table-cell;vertical-align:middle}.loading p{margin-top:15px;color:#333}.loader_icn{opacity:.75;width:24px;height:24px;display:inline-block;-webkit-animation:clockwise .5s linear infinite;animation:clockwise .5s linear infinite}.loader_cut{width:12px;height:24px;overflow:hidden;position:absolute;top:0;left:0}.loader_donut{box-sizing:border-box;width:24px;height:24px;border:2px solid #000;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;position:absolute;top:0;left:0;background:0
jQuery电脑桌面用户登录界面代码.zip
需积分: 0 85 浏览量
2019-05-24
03:31:12
上传
评论
收藏 2.04MB ZIP 举报
diannaozhuomianyonghudenglu.zip （33个子文件） 
jQuery电脑桌面用户登录界面代码 css 
public.css 520B animate.css 71KB images 
bg7.jpg 267KB bg8.jpg 72KB bg3.jpg 114KB
icon5.png 2KB icon15.png 1KB work2.png 309KB icon10.png 2KB icon11.png 2KB icon1.png 2KB pic.jpg 32KB bg4.jpg 42KB icon14.png 3KB icon8.png 2KB lock.jpg 249KB icon2.png 2KB icon12.png 2KB work3.png 305KB work1.png 214KB icon13.png 2KB icon9.png 2KB bg5.jpg 375KB bg6.jpg 61KB icon3.png 2KB icon7.png 2KB icon4.png 2KB icon6.png 3KB js weather.js 786B particles.min.js 23KB zhuti1.js 2KB jquery.min.js 82KB
index.html 19KB
weixin_39840387
- 粉丝: 784
- 资源: 3万+
最新资源
- 海信智能电视刷机数据 LED42K330X3D（0000） 生产用软件数据 务必确认机编一致 强制刷机 整机USB升级程序
- shujudaochuceshi
- learn-ruby.zip
- test111111111111111111
- face-detect.ipynb
- 以下是一些关于ACM（国际大学生程序设计竞赛）、NOI（全国青少年信息学奥林匹克竞赛）以及CSP（全国青少年信息学奥林匹克竞赛提
- 是一些电子设计竞赛（电赛）经验分享，包括备赛策略、项目管理、团队合作和比赛期间的注意事项
- 全能运行库修复工具DirectX Repair v4.1.0.30770
- las格式点云数据使用详解(附VS编译好的LAStools工具)
- KRPano插件一键解密大师1.4.0 (解压密码1234)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0