Pure CSS Coke Can
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>Pure CSS Coke Can – 纯CSS实现立体可乐罐</title> <style> #content { margin: 100px auto; } .top-banner { background-color: #333; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0} .clearfix{*zoom:1} .fl{float:left} .fr{float:right} .fl,.fr{_display:inline} .top-banner { position:absolute; z-index: 999; left:0; top:0; height:40px; line-height:40px; padding:0 30px; width:100%; font-size: 13px; background-color: rgba(255, 255, 255, 0.15); color: #fff; font-family: "宋体","Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 15px; /*text-shadow: 1px 1px 3px #333;*/ /*box-shadow: 0 1px 0 #999;*/ } .top-banner a { color: #fff; text-decoration: none; } </style> </head> <body> <div id="content" style="726px"> <iframe frameborder="0" src="inner.html" width="726" height="500"></iframe> <div class="footer-banner" style="728px; margin:0 auto"></div> </div> </body> <script src="http://www.yyyweb.com/demo/common/jquery.min.js"></script> <script src="http://www.yyyweb.com/demo/common/init.js"></script> </html>