为啥点击按钮后,table和td的样式不起作用呢

Original 2019-03-24 00:02:39 279
abstract:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试</title>    <style>    

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>测试</title>
   <style>
     *{
       font-family:微软雅黑;
     }
     input[type='button']{
       width:400px;
       height:54px;
       border:none;
       outline:none;
       background:#ff0036;
       display:block;
       margin:400px auto;
       color:white;
       font-size:16px;
     }
     input[type='button']:hover{box-shadow:0 1px 5px red;}

     table{border:1px solid #9bbb59;margin:20px auto;border-collapse:collapse;}
     caption{font-size:20px;color:#333;margin-bottom:10px;font-weight:bold;}
     td{border:1px solid #9bbb59;padding:10px 20px 10px 12px;}
   </style>

</head>
<body>
<input type="button" value="点击查看总结" onclick="total()">

<script>
 function total(){
   var str = '<table>';
       str += '<caption>事件总结</caption>';
       str += '<tr><td colspan="2">鼠标事件</td></tr>';
       str += '<tr><td>onclick</td><td>鼠标点击</td></tr>';
       str += '<tr><td>ondblclick</td><td>鼠标双击</td></tr>';
       str += '<tr><td>onmousedown</td><td>鼠标按下</td></tr>';
       str += '<tr><td>onmouseup</td><td>鼠标松开</td></tr>';
       str += '<tr><td colspan="2">光标事件</td></tr>';
       str += '<tr><td>onmousemove</td><td>光标移动</td></tr>';
       str += '<tr><td>onmouseover</td><td>光标移入</td></tr>';
       str += '<tr><td>onmouseout</td><td>光标移出</td></tr>';
       str += '<tr><td colspan="2">按键事件</td></tr>';
       str += '<tr><td>onkeypress</td><td>按键按下并松开</td></tr>';
       str += '<tr><td>onkeydown</td><td>按键按下</td></tr>';
       str += '<tr><td>onkeyup</td><td>按键松开</td></tr>';
       str += '<tr><td colspan="2">焦点事件</td></tr>';
       str += '<tr><td>onfocus</td><td>获取焦点</td></tr>';
       str += '<tr><td>onblur</td><td>失去焦点</td></tr>';
       str += '<tr><td>onchange</td><td>域的内容被改变且此域失去焦点</td></tr>';
       str += '<tr><td colspan="2">其他事件</td></tr>';
       str += '<tr><td>onload</td><td>预加载</td></tr>';
       str += '<tr><td>onsubmit</td><td>提交确认</td></tr>';
       str += '</table>';
   document.write(str);
 }
</script>
</body>
</html>

Correcting teacher:灭绝师太Correction time:2019-03-25 09:28:27
Teacher's summary:不知道你的练习目的是什么,下次不要这样输出...好好看基础知识

Release Notes

Popular Entries