html页面缩小导航栏隐藏,html – 导航栏缩放问题[通俗易懂]

全栈程序员站长

发布于 2022-09-02 06:10:54

4.9K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

我有一个问题,我的导航栏似乎与CSS中的.container缩放.现在,我是一个新手,但我已经尝试搞乱CSS中的值,但无济于事.这是

HTML和CSS的代码：

* {
 
margin: 0px;
padding: 0px;
}
body {
 
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