Question

我正在处理我的投资组合，并且无法使用我的徽标和导航。

以下是我的目标：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; }

Answer 1

你需要做一些小改动，你的CSS也有一些错误，包括未封闭的属性以及错误的媒体查询。试试这个：

.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%;
}
#header {
    position:relative;
    overflow:hidden;
    display:block;
}
h1 {
    font-family:'bikoblack';
    text-transform: uppercase;
    font-size: 3.5em;
    line-height: 85%;
    color: #0f4c96;
    display:block;
    width:35%;
    float:left;
}
#nav {
    display:block;
    width:50%;
    float:right;
    margin-top:1.85em;
}
li {
    display: inline-block;
    font-family:'bikoregular';
    color: #0f4c96;
    padding: 0 1em;
}
.column1, .column2, .column3, .column4, .column5, .column6 {
    width: 32.66%;
    height: 15em;
    float: left;
    margin: 1% 1% .01% 0%;
}
.column3, .column6 {
    margin-right: 0%;
}
@media all and (max-width: 767px) {
    h1 {
        float: none;
        clear:both;
        display:block;
        width:100%;
        text-align:center;
    }
    #nav {
        position:relative;
        display:block;
        width:100%;
        margin:0 auto;
        top: 0em;
        float:none;
        clear:both;
        text-align:center;
    }
    li {
        width:100px;
        padding: 0 1em;
    }
}
@media all and (max-width: 480px) {
    li {
        display:block;
        text-align:center;
        width:auto;
    }
}
a {
    text-decoration: none;
}

当然你必须根据自己的需要进行调整，但是你有基本的布局，你可以see a fiddle here这样你就可以玩。另外，请务必注意您编写CSS的方式，这是您的版本无法工作的主要原因

响应式导航问题

1 个答案: