格式化页面布局DIV的

我得到有关于铺设使用DIV的和CSS的网页，但没有在帮助我去接近我要找的布局很多的问题和答案。格式化页面布局DIV的

我试图阻止我的布局使用表页面的习惯（它的稀有我做的页面布局和旧习难改）。

我要找（黑色页面上）的布局是：

enter image description here

我想这对留在页面的中心，如果在屏幕上显示任何超过800像素宽

的HTML我至今是：

<body> 
    <form id="form1" runat="server"> 
     <div id="header">Header</div> 
     <div id="outerleftcolumn">Left Column</div> 
     <div id="leftcolumn">Left Column</div> 
     <div id="content">Content</div> 
     <div id="outerrightcolumn">Left Column</div> 
     <div id="footer">Footer</div> 
    </form> 
</body>

的CSS我到目前为止有：

body { 
margin: 0px; 
padding: 0px; 
background-color:black; 
} 

#header { 
background: #438a48; 
width: 770px; 
height:50px; 
} 
#outerleftcolumn { 
background-image:url(/Templates/Red/Images/LeftBoarder.jpg); 
float: left; 
width: 15px; 
height: 700px; 
} 
#leftcolumn { 
background: #2675a8; 
float: left; 
width: 150px; 
height: 700px; 
} 
#outerrightcolumn 
{ 
background-image: url(/Templates/Red/Images/RightBoarder.jpg); 
float: right; 
width: 15px; 
height: 700px; 
} 
#content { 
background: #ff6a00; 
float: left; 
width: 635px; 
height: 700px; 
} 
#footer { 
background: #df781c; 
clear: both; 
width: 800px; 
}

我继续读一篇文章或帖子以及想我知道我只有做改变一个设置，整个事情会糊涂左心耳左心耳。我可以用心跳来实现这个目标，但正如我所说的，我试图（和失败）放弃我的坏习惯。两个外部div中的图像只是带有渐变的jpg。

任何指针将不胜感激。

来源

2014-10-30 Fred

为什么接近的选票？ – Fred 2014-10-30 12:28:46

body { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t background-color:#000; 
 
} 
 
#outerleftcolumn { 
 
\t float: left; 
 
\t width: 15px; 
 
\t height: 700px; 
 
\t background-color: red; 
 
} 
 
#outerrightcolumn 
 
{ 
 
\t background-image: url(/Templates/Red/Images/RightBoarder.jpg); 
 
\t float: right; 
 
\t width: 15px; 
 
\t height: 700px; 
 
\t background-color: red; 
 
} 
 
#centercolumn{ 
 
\t overflow: hidden; 
 
} 
 
form{ 
 
\t display: block; 
 
\t margin: auto; 
 
\t width: 800px; 
 
\t background-color: #000; 
 
} 
 
#header { 
 
\t background: #438a48; 
 
\t width: 770px; 
 
\t height:50px; 
 
} 
 

 
#leftcolumn { 
 
\t background: #2675a8; 
 
\t float: left; 
 
\t width: 150px; 
 
\t height: 620px; 
 
} 
 
#content { 
 
\t background: #fff; 
 
\t float: left; 
 
\t width: 620px; 
 
\t height: 620px; 
 
} 
 
#anotherheader{ 
 
\t float: left; 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t background-color: yellow; 
 
} 
 
#footer { 
 
\t background: #df781c; 
 
\t height: 30px; 
 
\t width: 800px; 
 
\t float: left; 
 
}

<body> 
 
    <form id="form1" runat="server"> 
 
    \t \t <div id="outerleftcolumn">Left Column</div> 
 
    \t \t <div id="outerrightcolumn">Left Column</div> 
 
    \t \t <div id="centercolumn"> 
 
    \t \t \t <div id="header">Header</div> 
 
    \t \t \t <div id="leftcolumn">Left Column</div> 
 
    \t \t \t <div id="content"> 
 
    \t \t \t \t <div id="anotherheader"> 
 

 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t <div id="footer">Footer</div> 
 
    \t \t </div> 
 
    </form> 
 
</body>

来源

2014-10-30 12:22:29

完美！正是我在找什么。谢谢 – Fred 2014-10-30 12:27:47

没问题。我有一个建议给你。请避免使用“id”来为您的div设计风格。使用“班级”是一种更好的做法。 – 2014-10-30 12:29:50

伟大的提示，我会改变他们的建议。谢谢 – Fred 2014-10-30 12:32:07

我调整一点点你的代码，摆脱outter列：

HTML：

<body> 
<form id="form1" runat="server"> 
    <div id="header">Header</div> 
    <div id="leftcolumn">Left Column</div> 
    <div id="content">Content</div> 
    <div id="footer">Footer</div> 
</form> 
</body>

CSS：

body { 
    margin: 0px; 
    padding: 0px; 
    background-color:red; 
    width: 800px; 
    } 
    #header { 
    background: #438a48; 
    width: 770px; 
    height:50px; 
    margin: 0px 15px; 
    } 
    #leftcolumn { 
    background: #2675a8; 
    float: left; 
    width: 150px; 
    height: 700px; 
    margin-left: 15px; 
    } 
    #content { 
    background: #ff6a00; 
    float: left; 
    width: 620px; 
    height: 700px; 
    margin-right: 15px; 
    } 
    #footer { 
    background: lightblue; 
    clear: both; 
    width: 770px; 
    margin: 0px 15px; 
    }

这里是一个小提琴：http://jsfiddle.net/v81wdmgp/

来源

2014-10-30 12:13:30 anexo

格式化页面布局DIV的

回答

相关问题