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>

    效果如图:

  • 相关阅读:
    浅谈缓存管理
    [Architecture Pattern] Database Migration (上)
    knockout.js的学习笔记4
    cenOS5.5安装oracle10g(傻瓜篇)
    SportsStore:管理 — 精通ASP.NET MVC 3
    ASP.NET MVC下的异步Action的定义和执行原理
    基于EF 4.3.1 Code First的领域驱动设计实践案例
    asp.net缓存
    《Pro ASP.NET MVC 3 Framework》部署
    Asp.Net MVC 3.0【Hello World!】
  • 原文地址:https://www.cnblogs.com/YeYunRong/p/6132338.html
Copyright © 2011-2022 走看看