Html 响应导航问题
我正在做我的投资组合，我的徽标和导航有问题 以下是我想要的： 我想让它在3个不同的断点显示，但目前我遇到的是导航将运行到正确的标志没有下降到它下面，我想它。我以前让它正常工作，但我不确定出了什么问题。任何建议都会很棒 HTML:Html 响应导航问题,html,css,Html,Css,我正在做我的投资组合，我的徽标和导航有问题 以下是我想要的： 我想让它在3个不同的断点显示，但目前我遇到的是导航将运行到正确的标志没有下降到它下面，我想它。我以前让它正常工作，但我不确定出了什么问题。任何建议都会很棒 HTML: <!DOCTYPE html> <html> <head> <title>Portfolio</title> <script src="js/jquery-1.11.0.min.
<!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中也有一些错误，包括未关闭的属性以及错误的媒体查询。试试这个：
.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;
}
当然，你必须根据自己的需要进行调整，但是你已经掌握了你想要的布局的基本知识，你可以这样做，这样你就可以到处玩了。另外，一定要注意如何编写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;
}