精英盒子 -> 程序设计 -> 没事又写了个蛋疼的网页 [打印本页]

scxy 2012-06-23 19:16

没事又写了个蛋疼的网页

就当做练习吧,以前学的东西都快忘了。

ps.英语不好,请勿吐槽。

  1. <!DOCTYPE html>
    <html>
    <head>
      <title>Test</title>
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
      
      <script>
       $(document).ready(function(){
        $(".test1").click(function(){
         $("#test2").hide();
         $("#about").hide();
         $("#test1").show(1000);
        });
        $(".test2").click(function(){
         $("#test1").hide();
         $("#about").hide();
         $("#test2").show(1000);
        });
        $(".about").click(function(){
         $("#test2").hide();
         $("#test1").hide();
         $("#about").show(1000);
        });
       });
      </script>
      
      <style>
       a{color:#0010D0;}
       a:hover{color:green;)
      </style>
      
    </head>
    <body style="text-align:center;font-family:sans-serif, serif;">
      <div style="border:1px solid gray;margin:20px auto;width:600px;height:350px;">
       <div style="margin:auto;width:580px;height:334px;">
        <h1 style="margin-top:8px;font-weight:500;word-spacing:3px;">Test</h1>
        <span style="height:50px;"></span>
        <a class="test1" style="margin-right:120px;" href="#">Test1</a>
        <a class="test2" style="margin-right:120px;" href="##">Test2</a>
        <a class="about" href="###">About</a>
        <br/><hr/>
        <div id="test1" style="display:none;text-align:left;">
         <button class="hide">Hide it!</button> <button class="show">You can show it again.</button>
         <br/>
         <button class="fout">fadeOut it.</button> <button class="fin">fadeIn it.</button>
         <br/>
         <p class="text" style="display:inline;">TextTextTextTextText.</p>
         <script>
          $(".hide").click(function(){    $(".text").hide(1000);    });    $(".show").click(function(){    $(".text").show(1000);    });    $(".fin").click(function(){    $(".text").fadeIn(1000);    });    $(".fout").click(function(){    $(".text").fadeOut(1000);    });
        </script>
        </div>
        <div id="test2" style="display:none;text-align:left;">
         <p>Test2: animate.</p><br/>
         <button class="anim1" style="width:150px;">Begin animate.</button> <button class="anmi2">Animate 2nd.</button>
         <br/>
         <div class="text2" style="width:50px;height:50px;background-color:#98bf21;position:relative;"></div>
         <script>
          $(".anim1").click(function(){    $(".text2").animate({height:150},"slow");    $(".text2").animate({width:150},"slow");    $(".text2").animate({height:50},"slow");    $(".text2").animate({width:50},"slow");    });    $(".anmi2").click(function(){    $(".text2").animate({left:300},"slow");    $(".text2").animate({left:0},"slow");    });
         </script>
        </div>
        <div id="about" style="display:none;text-align:left;">    This is a test Html file. It uses a lot of language, like 'HTML', 'CSS' and 'jQuery' (In fack, it is JavaScript. )<br/>    Author: <span title="Simple_Cxy">Scxy</span><br/>    Createed Date: June 22nd.
        </div>
       </div>
      </div>
    </body>
    </html>



scxy 2012-06-23 19:17
写得确实有些蛋疼,css的写在style属性里,js还没学好,所以用了jQuery。

pdl 2012-06-23 19:48
没有<!DOCTYPE,<html>也没有xmlns

jybox 2012-06-23 20:04
"js还没学好,所以用了jQuery"
这是什么鬼怪逻辑


另外话说新版本的lightPHP即将横空出世!!!

scxy 2012-06-23 20:10
刚发现& nbsp;并没被转义,直接显示出来

jybox 2012-06-23 22:04
scxy:刚发现& nbsp;并没被转义,直接显示出来[表情]  (2012-06-23 20:10) 

用好jq自然需要学好js

而且实际工作中很少有人直接用js的底层接口的,一般都是用jq,有jq这种好东西,为什么不用它?

pdl 2012-06-25 17:26
<!DOCTYPE html>会让浏览器以为是html5

scxy 2012-06-25 18:53
pdl:<!DOCTYPE html>会让浏览器以为是html5 (2012-06-25 17:26) 

http://i.wanz.im/2010/05/28/why_doctype_html/

这只是说向后兼容html5, <!DOCTYPE html>即会用标准模式, 再说, 很多大站也都是这样写的

jybox 2012-06-25 20:45
scxy:http://i.wanz.im/2010/05/28/why_doctype_html/
这只是说向后兼容html5, <!DOCTYPE html>即会用标准模式, 再说, 很多大站也都是这样写的 (2012-06-25 18:53) 

貌似是正解...

jybox 2012-06-25 20:45
除了没指定编码之外,我没挑出什么硬伤.....

指定编码:(<head>后面)
<meta charset="utf-8" />

jybox 2012-06-25 20:54
jquery最新版已经1.7.2了亲

scxy 2012-06-26 17:34
jybox:jquery最新版已经1.7.2了亲 (2012-06-25 20:54) 

额, 我是直接copy w3c的那个链接...

jybox 2012-06-26 18:17
scxy:额, 我是直接copy w3c的那个链接...[表情] (2012-06-26 17:34) 

https://raw.github.com/jybox/JYLib/989a4ff0780073c42371dad37ffa6ea97550640d/LightPHP/lp-style/jquery/jquery-1.7.2.js


这个吧...

dditty 2012-07-04 17:31
233……




Powered by phpwind v8.7 Code ©2003-2011 phpwind
Time 0.049309 second(s),query:5 Gzip enabled