从昨天开始,我一直在寻找解决方案,但找不到,或者找不到合适的关键字进行搜索。
所以我在我的网站上有一个标题,就像这是一个标题,我很好地居中并扩展了它的背景颜色。
现在我发现了如何制作一个漂亮的交互式/有光泽的导航栏作为页脚,但我在顶部使用它,问题是我也想扩展它的大小,但它只是自身居中而不扩展。我将在屏幕截图中显示此内容并发布我的代码。
另外:我希望我的盒子居中,它包含在一个名为#main_inner_area的div中。
注意:导航栏在 CSS/HTML 代码中仍然称为#footer。我想扩展导航栏的两侧,就像我的标题的背景颜色扩展到全宽一样。 我的屏幕截图:i41 DOT tinypic DOT com SLASH 2qk6mmt.png (抱歉,如果没有屏幕截图很难解释)
HTML:
<div id="main_area">
<header>
<h1>This is a header</h1>
</header>
<div id="footer">long code for layout navbar</div>
<div id="main_inner_area">
<article>d fsdf sdf sdf dsf dsf dsf</article>
</div>
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
#main_area{
background:#4863A0;
display: block;
text-align: left;
}
header {
height:100px;
background: #4863A0;
color:white;
border:none;
width:700px;
margin: 0 auto;
}
#footer{
width:700px;
top:100px;
margin:0 auto;
padding:0;
left:0;
right:0;
margin: 0 auto;
height: 40px;
border-radius:7px 7px 7px 7px;
font-family:Arial;
text-shadow: 1px 1px 1px black; /*h,v,blur,color */
/* glass effect */
border-bottom: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.5);
/*inset = inner shadow ----------- this just creates multiple shadows*/
/*top border, top white section, overlay top white, bottom*/
box-shadow: inset 0px -2px rgba(255,255,255,0.3),
inset 0px -15px 20px rgba(0,0,0,0.2),
inset 0 -10px 20px rgba(255,255,255,0.25),
inset 0 15px 30px rgba(255,255,255,0.3);
}
#main_inner_area{
float: left;
width:735px;
margin:25px 0px 10px 0px;
}
article{
background: rgba(255,255,255, 0.5);
border: 1px solid #4863A0;
margin:0px;
margin-bottom: 10px;
padding: 15px;
font-family: Tahoma;
font-size: 14px;
text-align:left;
display:block;
width:700px;
height:auto;
border-radius: 7px 7px 7px 7px;
}
PS我真的很感激。我是一名 18 岁的学生,试图在学习之外学习一些额外的东西。