zoukankan      html  css  js  c++  java
  • 第十九天和二十天学习笔记

    主要学了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>

    效果如图:

  • 相关阅读:
    Core Animation 文档翻译—附录C(KVC扩展)
    Core Animation 文档翻译—附录B(可动画的属性)
    Core Animation 文档翻译—附录A(Layer样貌相关属性动画)
    Core Animation 文档翻译 (第八篇)—提高动画的性能
    Core Animation 文档翻译 (第七篇)—改变Layer的默认动画
    Core Animation 文档翻译 (第六篇)—高级动画技巧
    Core Animation 文档翻译 (第五篇)—构建Layer的层次结构
    用Markdown快速排版一片文章
    Core Animation 文档翻译 (第四篇)—让Layer的content动画起来
    Core Animation 文档翻译(第三篇)—设置Layer对象
  • 原文地址:https://www.cnblogs.com/YeYunRong/p/6132338.html
Copyright © 2011-2022 走看看