推荐.NET教程： ASP.NET C# 开发环境 Ajax教程 控件开发 统计报表 数据库 Web服务 安装部署 CommunityServer NHibernate DataGrid/GridView 实用代码 VS2005
示例源码 MVC/三层 SqlHelper 入门源码 开源 CMS Ajax/Atlas C#.net 毕业设计 源码 经典代码 商业 本站作品 持久层 随书源码 WebService 英文/汉化 Asp.net2.0

阿牛·乐园

每天进步一点点
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  80 随笔 :: 14 文章 :: 389 评论 :: 13 引用
三行两列DIV布局之左固定宽度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        body{
            /*布局样式*/
            text-align:center; /* 这里,配合DIV的margin,设置DIV水平居中*/
        }
        #layout_header, #layout_footer{
            /*布局样式*/
            margin:0px auto;  /*水平居中*/
            width:98%;
            
        }
        #layout_header
        {
            /*这里可以自定*/
            height:50px;
        }
        
        #layout_container{
            /*布局样式*/
            margin:0px auto;  /*水平居中*/
            width:50%;
            /*这里可以自定*/
            text-align:left; 
            background-color:#CCE7FF;
            border:solid 1px red;
        }
        
        #layout_right_layout{
            /*布局样式*/
            width:100%;
            margin:2px 0px 2px -100%; 
            float:right;
        }
        
        #layout_right{
            /*布局样式*/
            float:left;
            margin:0px 0px 0px 170px; /*这里对应左侧栏的宽度*/
            /*这里可以自定*/
            background-color:#fff;
        }
        
        #layout_left{
            /*布局样式*/
            float:left;
            width:160px;       /*左侧栏的宽度*/
            margin:2px 0px 2px 0px; 
            /*这里可以自定*/
            background-color:#eef6ff;
        }
        
    </style>
</head>

<body>
<div id="layout_header">
    这里头
</div>
<div id="layout_container">
    <div id="layout_right_layout">
        <div id="layout_right">
                asdfasdf
            <table style="border:solid 1px red;width:100%;" border="0" cellpadding="0" cellspacing="0" id="lable">
                <tr>
                    <td>
                        <span id="ctl00_WebSiteNavigate1_labelPageDescription">对会员进行查询列表</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="layout_left">
        这里写菜单
    </div>

<div style="clear: both;display: block"> </div><!-- 这里解决FF 中 layout_container 高度不能自适应 -->
</div>
<div id="layout_footer">
    这里有版权
</div>


</body>
</html>
posted on 2007-12-21 15:57 阿牛 阅读(174) 评论(0)  编辑 收藏 网摘

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索

China-pub 计算机图书网上专卖店！6.5万品种 2-8折！
近千种 9-95 新二手计算图书火热销售中！
开发者征途系统新作：《设计模式——基于C#的工程化实现及扩展》



相关文章:

相关链接:

最新IT新闻:
Google操作系统已开始内部测试？
Google阅读器界面升级 全新改版
微软官方下载：Windows Vista SP2 Beta测试版
微软发布PC Live单机游戏客户端
Firefox遭“独家”恶意软件攻击