1
我正在处理我的投资组合，并遇到了我的徽标和导航问题。自适应导航问题
这里是我要为：http://i.imgur.com/Xj0ROHp.jpg
我想通过它来显示这样的在3个不同破发点，但目前我所运行到的是净资产值将右碰上标志不放弃低于它，就像我想要的那样。我以前正常工作，但我不确定哪里出了问题。任何建议都会很棒！
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
</script>
<link href="css/lightbox.css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="">NAME</a></h1>
</div>
<div id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="article column1">
<a href="new.mp4" rel="shadowbox;height=338;width=600" title="LOGO ANIMATION"> <img class="hoverme" src="images/animation1.jpg"></a>
</div>
<div class="article column2">
<a href="images/northforest.jpg" data-lightbox="image-1" data-title="Logo Design"> <img class="hoverme" src="images/nfsmall.jpg"></a>
</div>
<div class="article column3">
<a href="images/flyer.jpg" data-lightbox="image-1" data-title="Flyer"> <img class="hoverme" src="images/flyersmall.jpg"></a>
</div>
<div class="article column4">
<a href="images/menu.jpg" data-lightbox="image-1" data-title="Flyer"> <img class="hoverme" src="images/menusmall.jpg"></a>
</div>
<div class="article column5">
<a href="images/article.jpg" data-lightbox="image-1" data-title="Article"> <img class="hoverme" src="images/articlesmall.jpg"></a>
</div>
<div class="article column6">
<a href="ahlogo.mp4" rel="shadowbox;height=338;width=600" title="LOGO ANIMATION"> <img class="hoverme" src="images/animation2.jpg"></a>
</div>
</div>
<div id="footer">
</div>
</div>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "resize"
});
</script>
</body>
</html>
CSS：
@font-face {
font-family: 'bikoblack';
src: url('fonts/biko_black.otf');
}
@font-face {
font-family: 'bikoregular';
src: url('fonts/biko_regular.otf');
}
.hoverme {
border: 3px solid #d0d0d0;
}
.hoverme:hover {
opacity: .5;
-webkit-transition: all .9s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
a:link {
color: #0f4c96;
}
a:visited {
color: #0f4c96;
}
a:hover {
color: #b2b1b1;
}
a:active {
color: #0f4c96;
}
* {
text-align: center;
}
body {
margin: 0;
font-size: 100%;
background-color: white;
}
#wrapper {
max-width:90%;
margin:0 auto;
}
img {width: 100%; height: 100%;
}
h1 {
font-family: 'bikoblack';
text-transform: uppercase;
font-size: 3.5em;
line-height: 85%;
color: #0f4c96;
float: left;
}
#header {
position:relative;
overflow:hidden;
}
#nav {
position:absolute;
bottom:1.25em;
right:1em;
}
li {
display: inline;
font-family: 'bikoregular';
color: #0f4c96;
padding-left: 2em;
}
.column1, .column2, .column3, .column4, .column5, .column6 {
width: 32.66%;
height: 15em;
float: left;
margin: 1% 1% .01% 0%;
}
.column3, .column6 {
margin-right: 0%;}
}
@media (max-width:767px) {
h1 {
float: none;
width:100%;
text-align:center;
}
#nav {
position:static;
width:100%;margin:0 auto;
top: 5em;
}
li {
width:100px;
padding: 0 1em;
}
}
@media (max-width:480px){
li {
display:block;
text-align:center;
width:auto;
}
}
a {text-decoration: none; }
最后一次更改是什么？我的意思是在哪一步之后它不再正常工作。 – 2014-09-11 00:35:20
当屏幕尺寸缩小时，导航当前仅流入徽标。当屏幕很小时，它会切换到阻止显示，但它永远不会像我希望的那样下降到该图标之下。以下是我正在谈论的内容：http://i.imgur.com/PXsAZ2M.jpg和http://imgur.com/HXyfCGu – user1527555 2014-09-11 00:43:44