当前位置：首页 → 问答吧 → 在使用css选项卡时出现了一个问题，希望各位看一下`

在使用css选项卡时出现了一个问题，希望各位看一下`

时间：2010-09-27

来源：互联网

问题是：当鼠标经过第一个和第二个切换的时候，会出现偏移现象，如果把下面的内容删除掉的话就不会出现这个问题，不是宽度原因...css里面main{margin:20px auto;根本不能居中，一居中就会有问题，而如果是margin:20px 150px;就不会出现偏移的现象，有哪位高手知道原因的？}

下面是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档-SH!</title>
<style type="text/css">
<!--
body{ font-family: "Trebuchet MS", Arial, '宋体'; font-size:12px; background:#eee;}
ul,li{margin:0px;padding:0px;}
li{list-style-type:none;}
select{ width:150px;}
input{ line-height:18px; letter-spacing:1px;}
.mian{width:850px; border:1px dotted #ccc;background:#fff; margin:20px 170px;}
.cont{padding-top:20px; padding-bottom:20px;}
.hidden{display:none;}
.scrolldoorFrame{width:597px;margin:10px auto;overflow:hidden;}
.scrollUl{ width:597px;border-bottom:2px solid #FF841A;overflow:hidden; font-size:14px; margin:0px; padding:0px;}
.scrollUl li{float:left; height:27px; width:80px; padding-right:21px; text-align:center; line-height:28px;}
.sd01{cursor

ointer; background:url(images/bj2_03.jpg) no-repeat left center; padding:0px; margin:0px; color:#FFFFFF; font:14px; font-weight: bold;}
.sd02{cursor

ointer; background:url(images/bj1_03.jpg) no-repeat left center; padding:0px; margin:0px; color:#FFFFFF; font:14px; font-weight: bold;}

/*第一层信息*/
.line_dotted{ width:100%; border-bottom:1px #CCCCCC dotted;  margin-bottom:15px;}
.title{ width:146px; text-align:center; background:url(images/bj3.jpg) no-repeat left bottom; height:27px; line-height:28px; color:#FFFFFF; font-size:14px; font-weight:bold; letter-spacing:2px;}
.line_solid{ width:100%; border-bottom:1px #CCCCCC solid; }
.star{ color:#FF0000;}
.lie{ padding-left:62px;}
.sele{ width:50px;}
.input{ width:150px;}
.header{ margin:20px 0px 20px 0px;}
.header div{ float:left;}
.img{ border:1px #999999 solid; padding:1px;}
-->
</style>

<script type="text/javascript">
function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("菜单层数量和内容层数量不一样!");
return false;
}
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;
_this.$(menus[i]).onmouseover = function(){
for(var j = 0 ; j < menus.length ; j++)
{
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
_this.$(menus[this.value]).className = openClass;
_this.$(divs[this.value]).style.display = "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
}
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["m01","m02","m03"],["c01","c02","c03"],"sd01","sd02");
SDmodel.sd(["mm01","mm02","mm03"],["cc01","cc02","cc03"],"sd01","sd02");
SDmodel.sd(["mmm01","mmm02","mmm03"],["ccc01","ccc02","ccc03"],"sd01","sd02");
}
</script>

</head>

<body>
<div class="mian">
<div class="scrolldoorFrame">

<ul class="scrollUl">
<li class="sd01" id="m01">修改信息</li>
<li class="sd02" id="m02">学习信息</li>
<li class="sd02" id="m03">修改密码</li>
</ul>


<div class="cont">
  <form id="form1" name="form1" method="post" action="">
  
<div id="c01">
   
   <div class="line_dotted"></div>
   
   <div class="title">修改信息</div>
   <div class="line_solid"></div>
   
   <div>
   <dl>
      <span>用户名：</span>
      <span>admin</span>
   </dl>

   <dl>
      <span>用户类型：</span>
      <span>
      <input name="" type="checkbox" value="" />学员 
      <input name="" type="checkbox" value="" />辅导教师 
      <input name="" type="checkbox" value="" />管理员
      </span>
   </dl>

   <dl>
      <span>身份证号：</span>
      <span>320511198409286639</span>
   </dl>

   <dl>
      <span>姓      名：</span>
      <span><select><option value="王五">王五</option></select></span>
      <span class="star">*</span>
      <span class="lie">性      别：</span>
      <span><select name="" class="sele"><option value="男">男</option></select></span>
      <span class="star">*</span>
   </dl>

   <dl>
   <span>民      族：</span>
   <span><select><option value="--选择所有--">--选择所有--</option></select></span>
   <span class="star">*</span>
   <span class="lie">出生日期：</span>
   <span class="input"><input type="text" value="1984-09-28" size="12"/>
   </span>
   </dl>

   <dl>
   <span>学      历：</span>
   <span><select><option value="--选择所有--">--选择所有--</option></select></span>
   <span class="star">*</span>
   <span class="lie">毕业院校：</span>
   <span class="input"><input type="text" value="安徽新华电脑专修学院" size="19"/></span>
   </dl>

   <dl>
   <span>所  在 市：</span>
   <span><select><option value="芜湖市">芜湖市</option></select></span>
   <span class="star">*</span>
   <span class="lie">所在区县：</span>
   <span><select name="select" id="select"><option value="戈江区">戈江区</option></select></span>
   <span class="star">*</span>
   </dl>

   <dl>
   <span>工作单位：</span>
   <span><select><option value="戈江区教育局教研室">戈江区教育局教研室</option></select></span>
   <span class="star">*</span>
   <span class="lie">职      称：</span>
   <span><select name="select" id="select"><option value="高级">高级</option></select></span>
   <span class="star">*</span>
   </dl>

   <dl>
   <span>任教学段：</span>
   <span><select><option value="小学">小学</option></select></span>
   <span class="star">*</span>
   <span class="lie">任教学科：</span>
   <span><select name="select" id="select"><option value="小学语文">小学语文</option></select></span>
   <span class="star">*</span>
</dl>

<dl>
   <span>个人简介：</span>
   <span><textarea cols="59" rows="4"></textarea>
   </span>
</dl>

<dl>
   <span>备      注：</span>
   <span><textarea name="" cols="59" rows="4"></textarea>
   </span>
</dl>

<dl>
   <span>固定电话：</span>
   <span><input name="textfield" type="text" id="textfield" size="30" /></span>
   <span class="star">*</span>
   <span>(提示：如(0510)6539-7873)</span>
</dl>

<dl>
   <span>移动电话：</span>
   <span><input name="textfield" type="text" id="textfield" size="30" /></span>
   <span class="star">*</span>
   <span>((提示：如13775884320)</span>
</dl>


<dl>
   <span>QQ/MSN：</span>
   <span><input name="textfield" type="text" id="textfield" size="30" /></span>
   <span class="star">*</span>
  </dl>

  <dl>
   <span>邮      箱：</span>
   <span><input name="textfield" type="text" id="textfield" size="30" /></span>
   <span class="star">*</span>
  </dl>

  <dl>
   <span>邮      编：</span>
   <span><input name="textfield" type="text" id="textfield" size="30" /></span>
   <span class="star">*</span>
  </dl>

  <dl>
   <span>通讯地址：</span>
   <span><input name="textfield" type="text" id="textfield" size="30" /></span>
   <span class="star">*</span>
  </dl>
</div>


<div class="title">修改信息</div>
<div class="line_solid"></div>

<div class="header">
  <div><img src="images/index_1_15.jpg" class="img"/></div>

  <div style="padding-left:10px; width:400px;">
<dl>当前头像</dl>

   <dl>
      <span><input name="" type="text" size="30" /></span>
      <span><input name="浏览" type="button" id="浏览" value="浏览"  style="height:24px; line-height:20px;"/></span>
   </dl>

<dl>
   支持 JPG、JPEG、GIF文件格式，最大4M。头像高度超出宽度1.5倍的部分自动压缩。
</dl>

<dl>
   <input name="image" type="image" src="images/index_2_18.jpg" width="106" height="37"/>
</dl>

</div>

</div>

</div></form>

<div id="c02" class="hidden" style="width:100%;">
这里放置学习信息内容
</div>

<div id="c03" class="hidden">
  这里放置修改密码内容
</div>

</div>
</div>
</div>

</body>
</html>

作者: 853950556 发布时间: 2010-09-27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档-SH!</title> <style type="text/css">  </style> <script type="text/javascript"> function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容层数量不一样!"); return false; } for(var i = 0 ; i < menus.length ; i++) { _this.$(menus[i]).value = i; _this.$(menus[i]).onmouseover = function(){ for(var j = 0 ; j < menus.length ; j++) { _this.$(menus[j]).className = closeClass; _this.$(divs[j]).style.display = "none"; } _this.$(menus[this.value]).className = openClass; _this.$(divs[this.value]).style.display = "block"; } } }, $ : function(oid){ if(typeof(oid) == "string") return document.getElementById(oid); return oid; } } window.onload = function(){ var SDmodel = new scrollDoor(); SDmodel.sd(["m01","m02","m03"],["c01","c02","c03"],"sd01","sd02"); SDmodel.sd(["mm01","mm02","mm03"],["cc01","cc02","cc03"],"sd01","sd02"); SDmodel.sd(["mmm01","mmm02","mmm03"],["ccc01","ccc02","ccc03"],"sd01","sd02"); } </script> </head> <body> <div class="mian"> <div class="scrolldoorFrame">  <ul class="scrollUl"> <li class="sd01" id="m01">修改信息</li> <li class="sd02" id="m02">学习信息</li> <li class="sd02" id="m03">修改密码</li> </ul>  <div class="cont"> <form id="form1" name="form1" method="post" action="">  <div id="c01">  <div class="line_dotted"></div>  <div class="title">修改信息</div> <div class="line_solid"></div>  <div> <dl> <span>用户名：</span> <span>admin</span> </dl> <dl> <span>用户类型：</span> <span> <input name="" type="checkbox" value="" />学员  <input name="" type="checkbox" value="" />辅导教师  <input name="" type="checkbox" value="" />管理员 </span> </dl> <dl> <span>身份证号：</span> <span>320511198409286639</span> </dl> <dl> <span>姓      名：</span> <span><select><option value="王五">王五</option></select></span> <span class="star">*</span> <span class="lie">性      别：</span> <span><select name="" class="sele"><option value="男">男</option></select></span> <span class="star">*</span> </dl> <dl> <span>民      族：</span> <span><select><option value="--选择所有--">--选择所有--</option></select></span> <span class="star">*</span> <span class="lie">出生日期：</span> <span class="input"><input type="text" value="1984-09-28" size="12"/> </span> </dl> <dl> <span>学      历：</span> <span><select><option value="--选择所有--">--选择所有--</option></select></span> <span class="star">*</span> <span class="lie">毕业院校：</span> <span class="input"><input type="text" value="安徽新华电脑专修学院" size="19"/></span> </dl> <dl> <span>所  在 市：</span> <span><select><option value="芜湖市">芜湖市</option></select></span> <span class="star">*</span> <span class="lie">所在区县：</span> <span><select name="select" id="select"><option value="戈江区">戈江区</option></select></span> <span class="star">*</span> </dl> <dl> <span>工作单位：</span> <span><select><option value="戈江区教育局教研室">戈江区教育局教研室</option></select></span> <span class="star">*</span> <span class="lie">职      称：</span> <span><select name="select" id="select"><option value="高级">高级</option></select></span> <span class="star">*</span> </dl> <dl> <span>任教学段：</span> <span><select><option value="小学">小学</option></select></span> <span class="star">*</span> <span class="lie">任教学科：</span> <span><select name="select" id="select"><option value="小学语文">小学语文</option></select></span> <span class="star">*</span> </dl> <dl> <span>个人简介：</span> <span><textarea cols="59" rows="4"></textarea> </span> </dl> <dl> <span>备      注：</span> <span><textarea name="" cols="59" rows="4"></textarea> </span> </dl> <dl> <span>固定电话：</span> <span><input name="textfield" type="text" id="textfield" size="30" /></span> <span class="star">*</span> <span>(提示：如(0510)6539-7873)</span> </dl> <dl> <span>移动电话：</span> <span><input name="textfield" type="text" id="textfield" size="30" /></span> <span class="star">*</span> <span>((提示：如13775884320)</span> </dl> <dl> <span>QQ/MSN：</span> <span><input name="textfield" type="text" id="textfield" size="30" /></span> <span class="star">*</span> </dl> <dl> <span>邮      箱：</span> <span><input name="textfield" type="text" id="textfield" size="30" /></span> <span class="star">*</span> </dl> <dl> <span>邮      编：</span> <span><input name="textfield" type="text" id="textfield" size="30" /></span> <span class="star">*</span> </dl> <dl> <span>通讯地址：</span> <span><input name="textfield" type="text" id="textfield" size="30" /></span> <span class="star">*</span> </dl> </div>  <div class="title">修改信息</div> <div class="line_solid"></div>  <div class="header"> <div><img src="images/index_1_15.jpg" class="img"/></div> <div style="padding-left:10px; width:400px;"> <dl>当前头像</dl> <dl> <span><input name="" type="text" size="30" /></span> <span><input name="浏览" type="button" id="浏览" value="浏览" style="height:24px; line-height:20px;"/></span> </dl> <dl> 支持 JPG、JPEG、GIF文件格式，最大4M。头像高度超出宽度1.5倍的部分自动压缩。 </dl> <dl> <input name="image" type="image" src="images/index_2_18.jpg" width="106" height="37"/> </dl> </div> </div>  </div></form> <div id="c02" class="hidden" style="width:100%;"> 这里放置学习信息内容 </div> <div id="c03" class="hidden"> 这里放置修改密码内容 </div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: zhaoyan860222 发布时间: 2010-09-27

<dl>
   <span>通讯地址：</span>
   <span><input name="textfield" type="text" id="textfield" size="30" /></span>
   <span class="star">*</span>
  </dl>
你这种写法让人们感觉普及WEB标准的任务很重。。

作者: zhaoyan860222 发布时间: 2010-09-27

在使用css选项卡时出现了一个问题，希望各位看一下`

热门阅读

热门下载