我遇到的问题是网站的显示方式不同于分辨率。
/* CSS Document */
a{
text-decoration:none;
}
body{
background-color:#F2F2F2;
font-family:Arial, Helvetice, sans-serif;
font-size:14px;
margin:0 auto;
line-height:1.5;
width:100%
}
#body{
width:90%;
margin-left:auto;
margin-right:auto;
}
#wrap{
height:auto;
}
.logo{
margin-left:2%;
margin-top:5%;
float:left;
width:auto;
}
.kuka{
margin-left:39.5%;
width:auto;
}
#nav{
background-color:#3394e1;
color:#FFF;
box-shadow: 0px 5px 0px #00377c;
width:90%;
}
#nav ul{
list-style:none;
margin:0 auto;
}
#nav ul li{
display:inline;
}
#nav a:link, .siteheader a:visited {
display:inline-block;
padding:1.4% 0.3%;
font-weight:bold;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
#nav a:hover, .siteheader a:active,
#nav .active a:link .siteheader .active a:visited {
background-color:#FFF;
color:#000;
text-shadow:none;
}
#nav ul li a {
position:relative;
color:#FFF;
}
我认为这个问题不在CSS中, 我认为问题很简单,但我无法解决。
html代码
<div id="wrap">
<div id="header">
<div class="logo">
<img src="image/logo.png" alt="Logo" width="230" height="105">
</div>
<div class="kuka">
<img src="image/Website-Banner-final.png" alt="kuka" width="736" height="190">
</div>
<div id="nav">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="company_profile.html">Company Profile</a></li>
<li><a href="about_robotics.html">About Robotics</a></li>
<li><a href="solutions.html">Solutions</a></li>
<li><a href="automation.html">Automation</a></li>
<li><a href="used_machines.html">Used Machines</a></li>
<li><a href="partners.html">Partners</a></li>
<li><a href="technical_support.html">Technical Support</a></li>
<li><a href="send_an_enquiry.html">Send An Enquiry</a></li>
<li><a href="join_our_team.html">Join Our Team</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="contact_us.html">Contact US</a></li>
</ul>
</div>
</div>
我希望解释问题
答案 0 :(得分:0)
使用视口宽度和高度为With&amp;高度。像宽度:## vw;