帮忙找一个框架 DIV+CSS

帮忙找一个DIV+CSS的框架就是上是一张图片左边为导航菜单右侧为编辑左右比例为2：8 或3：7自己画的不好看写CSS水平不够
谁给一个这样的网址给我或是样式给我啊。谢谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

提供一个里介绍的一个[标准]方法:左边150px, 右边170px, 中间内容部分可以在一定范围内伸缩。.cssbody
{

}
*  { margin: 0; padding: 0;}
div#header
{
width: auto;
background-color: #996633;
}
div#main_wrapper
{
min-width: 760px;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}#threecolwrap
{
float: left;
width: 100%;
}
#twocolwrap
{
float: left;
width: 100%;
margin-right: -170px;
display:inline;
}
#nav
{
float: left;
width: 150px;
display: inline;
}
#nav_inner
{
padding: 20px;
}
#promo
{
float: left;
width: 170px;

}
#promo_inner
{
padding: 20px;
}
#content
{
margin-left: 150px;
margin-right: 170px;

}
#footer
{
width: 100%;
clear: both;
float: left;
}
注意这部分内容里的display:inline（这是为解决IE6的BUG，不可缺），还有#twocolwrap里的margin-right:-170px；这是整个三栏布局的关键。不知道你用了母版页没有Master.master<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="main_wrapper">
        <div id="header">
            <div id="header_inner">
                <asp:ContentPlaceHolder id="Header" runat="server">

                </asp:ContentPlaceHolder>
            </div>
        </div>

        <div id="threecolwrap">
            <div id="twocolwrap">
                <div id="nav">
                    <div id="nav_inner">
                        <asp:ContentPlaceHolder id="Nav" runat="server">

                        </asp:ContentPlaceHolder>
                    </div>
                </div>

                <div id="content">
                    <div id="content_inner">
                        <asp:ContentPlaceHolder id="MainContent" runat="server">

                        </asp:ContentPlaceHolder>
                    </div>
                </div>
            </div>

            <div id="promo">
                <div id="promo_inner">
                    <asp:ContentPlaceHolder id="Promo" runat="server">

                    </asp:ContentPlaceHolder>
                </div>
            </div>

        </div>
        <div id="footer">
            <div id="footer_inner">
                 <asp:ContentPlaceHolder id="Footer" runat="server">

                  </asp:ContentPlaceHolder>
            </div>
        </div>
    </div>
    </form>
</body>
</html>
至于为什么嵌套div，这是由于盒模型，如果你对盒模型有所了解的话应该明白吧？所有影响布局的，如border宽度，padding, margin都在内层div上指定，外层只负责布局！还有左右栏内层div的overflow:hidden;我没加，你按需要加吧。
另外，建议你看看《写给大家看的CSS书》第二版。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>管理窗口</title>
    <script type="text/javascript">
        function BlockISnone()
        {
          var left_ID=$("left_1");
          var right_ID=$("right_1");
          var ImagesID=$("imagesID")
          if(left_ID.style.display=="block")
          {
            left_ID.style.display="none";
            ImagesID.src="images/right.gif";
            right_ID.style.width="99%";
          }
          else if(left_ID.style.display=="none")
          {
            left_ID.style.display="block";
            ImagesID.src="images/left.gif";
            right_ID.style.width="79%";
          }

        }
        function $(objectName)
        {
            return document.getElementById(objectName);
        }
    </script>
    <link href="DefauleCSS/css.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="Main" style=" width:1003px; height:100%;">
       <div id="top">
<img src="images/top_01.gif" />
       </div>
   <div class="tongdao"></div>      <div id="middle" style="margin:0px; padding:0px; width:1003px; height:100%; background-color:#E7F5F6; overflow:hidden;">
            <ul style="list-style-type:none; width:100%; margin:0px; padding-left:2px; height:100%; background-color:#E7F5F6;">
                <li id="left_1" style="float:left; width:20%; height:630px; display:block; text-align:center;">
                       <iframe name="leftIframe" style="text-align:center;" id="leftIframe" src="menu1.html" runat="server" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
                </li>
                <li id="mid" style="float:left;width:5px; height:630px; text-align:center;border-right:1px solid #1F6C9E; background-color:#E7F5F6;">
                    <img id="imagesID" src="images/left.gif" onclick="BlockISnone();" alt="点击移动" style=" padding-top:300px;" />
              </li>
              <li id="right_1" style="float:left;width:79%; height:600px;" background-color:#E7F5F6; text-align:center;">
                  <div id="right_Title" style="height:30px; width:100%; margin:0px; padding:0px; text-align:center; line-height:30px;font-family: 新宋体;font-size: 14px;color: #7878A5;font-weight: bold;background-color:#E7F5F6;"">XXX管理平台</div>
                  <div style="width:100%; height:600px;text-align:center;background-color:#E7F5F6;">
                    <iframe name="rightIframe" id="rightIframe" allowTransparency="true  runat="server" width="100%" height="600px" frameborder="0" scrolling="yes" style="background-color: #E7F5F6;text-align:center;" src="admin.html"></iframe>
                  </div>
              </li>
            </ul>
     </div>
</div>
</body>
</html>
TO：nocallstle  你能把代码弄全吗。比如css/main.css 就没有
TO：namhyuk  你发给我的用不了。现在我也没有空学我CSS一般都是偷样式呵呵
css文件里写：
body{width:1004px}三个DIV解决：
顶部图片：
.top{widht:100%;height:你自己设定的高度，或不设也可;backgroud:url("你图片的路径，这里又分相对路径与绝对路径") left no-repeat}左边：
.left{widht:30%;float:left}右边：
.right:{width:70%;float:left}页面中写<body>
<top>这里可放img图片，就不用在CSS的background里设了，但我喜欢在css里设</top>
<left></left>
<right></right>
</body>这样就可以搞定啊。
哦，对不起，写错了,应是这样的,自己都工作晕了，哎。
<body>
<div class="top">这里可放img图片，就不用在CSS的background里设了，但我喜欢在css里设 </div>
<div class="left“> </div>
<div class="right"> </div>
</body>