|
|
(6 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
− | <!DOCTYPE html>
| |
− | <html>
| |
− | <head>
| |
− | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
| |
| | | |
− | <script type="text/javascript">
| |
− | $(document).ready(function(){
| |
− | $(".flip").click(function(){
| |
− | $(".panel").slideToggle("slow");
| |
− | });
| |
− | });
| |
− | </script>
| |
− |
| |
− | <style type="text/css">
| |
− | body
| |
− | {
| |
− | background:#3a4044;
| |
− | }
| |
− | div.flip
| |
− | {
| |
− | position: fixed;
| |
− | right: 2%;
| |
− | top: 4%;
| |
− | background:transparent;
| |
− | padding:15px 20px 15px 20px;
| |
− | z-index:3;
| |
− | border: 3px #ffffff solid;
| |
− | border-radius: 40px; /* 高度 */
| |
− | color:#fff;
| |
− | }
| |
− | div.panel
| |
− | {
| |
− | position: fixed;
| |
− | background:#fff;
| |
− | height:100%;
| |
− | width:100%;
| |
− | margin:0 auto;
| |
− | padding:6% 0% 0% 0%;
| |
− | text-align:center;
| |
− | display:none;
| |
− | filter:alpha(opacity=77); /*IE*/
| |
− | -moz-opacity:0.77; /*Firefox*/
| |
− | opacity:0.77;/*其他浏览*/
| |
− | font-family:'Georgia';
| |
− | font-weight: 200;
| |
− | font-size:150%;
| |
− | letter-spacing:8px;
| |
− | line-height:70px;
| |
− | z-index:2;
| |
− | }
| |
− |
| |
− | </style>
| |
− | </head>
| |
− |
| |
− | <body>
| |
− |
| |
− | <div class="flip"><i class="fa fa-bars fa-3x"></i></div>
| |
− | <div class="panel">
| |
− | <p>HOME</p>
| |
− | <p>Project</p>
| |
− | <p>Human Practice</p>
| |
− | <p>Notebook</p>
| |
− | <p>Achievement</p>
| |
− | </div>
| |
− |
| |
− | </body>
| |
− | </html>
| |