网站导航栏
我需要帮助。
我已经干了好几个小时了。我是新的html和css。我一直在谷歌上搜索这个问题，唯一起作用的似乎是以下内容：http://codepen.io/wolfcry911/pen/HyLdg。
以下是我正在努力实现的目标：
- 创建一个有4个链接的导航(主页，关于我，联系人，简历)，中间有一个标志，可以调整任何屏幕大小(平板电脑，笔记本电脑，智能手机)。我尝试了一个无序的名单与标志作为第三项(不太喜欢这种方式)。由于文字长度不同，所以看起来非常草率，无法将徽标放在屏幕中央)，我尝试使用徽标作为背景图像，但我似乎无法在页面中间对徽标进行居中，或者当我这样做时，文本永远不会围绕徽标进行调整，总是通过徽标。有了上面的链接，我能够理解大约50%的css，当我试图调整它时，我无法使文本对齐在导航中心，我无法使徽标适合导航。这是我的代码：
body {
background: #f5f5f5;
font-family: arial;
font-size: 11px;
margin: 0;
}
#header {
height: 56px;
position: relative;
margin: auto;
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
text-align: center;
padding: 20px 10px;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: uppercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
}
#header ul li a:hover {
background: rgb(235, 200, 35);
}
.logo {
position: absolute;
left: 50%;
margin: -48px 0 0 -108px;
background: url(img/logo.jpg) 50% 0 no-repeat;
background-size: 125px 56px;
width: 125px;
height: 56px;
top: 20px;
}
@media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="navigation.css">
</head>
<body>
<div id="header">
<a class="logo" href="index.html">
<img src="img/logo.jpg" alt="Michigan State" width="215" height="140" />
</a>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="index.html">About Me</a>
</li>
<li><a href="index.html">Contact</a>
</li>
<li><a href="index.html">Resume</a>
</li>
</ul>
</div>
</body>
</html>
我能够理解大约50%的css代码。因此，如果有人能帮助解释ul，li，徽标和@media格式是怎么回事，那将是非常感谢的。
谢谢你的帮助。
回答 3
Stack Overflow用户
发布于 2015-01-07 15:28:43
这里是您的基本标记/布局。(顺便说一句，这是非常基本的)。它使用定位，并允许您轻松地自定义零碎。
.nav {
margin-top: 50px;
height: 40px;
width: 100%;
background-color: blue;
position: relative;
border-bottom: 5px solid gold;
border-top: 5px solid gold;
}
.link {
position: absolute;
width: 20%;
height: 100%;
background: red;
}
.link2 {
left: 20%;
background: green;
}
.logo {
left: 40%;
background: orange;
}
.link3 {
left: 60%;
background: purple;
}
.link4 {
left: 80%;
background: pink;
}
@media screen and (max-width: 800px) {
.link {
position: absolute;
width: 25%;
height: 100%;
background: red;
}
.link2 {
left: 25%;
background: green;
}
.logo {
display:none;
}
.link3 {
left: 50%;
background: purple;
}
.link4 {
left: 75%;
background: pink;
}
}<div class="nav">
<div class="link link1">Link1</div>
<div class="link link2">Link2</div>
<div class="link logo">logo</div>
<div class="link link3">Link3</div>
<div class="link link4">Link4</div>
</div>
您可以使用媒体查询为不同大小的屏幕添加样式。例如，当我的代码片段小于800 it的宽度时，“徽标”div将消失，但当它变宽时，徽标div将重新出现。(最好在全屏模式下查看此效果)
只是一些简单的事情，但我认为你可以解决这个问题。
Stack Overflow用户
发布于 2015-01-07 15:01:10
ul是一个无序列表，它将显示符号点而不是数字，如with和ordered，ol。它们将list-style设置为none，因此项目点将不会显示每个元素的宽度，并将其设置为97 of。
ul li:nth-of-type(4)是在CSS3中实现的CSS选择器。它基本上告诉浏览器对于无序列表的第四项，使用这些设置样式。http://css-tricks.com/almanac/selectors/n/nth-of-type/
ul li a:hover就是当用户悬停在无序列表的项目上时所发生的样式。
.logo是一个类。这些样式处理用于设置图片格式的位置、大小、图像和其他样式。
@media检测浏览器的大小，并根据该大小使用指示的不同样式集。http://css-tricks.com/css-media-queries/
看一下那个网站，cs-tics.com。它有很多信息，帮助我在过去的很多，特别是了解所有新的技巧和属性与CSS3。
Stack Overflow用户
发布于 2015-01-07 15:08:30
我会简单地解释一下发生了什么，但是你真的应该读一下CSS。对于初学者也有一些很好的教程(例如，代码学院)。
#header ul {
margin: 0 auto; /* Centers the UL. */
width: 800px;
padding: 0;
list-style: none; /* Remove list bullets */
}#header ul li {
float: left; /*Floats the LI's meaning it will place them next to eachother instead of stacking them underneath eachother*/
width: 97px;
} #header ul li:nth-of-type(4) {
margin-left: 217px; /* Adds a left-margin to your fourth LI-itme(Resume). This is here so to prevent the link from overlapping the image. The left-margin should be the same width as you image. This needs to be added because your logo has position:absolute. */
}.logo {
position: absolute; /* This means that the image is taken out of the flow and can be placed anywhere on the page.
Position absolute elements are relative to parent elements containing the position:relative style. In your case that's #header*/
left: 50%;/* places the left edge of the imaget 50% from the left*/
margin: -48px 0 0 -108px; /* adds a negative top/bottom margin to center the image. */
width: 125px;
height: 56px;
top: 20px; /* places the image 20px from the top.
}媒体查询是用来定义当窗口大小小于800 is时菜单会发生什么变化。
https://stackoverflow.com/questions/27821855
复制相似问题
腾讯云开发者
