如何定义“CSS”代码,让“DIV”逆顺排列?

html-css014

如何定义“CSS”代码,让“DIV”逆顺排列?,第1张

如果是静态的,就直接按你要的顺序写好;

如果是动态的,就写程序脚本控制;

CSS只能控制水平方向的顺序倒序,就是添加一个float的方向。但是垂直方向的无法控制。

CCS如何设置列表的横排或者竖排

请看案例:

让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起来,这样就在一行了。

下面是简单的代码实现,仅供参考:

<style>

* {margin:0pxpadding:0px}

li {list-style:nonewidth:100pxheight:30pxfont-size:14pxtext-align:leftline-height:30pxborder:1px solid #000position:relative}

.box>li {float:leftposition:relative}

.son {position:absolutetop:30pxleft:-1pxwidth:306px}

.son>li {float:left} /*浮动后,二级菜单就在一行了*/

.grason {position:absolutetop:-1pxleft:100px}

.son,.grason {display:none}

.active {display:blockbackground:#FF0}

</style>

<script>

window.onload=function(){

var aLi = document.getElementsByTagName('li')

for(var i=0i<aLi.lengthi++)

{

/*给一级菜单加鼠标移入,移出事件,让二级菜单显示,隐藏*/

aLi[i].onmouseover = function(){

this.className = 'active'

var oSon = this.getElementsByTagName('ul')[0]

if(oSon)

{

oSon.style.display='block'

}

}

aLi[i].onmouseout = function(){

this.className = ''

var oSon = this.getElementsByTagName('ul')[0]

if(oSon)

{

oSon.style.display='none'

}

}

}

}

</script>

</head>

<body>

<ul class="box">

<li>首页</li>

<li>公司简介

<!--创建的二级菜单-->

<ul class="son">

<li>大事件</li>

<li>领导致辞</li>

<li>企业文化</li>

</ul>

</li>

<li>联系我们</li>

<li>产品显示</li>

</ul>

</body>