我从昨天开始就一直在寻找解决方案,但找不到,或者找不到合适的关键字进行搜索。
所以我在我的网站上有一个标题,就像这是一个标题,我很好地居中并扩展了它的背景颜色。
现在我发现了如何制作一个漂亮的交互式/有光泽的导航栏作为页脚,但我在顶部使用它,问题是我还想扩展它的大小,但它只是居中而不扩展。我将在屏幕截图中显示它并发布我的代码。
另外:我希望我的盒子居中,它包含在一个名为#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;
}
附言我真的很感激。我是一名 18 岁的学生,想在学习之外学习一些额外的东西。
最佳答案
要使页眉动态化,只需从中删除 width
属性(以及从 #footer 中删除)。如果您将它设置为固定值,它当然无法缩放。
要使您的文章
居中,请使用margin-left: auto;右边距:自动;
更新:(拉伸(stretch)导航栏)
CSS 更改
#footer {
width: auto;
}
#footer .links {
width: 700px;
margin: 0 auto;
}
HTML 更改:
<div id="footer">
<div class="links">long code for layout navbar</div>
</div>
关于html - 在 CSS/HTML 中扩展我的导航栏的边(就像标题一样),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17907298/