我需要的是顶部的固定菜单,下面是一个 flash 文件,然后是一些文本。
这是我目前所拥有的: http://jsfiddle.net/ovr8spfu/
<style type="text/css">
#menu {
background-color:blue;
height:70px;
width:100%;
top:0px;
left:0px;
position:fixed;
}
#container {
background-color:green;
height:70px;
width:1310px;
margin-left:auto;
margin-right:auto;
border-right-width:1px;
border-right-color:black;
border-right-style:solid;
}
#logo {
height:70px;
width:144px;
float:left;
background-color:aqua;
}
.menu_item {
background-color:red;
height:70px;
font-family:Helvetica;
font-size:14px;
font-weight:bold;
text-align:center;
border-left-width:1px;
border-left-color:black;
border-left-style:solid;
float:right;
}
.menu_item.test1 {width:80px;}
.menu_item.test2 {width:188px;}
.menu_item.test3 {width:122px;}
.menu_item.test4 {width:136px;}
.menu_item.test5 {width:72px;}
.menu_item.test6 {width:116px;}
.menu_item:hover {background-color:pink;}
a:link {color:#FFFFFF;text-decoration:none;}
a:visited {color:#FFFFFF;text-decoration:none;}
a:active {color:#FFFFFF;text-decoration:none;}
#filler {
height:62px;
width:700px;
}
#flash {
height:500px;
width:1300px;
margin-left:auto;
margin-right:auto;
}
#section {
width:900px;
height:480px;
margin-left:auto;
margin-right:auto;
font-family:Helvetica;
font-size:18px;
}
</style>
</head>
<body>
<div id="menu">
<div id="container">
<div id="logo"></div>
<a href="#"><div class="menu_item test1">ABC 123</div></a>
<a href="#"><div class="menu_item test2">TESTING 8637376436</div></a>
<a href="#"><div class="menu_item test3">Blah Blah Blah</div></a>
<a href="#"><div class="menu_item test4">HEEEEEEELP</div></a>
<a href="#"><div class="menu_item test5">XYZ123</div></a>
<a href="#"><div class="menu_item test6">HOME</div></a>
</div>
我遇到了几个问题,我已经搜索了几个小时,但我自己无法解决。
青色部分是我的 Logo ,应始终位于左上角,绿色部分是“填充物”,而我的红色菜单项应固定在右上角。
因为我的菜单/容器水平方向为
1310px
,所以如果要最小化窗口,我的红色菜单项会消失在屏幕外。我该怎么做才能在窗口最小化时将红色菜单项推到左侧,而“绿色填充部分”消失?我的 flash 文件将放置在菜单下方,水平方向也是
1300px
。如果要调整浏览器窗口的大小,如何让它自动调整大小,使其在水平方向上越来越小?如何将红色菜单项中的文本垂直和水平居中?
如何将我的
#section
文本置于页面中间?
最佳答案
问题 1&2
如果您将宽度设置为容器和 Flash 文件的 100%,它会在页面调整大小时自动缩小。
width:100%;
问题 3 & 4
这是一个 JSfiddle,展示了如何根据父 div 大小水平和垂直居中,您可以将此类添加到任何内容,它会根据父 div 大小居中 - http://jsfiddle.net/ovr8spfu/2/
.center {
text-align:center;
position:relative;
top:50%;
}
关于html - 修复了网页顶部的菜单随窗口调整大小而改变大小的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30850824/