CSS网页规划实例代码:左侧定宽右侧自顺应宽网页规划

csstpeixun 2013-05-03

网页制造aiyiweb文章简介:左右规划(左侧定宽,右侧自顺应宽)

<!DOCTYPEHTML>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

<title>左右规划(左侧定宽,右侧自顺应宽)</title>

<styletype="text/css">

body{font:12pxarial;color:#000;background:#fff;margin:0}

#header{height:50px;color:#fff;background:#666;line-height:50px;margin-bottom:10px}

#content{width:100%;color:#fff;float:right;margin-left:-240px}

#content_inner{height:400px;background:#666;margin-left:240px}

#side{width:230px;height:400px;color:#fff;background:#666;float:left}

#footer{height:50px;color:#fff;background:#666;margin-top:10px}

.clear{clear:both}

</style>

</head>

<body>

<divid="header">顶部</div>

<divid="side">左侧</div>

<divid="content">

<divid="content_inner">右侧</div>

</div>

<divclass="clear"></div>

<divid="footer">底部</div>

</body>

</html>

相关推荐