第十九天和二十天学习笔记-CSDN博客

主要学了js代码:

第一个是用用js代码写表格,不要问我为什么这么无聊就是我的老师很无聊

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>输出表格</title>
 6     <meta name="keywords" content="关键字列表" />
 7     <meta name="description" content="网页描述" />
 8     <link rel="stylesheet" type="text/css" href="" />
 9     <style type="text/css">
10         table{
11             margin:0px auto;
12         }
13         ._title{
14             color:red;
15             padding:10px 0;
16             margin:0px auto;
17         }
18         th{
19             padding-left:40px;
20         }
21         td,th{
22             border:1px solid #000;
23             /*display:block;*/
24         }
25     </style>
26 </head>
27 <body>
28         <script type="text/javascript">
29             document.write("<table cellspacing = '0'>");
30 
31 
32             document.write("<tr>");
33             document.write("<th class = '_title' colspan='4'>");
34             document.write("张三丰个人信息");
35             document.write("</th>");
36             document.write("</tr>");
37 
38 
39             document.write("<tr>");
40 
41             document.write("<th>");
42             document.write("姓名:");
43             document.write("</th>");
44             document.write("<td>");
45             document.write("张三丰");
46             document.write("</td>");
47             document.write("<th>");
48             document.write("性别:");
49             document.write("</th>");
50             document.write("<td>");
51             document.write("男");
52             document.write("</td>");
53 
54     
55             document.write("</tr>");
56 
57             document.write("<tr>");
58             document.write("<th>");
59             document.write("年龄:");
60             document.write("</th>");
61             document.write("<td>");
62             document.write("20岁");
63             document.write("</td>");
64             document.write("<th>");
65             document.write("学历:");
66             document.write("</th>");
67             document.write("<td>");
68             document.write("大专");
69             document.write("</td>");
70             document.write("</tr>");
71 
72             document.write("<tr>");
73             document.write("<th>");
74             document.write("毕业年龄:　");
75             document.write("</th>");
76             document.write("<td>");
77             document.write("2016/12/4");
78             document.write("</td>");
79             document.write("<th>");
80             document.write("毕业学校:　");
81             document.write("</th>");
82             document.write("<td>");
83             document.write("北京巴拉巴拉小魔仙");
84             document.write("</td>");
85             document.write("</tr>");
86 
87             document.write("</table>");
88 
89         </script>
90 </body>
91 </html>

以下是效果图:

==============================================

然后~恩今天的测试

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>网页标题</title>
 6     <style type="text/css">
 7         *{margin:0;padding:0;}
 8         ._main{
 9             width:100%;
10         }
11         ._nav{
12             width:500px;
13             margin:0px auto;
14             border-bottom:2px solid red;
15         }
16         h4{
17             padding-left:20px;
18             width:80px;
19             /*display:block;*/
20         }
21         ._nav ul li{
22             float:left;
23             width:100px;
24             list-style-type:none;
25             text-align:center;
26             height:30px;
27             line-height:30px;
28         }
29         ._clear{
30             clear:both;
31         }
32         a{
33             text-decoration: none;
34             display:block;
35         }
36 
37         a:link,a:visited{
38             color:#000;
39         }
40         a:hover{
41             color:#fff;
42             background-color:red;
43         }
44         ._center{
45             width:500px;
46             margin:0px auto;
47             border-top:2xp solid red;
48         }
49         ._center ul{
50             background:url(Images/bg.gif)no-repeat left 7px;/*简写属性*/
51         }
52         ._center ul li{
53             height:26px;
54             line-height:26px;
55             list-style-type:none;
56             padding-left:22px;
57             font-size:14px;
58         }
59     </style>
60 </head>
61 <body>
62     <div class = "_main">
63         <div class = "_nav">
64             <ul>
65                 <li><h4>新闻排行</h4></li>
66                 <li><a href = "#">国内</a></li>
67                 <li><a href = "#">国际</a></li>
68                 <li><a href = "#">社会</a></li>
69                 <li><a href = "#">网评</a></li>
70             </ul>
71             <div class = "_clear"></div>
72             </div>
73             <div class = "_center">
74                 <ul>
75                     <li><a href = "#">这是一个链接...</li>
76                     <li><a href = "#">这是一个链接...</li>
77                     <li><a href = "#">这是一个链接...</li>
78                     <li><a href = "#">这是一个链接...</li>
79                     <li><a href = "#">这是一个链接...</li>
80                     <li><a href = "#">这是一个链接...</li>
81                     <li><a href = "#">这是一个链接...</li>
82                     <li><a href = "#">这是一个链接...</li>
83                     <li><a href = "#">这是一个链接...</li>
84                 </ul>
85             </div>
86             <div class = "_clear"></div>
87         </div>
88     </div>
89 </body>
90 </html>

以下是效果图:

===================================================

接下来是使用三元运算符输出最大数:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>三目运算符求最大数</title>
 6     <meta name="keywords" content="关键字列表" />
 7     <meta name="description" content="网页描述" />
 8     <link rel="stylesheet" type="text/css" href="" />
 9     <style type="text/css"></style>
10     <script type="text/javascript">
11         var index_1 =500,index_2 = 20000,index_3 = 10;
12         document.write((index_1>index_2)?(index_1>index_3?index_1 : index_3) : (index_3>index_2?index_3: index_2));
13     </script>
14 </head>
15 <body>
16 
17 </body>
18 </html>