html两栏布局怎么设置

html-css013

html两栏布局怎么设置,第1张

可以用flex,float,table等方式实现。

flex设置方式相对比较简单，只要根据需要，对内部的两部分内容分开就可以了。

float设置方式要考虑左右两部分的内容，并且要记得清除浮动，以免影响显示。

table方式可以设置两边的内容都是单元格。

还有其他的实现方式，可以根据实际项目进行选择。

如何实现网页的左右分栏：

1、一个总页面包含了3个iframe

2、3个iframe是从左到右依次排布，分别是左侧树状，右侧列表区，中间的控制页代码如下参考：

<body>

<div onclick="changeWin()">

<p><img src='' name="" id="" style="cursor:hand" vertical-align="middle"></p><!--这个是中间的那个带有小三角的图片-->

</div>

</body>

<script>

function changeWin(){

if( parent.frame.cols != "0,6,*"){

document.all.ctrlimg.src="../images/showframe.gif"

parent.frame.cols = "0,6,*"

} else {

document.all.ctrlimg.src="../images/closeframe.gif"

parent.frame.cols = "210,6,*"

}

}

</script>

此乃层的隐藏与显示也，

一、点击左边的缩进图片，左边栏收缩

二、实现的思路

1、图片作为按扭，点击图片触发层的显示和收缩，图片代码如下：

<A href="javascript:show()"><IMG src="image/fclose.gif" align="absmiddle" border="0"></A>

三、源代码

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<TITLE>收缩左边栏效果</TITLE>

<STYLE type="text/css">

td{font-size:12pxline-height:22px}

.red{color: #FF0000}

</STYLE>

<SCRIPT language="JavaScript">

function show(){

if(document.getElementById("left").style.display=='none'){ //判断目前左边栏的状态（显示、隐藏）

document.getElementById("left").style.display='block'//显示左边栏

}

else{document.getElementById("left").style.display='none'//隐藏左边栏

}

}

</SCRIPT>

</HEAD>

<BODY>

<TABLE width="98%" border="0" cellspacing="0" cellpadding="0" align="center">

<TR>

<TD id="left" width="200">点点右边的收缩按钮，看看我是不是进去了！</TD>

<TD width="8" style="border-right:1 #cccccc solid"><A href="javascript:show()"><IMG src="image/fclose.jpg" align="absmiddle" border="0"></A></TD>

<TD valign="top">右侧</TD>

</TR>

</TABLE>

</BODY>

</HTML>