<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> <meta name="description" content="A Christmas tree built out of form elements." /> <meta name="author" content="Hakim El Hattab" /> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <title>DOM Tree</title> <link href="css/domtree.css" rel="stylesheet" media="screen" /> <link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'></head><body> <div class="tree"></div> <script src="js/domtree.js"></script> <!-- Third party scripts and sharing UI --> <p class="project-title">DOM Tree</p> <div class="credits"> <a href="https://blog.csdn.net/qq_53673551?spm=1000.2115.3001.5343">知心宝贝</a> <a href="https://twitter.com/hakimel">[钯金](https://www.gendan5.com/nmetal/palladium.html)文章代码参考@hakimel</a> </div> <style type="text/css" media="screen"> .project-title { position: absolute; left: 25px; bottom: 20px; font-size: 16px; color: #fff; } .credits { position: absolute; right: 20px; bottom: 25px; font-size: 15px; z-index: 20; color: #fff; vertical-align: middle; } .credits * + * { margin-left: 15px; } .credits a { padding: 8px 10px; color: rgba(255,255,255,0.7); border: 2px solid rgba(255,255,255,0.7); text-decoration: none; } .credits a:hover { border-color: #fff; color: #fff; } @media screen and (max-width: 1040px) { .project-title { display: none; } .credits { width: 100%; left: 0; right: auto; bottom: 0; padding: 30px 0; background: #b72424; text-align: center; } .credits a { display: inline-block; margin-top: 7px; margin-bottom: 7px; } } </style> <script> var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']]; (function(d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = true; g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; s.parentNode.insertBefore(g, s); })(document, 'script'); </script></body></html>