html页⾯缩⼩导航栏隐藏,html–导航栏缩放问题我有⼀个问题，我的导航栏似乎与CSS中的.container缩放.现在，我是⼀个新⼿，但我已经尝试搞乱CSS中的值，但⽆济于事.这是
HTML和CSS的代码：
* {
margin: 0px;
padding: 0px;
}
body {
html导航源码
font-family: verdana;
background-image: url(images/bg2.jpg);
max-width: 100%;
max-height: auto;
background-position: 0px 100px;
background-repeat: repeat-x;
background-color: black;
background-size: 100%;
}
#header {
background-color: #000000;
height: 100px;
width: 100%;
}
.container {
background-color: grey;
width: 960px;
height: auto;
margin: 0 auto;
color: rgb(200, 200, 200);
}
#logoArea {
width: 300px;
height: 100px;
background-image: url(images/logo.png);
float: left;
display: block;
}
#navArea {
height: 50%;
float: right;
}
#nav {
list-style: none;
margin-top: 5%;
}
#nav a {
color: #C8C8C8;
text-decoration: none; width: 75px;
height: 50px;
display: table-cell;
vertical-align: middle; padding: 0;
}
#nav li {
width: 75px;
height: 50px;
float: left;
margin-left: 30px; background-color: #252525; border: 2px solid silver; border-radius: 8px; padding: 0px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#nav li:hover {
background-color: grey;
}
.page {
background-color: rgba(19, 19, 19, 0.9);
padding: 20px;
padding-bottom: 1px;
}
p {
margin-bottom: 20px;
}
.box1 {
position: relative;
width: 300px;
height: 100px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
float: left;
}
#imageLogo {
width: 960px;
height: 324px;
background-image: url(images/Triicell-logo.png);
background-repeat: no-repeat;
background-position: center;
}
Test site
wp_1
wp_2
wp_3
wp_4
wp_5
Test site
正如我所说的那样，我是⼀个新⼿，所以如果我错过了⼀些⾮常明显的东西，如果你能指出我正确的⽅向，我会很感激.我整个上午⼀直在绞尽脑汁，试着想想它会是什么.
以下是⼀些参考我正在谈论的截图：
在缩放.container之前：
缩放.container后：
我正在做的是缩放它是我将.container的宽度更改为50％;.不要担⼼其他任何事情 – 我知道我将要做些什么来扩展其余部分，即图像等等 –但它只是导航栏似乎跳出了原位.
但是，如果有⼈能帮我解决这个问题，我会⾮常感激.如果做不到这⼀点,⾄少指出我正确的⽅向.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。