使用css实现布局 [英] achieve layout using css
问题描述
您好我正在尝试实现此布局。检查布局详细信息的链接。
http： //s23.postimg.org/a919dmufv/layout.png [ ^ ]
到目前为止我写的这个
< 正文 >
< div < span class =code-attribute> id = content >
< div id = header >
< / div >
< div id = nav >
< / div >
< div id = 页脚 >
< / div > ;
< / div > ;
< / body >
和css：
< pre lang =css> body
{
}
＃ content
{
margin ： 0 auto;
height ： 1200px;
width ： 1000px;
border ： 2px纯黑色;
}
＃标题
{
margin ： 0 auto;
width ： inherit;
height ： 200px;
border-bottom ： 2px black solid;
}
＃ nav
{
margin ： 0 auto;
width ： inherit;
height ： 50px;
border-bottom ： 2px纯黑;
}
＃页脚
{
width ： inherit;
border-top ： 2px solid black;
margin-top ： -1200px;
height ： 200px;
clear ： 两者;
}
但页脚的行为与图表中的不一样。你能告诉我你我的代码有问题吗？请不要给我一些其他代码，因为我是css的新手。
为了达到确切的布局，您应该执行以下操作：
CSS：
＃ header
{ margin ： 0px auto;
height ： 200px;
width ： 1000px;
border ： 2px black solid ;
}
＃ nav
{
margin ： 0 auto;
width ： 1000px;
height ： 50px;
border ： 2px solid black;
}
＃ content
{
margin ： 0 auto;
height ： 800px;
width ： 1000px;
border ： 2px纯黑;
}
＃< span class =code-leadattribute> footer
{
margin ： 0 auto;
height ： 200px;
width ： 1000px;
border ： 2px纯黑;
}
Html：
< 正文 >
< ; div id < span class =code-keyword> = header > < / div >
< div id = nav > < / div >
< div id = content > < / div >
< div id = 页脚 > < / div >
< / body >
有些事情要做：
1.关闭你在html中打开的每个标签
2.保持布局简单，即。你想要标题和导航后的内容，但你之前放置它们。
3.我没有做任何事情，除了重新排列它们并将CSS宽度属性从Inherited重置为1000px
4.您可以相应地更改宽度和高度：）
随意提问：）
hello i am trying to achieve this layout.Check link for layout details.
http://s23.postimg.org/a919dmufv/layout.png[^]
So far i have written this
<body>
<div id="content">
<div id="header">
</div>
<div id="nav">
</div>
<div id="footer">
</div>
</div>
</body>
and css:
body
{
}
#content
{
margin:0 auto;
height:1200px;
width:1000px;
border:2px solid black;
}
#header
{
margin:0 auto;
width:inherit;
height:200px;
border-bottom:2px black solid;
}
#nav
{
margin:0 auto;
width:inherit;
height:50px;
border-bottom:2px solid black;
}
#footer
{
width:inherit;
border-top:2px solid black;
margin-top:-1200px;
height:200px;
clear:both;
}
but the footer is not behaving as in diagram.Can you tell me what is wrong with my code? please dont give me some other codes because I am new to css.
Well to achieve the exact layout you should do the following:
CSS:
#header { margin:0px auto; height:200px; width:1000px; border:2px black solid; } #nav { margin:0 auto; width:1000px; height:50px; border:2px solid black; } #content { margin:0 auto; height:800px; width:1000px; border:2px solid black; } #footer { margin:0 auto; height:200px; width:1000px; border:2px solid black; }
Html:
<body> <div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id="footer"></div> </body>
Some things to go with:
1. Close every tag you open in html
2. Keep the layout simple ie. you wanted content after header and nav but you were placing them before.
3. I didnt do anything except rearranging them and resetting the CSS width property from Inherited to 1000px
4. You can change your width and height accordingly :)
Feel free to ask any questions :)
这篇关于使用css实现布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http： //s23.postimg.org/a919dmufv/layout.png](\"http://s23.postimg.org/a919dmufv/layout.png\"){kind=link}
