div 鼠标悬浮 加阴影特效+ul标签实现导航菜单+js 导出excel
CSS3 box-shadow 属性
https://www.runoob.com/cssref/css3-pr-box-shadow.html
.xiaomi{
width:300px;
height:300px;
background:#FFFFFF;
}
.xiaomi:hover{
position:relative;
top:-10px;
left:-10px;
box-shadow: 10px 10px 5px #888888;
}
导航条
js导出excel
完整代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="./jquery-1.8.2.js" language="javascript" type="text/javascript"></script> 7 </head> 8 <style> 9 body{ 10 background:#F4F4F3; 11 padding:20px; 12 } 13 .xiaomi{ 14 width:300px; 15 height:300px; 16 background:#FFFFFF; 17 } 18 .xiaomi:hover{ 19 position:relative; 20 top:-10px; 21 left:-10px; 22 box-shadow: 10px 10px 5px #888888; 23 } 24 * { 25 padding:0; 26 margin:0; 27 } 28 li { 29 30 list-style: none; 31 } 32 .nav { 33 margin:0 auto; 34 35 } 36 .nav >li{ 37 float: left; 38 } 39 ul a { 40 width:100px; 41 height:50px; 42 display:block; 43 text-decoration:none; 44 background-color:black; 45 text-align:center; 46 line-height:50px; 47 color:white; 48 } 49 .text-center { 50 display:none; 51 position:absolute; 52 } 53 54 .text-center li a:hover { 55 background:green 56 } 57 .nav .text-menu:hover .text-center { 58 display:block; 59 } 60 #tables{ 61 width: 300px; 62 height: 200px; 63 text-align: center; 64 border: 1px solid #999999; 65 } 66 th,tr,td{ 67 border: 1px solid #999; 68 } 69 70 </style> 71 <script> 72 $(function(){ 73 }); 74 </script> 75 <body> 76 <div class="xiaomi"> 77 78 </div> 79 <ul class="nav"> 80 <li class="text-menu"><a href="">书名</a> 81 <ul class="text-center"> 82 <li><a href="#">《三国演义》</a></li> 83 <li><a href="#">《红楼梦》</a></li> 84 <li><a href="#">《西游记》</a></li> 85 </ul> 86 </li> 87 <li class="text-menu"><a href="#">作家</a> 88 <ul class="text-center"> 89 <li><a href="#">三毛</a></li> 90 <li><a href="#">吴承恩</a></li> 91 92 </ul> 93 </li> 94 <li class="text-menu"><a href="#">收藏</a> 95 96 </ul> 97 <div> 98 <a id="dlink" style="display:none;"></a> 99 <input id="button" type="button" value="Export to Excel"> 100 <table id="tables"> 101 <caption></caption> 102 <thead> 103 <tr> 104 <th>姓名</th> 105 <th>性别</th> 106 <th>年龄</th> 107 <!-- <th title="ESC取消保存,Enter保存">取值</th>--> 108 </tr> 109 </thead> 110 <tbody> 111 <tr index="0"> 112 <td>小红</td> 113 <td>女</td> 114 <td>12</td> 115 </tr> 116 <tr index="1"> 117 <td>小明</td> 118 <td>男</td> 119 <td>13</td> 120 </tr> 121 <tr index="2"> 122 <td>小君</td> 123 <td>女</td> 124 <td>14</td> 125 </tr> 126 </tbody> 127 </table> 128 </div> 129 <script> 130 var tableToExcel = (function() { 131 var uri = 'data:application/vnd.ms-excel;base64,', 132 template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', 133 base64 = function(s) { 134 return window.btoa(unescape(encodeURIComponent(s))) 135 }, 136 format = function(s, c) { 137 return s.replace(/{(\w+)}/g, function(m, p) { 138 return c[p]; 139 }) 140 }; 141 return function(table, name, filename) { 142 if (!table.nodeType) table = document.getElementById(table); 143 console.log(table.innerHTML) 144 var ctx = { 145 worksheet: name || 'Worksheet', 146 table: table.innerHTML 147 } //此时的innerHTML数据可以自己自定义 比如json转化 只要值要数据符合即可 148 149 document.getElementById("dlink").href = uri + base64(format(template, ctx)); 150 document.getElementById("dlink").download = filename; 151 document.getElementById("dlink").click(); 152 } 153 }); 154 155 var id = "tables", 156 worksheetName = 'sheet', 157 workName = "demo.xls"; 158 159 document.getElementById('button').onclick = function() { 160 var download = tableToExcel(); 161 download(id, worksheetName, workName) 162 }; 163 </script> 164 </body> 165 </html>
注:
<caption> 标签定义表格的标题。
<caption> 标签必须直接放置到 <table> 标签之后。