1、首选看一下html代码:
html代码:
<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
这种方法是借助于负的margin来实现的,首先在中间列定好固定值,因为此值是不会在改变的,接着对其进行左浮动;那么关键地主是在左右边栏设置地方,这种方法是将其都进行50%的宽度设置,并加上中负的左边距,此负的左边距最理想的值是中间栏宽度的一半加上1px,这样一来,左右边栏内容无法正常显示,那是因为对他们进行了负的左边距操作,现在只需要在左右边栏的内层div.inner将其拉回来。
2、css样式写法如下:
#left,
#right {
float: left
margin: 0 0 0 -271px
width: 50%
}
#main {
width: 540px
float: left
background: green
}
.inner {
padding: 20px
}
#left .inner,
#right .inner {
margin: 0 0 0 271px
background: orange
}
3、具体效果如下:
这个是一个鼠标移动事件,你只写了一个鼠标接触到的事件,而没有写鼠标离开时的事件所以就这样咯 鼠标接触是的事件onmouseover 鼠标离开时事件onmouseout,你是写了一个onmouseover事件 少了一个onmouseout的事件,在onmouseout事件里面写把下拉菜单的下拉部分隐藏了 就可以了1楼说的是正确的(规范的)代码但IE5/6有BUG 使这段代码在IE5/6不起作用(IE7/E8都没问题)
因此要使用其他方法
其中一种就是楼主使用的text居中
不过这个代码在Firefox和IE7/8又会失效(因为这是不规范的代码)
所以要用另一个更通用的方法--负边距
left:50%
width:800px
margin-left:-400px//请注意 边距和定位的方向要一致(同为左或右) 值是宽度的一半
实际上这里就是把元素的一边定位在网页中间 然后通过设置边距把超出的部分拉回来