WeChatManager    

div与span有什么区别

  HTML部分
 
  <!DOCTYPEhtml>
 
  <head>
 
  <metacharset="utf-8"/>
 
  <title>WeChatManager</title>
 
  <linkhref="css/index.css"rel="stylesheet"type="text/css">
 
  <scriptsrc="http://code.jquery.com/jquery-1.10.2.min.js">
 
  </script>
 
  <script>
 
  $(document).ready(function(){
 
  $(document).keyup(function(event){
 
  if(event.keyCode==13){
 
  $.ajax({
 
  type:"POST",
 
  url:"ok.php",
 
  data:"code="+$("#in").val(),
 
  success:function(msg){
 
  $("ul").append("<li>"+$("#in").val()+"</li>");//将输入的输出到界面
 
  $("ul").append("<li>"+msg+"</li>");//获取返回值并输出
 
  $("#in").val("");//清空输入框
 
  $("#text").scrollTop($("#text").scrollTop()+32);//滚动条拉到最下面,显示出输入框
 
  }
 
  });
 
  }
 
  });
 
  $("#in")[0].focus();
 
  });
 
  </script>
 
  </head>
 
  <body>
 
  <divclass="window">
 
  <divclass="title">
 
  <imgsrc="css/1.webp">
 
  <span>WechatDos</span>
 
  </div>
 
  <divid="text">
 
  <ul>
 
  <li>Welcome...</li>
 
  <li>login:</li>
 
  </ul>
 
  <inputtype="text"name=""id='in'>
 
  </div>
 
  </div>
 
  </body>
 
  </html>
 
  CSS部分
 
  @charset"utf-8";
 
  body{
 
  background-color:#396DA5;
 
  margin:0px;
 
  padding:0px;
 
  color:#fff;
 
  font:"微软雅黑";
 
  font-size:14px;}
 
  .window{
 
  border:6px#cccoutset;
 
  width:680px;
 
  height:442px;
 
  background-color:#000;
 
  position:absolute;
 
  top:40px;
 
  left:68px;
 
  overflow:hidden}
 
  .title{
 
  background-color:#08246B;
 
  padding:2px;}
 
  #text{
 
  background-color:#000;
 
  border-top:#cccoutset2px;
 
  height:420px;
 
  overflow-y:scroll;}
 
  ul{
 
  margin:0px;
 
  padding:0px;
 
  list-style:none;}
 
  input{
 
  background-color:#000;
 
  border:0;
 
  color:#fff;
 
  outline:none;
 
  共同点:
 
  DIV标签和SPAN标签是将一些内容当成一个整体进行处理,比如,整体隐藏,整体移动。类似一个盒子一样的东西。这样做可以精简代码,提高效率。
 
  不同点:
 
  1、div是将内容放到一个矩形的区块中,随意移动会影响布局。而span只是把内容定义成一个整体进行操作,不影响布局和显示。
 
  2、div一般用于排版,而span一般用于局部文字的样式。
 
  /*font-size:12px;*/
 
  width:100%}






本文转载自中文网

推荐阅读