这个js小部件中的css怎么了?

时间:2011-07-25 13:32:02

标签: javascript css widget

请查看http://jsfiddle.net/tMxmp/

为什么图片td的图片尺寸过大。

大小应该像100px,但它就像4000px。

正在应用的css规则是

   var style="<style type='text/css'>";



//div rules
   style+="#w_23522{";
   style+="width:1000px;";
   //style+="margin: 2px auto;";
   //style+="overflow: hidden;";
   style+="}";

   //table rules
   style+="#w_23522 .w_23522_table{";
   style+="width:1000px;";
   style+="background:#ffff60;";
   style+="border:5px solid #ff2020 !important;";
   style+="}";

   //td rules
   style+="#w_23522 .w_23522_table td{";
   //style+="text-align: center;";
   style+="padding:0px !important;";
   style+="}";

   //article rules
   style+="#w_23522 .w_23522_article{";
   //style+="text-align: center;";
   style+="margin: 0 auto;";
   style+="width: 100px;";
   style+="}";

   //text rules
   style+="#w_23522 .w_23522_text{";
   style+="width:100px;";
   style+="text-align: center;";
   style+="font-family:Arial, Helvetica, sans-serif;";
   style+="font-size:13px !important;";
   style+="color:#0000cc;";
   style+="text-transform:normal;";
   style+="text-decoration:none;";
   style+="font-weight:normal !important;";
   style+="padding: 2px;";
   //style+="font-color:white;";
   style+="}";

   //link rules
   style+="#w_23522 .w_23522_text a{";
   style+="text-align: center;";
   style+="font-family:Arial, Helvetica, sans-serif;";
   style+="font-size:13px !important;";
   style+="color:#0000cc;";
   style+="text-transform:normal;";
   style+="text-decoration:none;";
   style+="font-weight:normal !important;";
   style+="padding: 2px;";
   style+="}";

   //hover link rules
   style+="#w_23522 .w_23522_text a:hover{";
   style+="font-family:Arial, Helvetica, sans-serif;";
   style+="font-size:13px !important;";
   style+="color:#0000cc;";
   style+="text-transform:normal;";
   //changed the decoration so the links get an underline
   style+="text-decoration:underline;";
   style+="font-weight:normal !important;";
   style+="padding: 2px;";
   style+="text-align: center;";
   style+="}";

   //image rules
   style+="#w_23522 img{";
   style+="text-align: center;";
   style+="width: 100px;";
   style+="height: 75px;";
   style+="border: 3px solid #2020d2;";
   style+="padding: 2020px !important;";
   style+="margin: 2px 0px 0px 0px;";
   style+="}";

   //disabled text rules
   //style+="#w_23522 .w_23522_text{";
   //style+="width:100px;";
   //style+="text-align:center;";
   //style+="line-height:1.1 !important;";
   //style+="}";

   //spacing rules
   style+=".w_23522_space{";
   style+="height:10px;";
   style+="}";
   style+=".w_23522_space2{";
   style+="height:2px;";
   style+="}";

   style+="</" + "style>";

1 个答案:

答案 0 :(得分:1)

在此外部文件中,您将生成以下代码:

#w_23522 .w_23522_table {
  width:1000px;
}

它指的是表类。

然后你生成这个:

#w_23522 img {
  padding: 2020px !important;
}

除了彻底的混乱之外,你期望发生什么?