在窗口大小调整时更改大小的网页顶部的固定菜单 [英] Fixed Menu at the Top of Webpage that Changes Size as Window Resizes

查看：149
本文介绍了在窗口大小调整时更改大小的网页顶部的固定菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



这是我到目前为止的内容：
http://jsfiddle.net/ovr8spfu/ 

 < style type =text / css> 
 #menu {
 background-color：blue; 
 height：70px; 
宽度：100％; 
 top：0px; 
 left：0px; 
位置：固定; 
} 
 #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>












我遇到了几个我搜索了几个小时的问题最后，我自己也解决不了。



蓝绿色部分是我的标志，应该始终保留在左上方，绿色部分是填充物，并且我的菜单项红色应该保持固定在右上角。


  1. 因为我的菜单/容器是水平地，如果窗口被最小化，我的红色菜单项在屏幕外消失。我能做些什么，当窗口最小化时，红色菜单项被推到左边，而绿色填充部分会消失？

    2. 我的Flash文件将放置在菜单下方，水平方向也是 1300px 。如果浏览器窗口被调整大小，我如何自动调整大小以使其水平变小？ 如何将文本居中红色的菜单项，无论是垂直还是水平？ 如何以我的 #section 文本为中心在页面中间？ https://jsfiddle.net/ovr8spfu/3/ =nofollow> https://jsfiddle.net/ovr8spfu/3/ 

      #menu {
     background-color：blue; 
     height：70px; 
    宽度：100％; 
     top：0px; 
     left：0px; 
    位置：固定; 
     overflow：hidden; 
    } 
     #container {
     background-color：green; 
     height：70px; 
    宽度：100％; 
     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 {
     padding：25px 5px; 
    背景颜色：红色; 
     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：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; 
    宽度：100％; 
    } 
     #flash {
     height：500px; 
    宽度：100％; 
     margin-left：auto; 
     margin-right：auto; 
    背景颜色：＃000; 
    } 
     #section {
     width：100％; 
     height：480px; 
     margin-left：auto; 
     margin-right：auto; 
     font-family：Helvetica; 
     font-size：18px; 
     text-align：center; 
    }

    如果您想设计自适应网站，请尽量避免使用固定宽度。


    1. 我将#container和#flash宽度更改为 100％


    2. 我删除了test-1，test-2等的类别... div自动调整您的内容，因此不需要固定宽度。


    3. 为了将菜单链接的文本（和部分的文本）水平居中，我使用了 text-align：center 。垂直对齐，我只是添加了以下内容：

        .menu_item {
       padding：25px 5px;}


    我希望这有助于您！



    问候

    I need is a fixed menu at the top, a flash file underneath it, and then some text.

    This is what I have so far: 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>

    I'm having several problems that I've searched for hours on end and just can't solve by myself.

    The teal part is my logo that should always stay in the top left, the green part is "filler", and my menu items in red should stay fixed in the top right.

    1. Because my menu/container is 1310px horizontally, if the window were to be minimized, my red menu items disappear offscreen. What can I do so that when the window is minimized, the red menu items are pushed to the left and the "green filler part" goes away instead?

    2. My flash file, which will be placed underneath the menu, is also 1300px horizontally. How can I make it resize automatically so that it becomes smaller and smaller horizontally, if the browser window were to be resized?

    3. How do I center the text inside the red menu items, both vertically and horizontally?

    4. How do I center my #section text in the middle of the page?

    解决方案

    Check this Fiddle https://jsfiddle.net/ovr8spfu/3/

    #menu {
background-color:blue;
height:70px;
width:100%;
top:0px;
left:0px;
position:fixed;
overflow: hidden;
}
#container {
    background-color:green;
    height:70px;
    width:100%;
    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 {
    padding: 25px 5px;
    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: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:100%;
}
#flash {
    height:500px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color: #000;
}
#section {
    width:100%;
    height:480px;
    margin-left:auto;
    margin-right:auto;
    font-family:Helvetica;
    font-size:18px;
    text-align:center;
}

    Try to avoid fixed widths if you want to design responsive websites.

    1. I changed your #container and #flash width to 100%

    2. I removed your clases of test-1, test-2, etc... the divs resize automatically on your content so there is no need for fixed widths.

    3. To center the text of the menu links (and the text of your section) horizontally, I used text-align:center . To align vertically I just added the following padding:

      .menu_item {
padding: 25px 5px;}

    I hope this helps!

    Regards

    这篇关于在窗口大小调整时更改大小的网页顶部的固定菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆