您的位置：首页 > 百科管理 > 详情

html左右布局模板-html上下左右

原创：找图网 2023-08-11 09:01:16

在网页布局中,可以将页面内容模块分为左右两部分的布局方式

<!DOCTYPE html>

<head>

body,html {

margin: 0;

padding: 0;

height: 100%;

color: #fff;

}

.left,

.right {

float: left;

width: 50%;

height: 100%;

}

.left { background-color: red; }

.right { background-color: #000; }

</style>

</head>

<body>

左边部分

</div>

右边部分

</div>

</body>

</html>

html上下左右

html实现上下左右四个板块,可以通过以下代码实现,如果是新手的话,建议使用DW里面的table制作,更加方便快捷

<frameset rows="136,*,18" cols="*" frameborder="no" border="0"

framespacing="0">

<frame src="LoginFile/" name="topFrame"

scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />

<frameset rows="*" cols="182,*" framespacing="0" frameborder="no"

border="0">

<frame src="LoginFile/" name="leftFrame"

scrolling="auto" noresize="noresize" id="leftFrame" title="leftFrame" />

<frame src="" name="iframe" id="iframe" title="iframe"

</frameset>

<frame src="LoginFile/"

name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame"

title="bottomFrame" />

</frameset>

</body>

</noframes>

html布局策略

<style>

.header { height:80px; }

.container .wrap { width:1000px; margin:0 auto; background:#0f0; border:2px solid #00f; }

.hTit { height:100px; font:700 26px 'Arial'; line-hieght:100px; text-align:center; }

.fArea .sub { float:left; width:700px; }

.fArea .sub { right; width:304px; }

.about .pic { height:100px; padding-bottom:10px; }

.list { float:left; width:335px; height:auto !important; height:700px; min-hieght:700px; padding-left:10px; }

.ad_1 { height:300px;}

</style>

</div>

</div>

</div>