css布局实现狗狗迷失动画效果的404页面代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现狗狗迷失动画效果的404页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tipsy.css">
<style>
@charset "utf-8";
/* === General stuff === */
html, body {
height: 100%;
background: #186aa9 ;
overflow: hidden;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
a {
color: #3680b1;
}
img, a img {
border: 0px none;
outline: none;
}
/* === Preloader === */
#universal-preloader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0.96;
background: #000 repeat;
z-index: 999999999;
}
#universal-preloader>.preloader {
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
.universal-preloader-preloader {
position: absolute;
top: 0px;
left: 0px;
}
/* === Main Section === */
#wrapper {
width: 980px;
margin: 0px auto;
position: relative;
height: 100%;
}
h1.not-found-text {
font-size: 50px;
color: #fff;
letter-spacing: 2px;
margin-bottom: 20px;
}
div.not-found-text {
position: absolute;
top: 35px;
right: 0px;
width: 430px;
}
div.graphic {
position: absolute;
top: 80px;
left: 0px;
background: url(//repo.bfw.wiki/bfwrepo/image/610a82eeee0ad.png) top left no-repeat;
width: 494px;
height: 331px;
}
div.planet {
position: absolute;
bottom: -1100px;
margin: 0px auto;
width: 980px;
background: url(//repo.bfw.wiki/bfwrepo/image/610a82ba1a9c8.png) center no-repeat;
height: 1920px;
z-index: 0;
}
div.dog-wrapper {
position: absolute;
bottom: 300px;
left: 440px;
}
div.dog {
position: absolute;
bottom: 0px;
left: 0px;
width: 80px;
height: 80px;
z-index: 999;
background: url(//repo.bfw.wiki/bfwrepo/image/610a82a1e81a4.png) 0px 0px no-repeat;
}
div.search {
position: absolute;
top: 145px;
right: 0px;
width: 340px;
background: #eeeeee;
box-shadow: 1px 1px 0 #ffffff inset, 5px 5px 0px #3680b1;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0