css布局实现大气pc网站底部foot布局效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现大气pc网站底部foot布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>云计算底部信息</title> <style> /* 公共样式表css */ html,body { color: #333; margin: 0; height: 100%; font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: normal; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; color: #000; } img { border: 0; } body { background: #fff; color: #666; } html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { margin: 0; padding: 0; } a { text-decoration: none; color: #08acee; } button { outline: 0; } img { border: 0; } button,input,optgroup,select,textarea { margin: 0; font: inherit; color: inherit; outline: none; } li { list-style: none; } a { color: #666; } a:hover { color: #eee; } .clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { } /* 必要布局样式css */ .cloud-banner { position: relative; min-width: 1200px; background: #0af url(//repo.bfw.wiki/bfwrepo/images/cloud-back.jpg) no-repeat center; height: 180px; overflow: hidden; color: #fff; text-align: center; } .cloud-bubble-one { position: absolute; top: -120px; left: 50%; z-index: 10; margin-left: -120px; width: 240px; height: 240px; background: url(//repo.bfw.wiki/bfwrepo/images/cloud-back-bule1.png); animation: bubble-animate-1 linear 10s infinite; } .cloud-bubble-two { position: absolute; top: 50px; left: 34%; z-index: 11; width: 360px; height: 360px; background: url(//repo.bfw.wiki/bfwrepo/images/cloud-back-bule2.png); animation: bubble-animate-2 linear 12s infinite; } .cloud-bubble-three { position: absolute; top: 50px; left: 48%; z-index: 12; width: 300px; height: 300px; background: url(//repo.bfw.wiki/bfwrepo/images/cloud-back-bule3.png); animation: bubble-animate-3 linear 11s infinite; } @keyframes bubble-animate-1 { from { top: -120px } 50% { top: -180px } to { top: -120px } } @keyframes bubble-animate-2 { from { top: 50px; left: 34% } 50% { top: 80px; left: 24% } to { top: 50px; left: 34% } } @keyframes bubble-animate-3 { from { top: 50px; left: 48% } 50% { top: 80px; left: 58% } to { top: 50px; left: 48% } } .cloud-bubble-text { position: relative; padding-top: 46px; z-index: 20; font-size: 24px; } .cloud-bubble-link { position: relative; z-index: 20; } .cloud-bubble-link a { display: inline-block; margin-top: 24px; width: 220px; height: 44px; line-height: 44px; border: 1px solid #fff; color: #fff; } .cloud-bubble-link a:hover { color: #333; background-color: #fff; } .cloud-footer { min-width: 1200px; background-color: #2b373d; font-family: "Microsoft Yahei"; } .cloud-footer-box { width: 1200px; margin: 0 auto; } .cloud-footer-feature { width: 100%; height: 120px; border-bottom: 1px solid #414b51 } .cloud-footer-feature ul li { float: left; width: 25%; height: 120px; } .cloud-footer-feature ul li a { white-space: nowrap; display: block; line-height: 120px; padding-left: 110px; background-repeat: no-repeat; background-position: 50px center; font-size: 18px; color: #fff; } .feature-item001 a { background-image: url("//repo.bfw.wiki/bfwrepo/image/60d58fc22d97a.png") } .feature-item002 a { background-image: url("//repo.bfw.wiki/bfwrepo/image/60d58fe01ddd2.png") } .feature-item003 a { background-image: url("//repo.bfw.wiki/bfwrepo/image/60d58f8bb9069.png") } .feature-item004 a { background-image: url("//repo.bfw.wiki/bfwrepo/image/60d58f766deb5.png") } .cloud-footer-nav { width: 100%; padding: 40px 0 62px; } .cloud-footer-nav-logo { width: 32%; float: left; } .cloud-comm { padding-left: 20px; } .cloud-comm-logo { height: 40px; background: url(//repo.bfw.wiki/bfwrepo/icon/60b2c443baaca.png) no-repeat left; background-size: 115px; } .cloud-comm-logo span { display: inline-block; margin-left: 136px; margin-top: -5px; width: 126px; height: 40px; } .cloud-info { margin-top: 20px; line-height: 25px; font-size: 14px; color: #fff; } .cloud-share { width: 100%; height: 100%; margin-top: 20px; position: relative; } .cloud-share>p { width: 132px; height: 132px; border: 1px solid #ddd; background-color: #fff; } .wei-xin { position: absolute; top: -145px; left: 24px; background-image: url(//repo.bfw.wiki/bfwrepo/image/5f9e27c437f2a.png); display: none; background-size: 132px; } .corner { border: 10px solid transparent; border-top: 10px solid #fff; position: absolute; bottom: -20px; right: 50%; margin-right: -10px; z-index: 10; } .wei-bo { position: absolute; top: -145px; left: -32px; background-image: url(//repo.bfw.wiki/bfwrepo/image/5f9e27c437f2a.png); display: none; background-size: 132px; } .cloud-share ul li { float: left; margin-left: 15px; width: 40px; height: 40px; } .cloud-share ul li a { display: block; } .cloud-share ul li a span { display: inline-block; width: 40px; height: 40px; background-repeat: no-repeat; background-size: 40px; } .cloud-share ul li .icon-blog { background-image: url(//repo.bfw.wiki/bfwrepo/image/60d58f5dcae27.png); } .cloud-share ul li .icon-blog:hover { background-image: url(//repo.bfw.wiki/bfwrepo/icon/5fb1eef099911.png); } .cloud-share ul li .icon-wei { background-image: url(//repo.bfw.wiki/bfwrepo/image/60d58f2e324ef.png); } .cloud-share ul li .icon-wei:hover { background-image: url(//repo.bfw.wiki/bfwrepo/image/60cc69f9b560a.png); } .cloud-share ul li .icon-qq { background-image: url(//repo.bfw.wiki/bfwrepo/image/60d58f43516c2.png); } .cloud-share ul li .icon-qq:hover { background-image: url(//repo.bfw.wiki/bfwrepo/image/60cc69d0afc13.png); } .cloud-share ul li .icon-mail { background-image: url(//repo.bfw.wiki/bfwrepo/image/60d58f19299ab.png); } .cloud-share ul li .icon-mail:hover { background-image: url(//repo.bfw.wiki/bfwrepo/icon/5d834ed0c6986.png); } .cloud-footer-nav-list { width: 68%; height: 100%; border-left: 1px solid #414b51; padding-left: 20px; float: left; } .cloud-footer-nav-list ul { float: left; width: 25%; } .list-title { font-size: 18px; color: #fff; margin-bottom: 15px; line-height: 30px; } .cloud-footer-nav-list ul li { line-height: 30px; } .cloud-footer-nav-list ul li a { color: #819199; font-size: 14px; font-weight: 600; text-decoration: none; } .cloud-footer-nav-list ul li a:hover { color: #fff; text-decoration: underline; } .cloud-copyright { width: 100%; border-top: 1px solid #212a2f; padding: 20px 0; text-align: center; } .cloud-copyright p { text-align: center; color: #819199; font-size: 12px; line-height: 25px; } .cloud-copyright p a { color: #819199; } .cloud-copyright p a:hover { text-decoration: underline; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> </head> <body> <div class="cloud-banner"> <div class="cloud-bubble-one"></div> <div class="cloud-bubble-two"></div> <div class="cloud-bubble-three"></div> <div class="cloud-bubble-text">为您提供出众的上云实践机会和全面的尊贵服务</div> <div class="cloud-bubble-link"> <a href="#">免费注册</a> </div> </div> <div class="cloud-footer"> <div class="cloud-footer-box"> <div class="cloud-footer-feature"> <ul class="clearfix"> <li class="feature-item001"> <a href="#"> <span>7*24小时服务支持</span> </a> </li> <li class="feature-item002"> <a href="#"> <span>0元快速备案</span> </a> </li> <li class="feature-item003"> <a .........完整代码请登录后点击上方下载按钮下载查看
网友评论0