第一篇文章。
我已经浏览了网络，但我还是被卡住了。除了使用Firefox之外，我正在为家庭作业创建的网站正在制定计划。导航栏正在堆叠。似乎没有应用CSS。我尝试了很多不同的东西，但无济于事。有什么建议吗？
这是网站 - http://hills.ccsf.edu/~irose2/cnit132/hw1/index.html
HTML -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CNIT 122 Homework</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="bodyCenter">
<header>
<h1>~ Ian Rose ~</h1>
<h2>~ CNIT 122 ~</h2>
<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li class="navStyle">|</li>
<li><a href="publishedWebsites.html">Published Websites</a></li>
<li class="navStyle">|</li>
<li><a href="meNow.html">Me Now</a></li>
<li class="navStyle">|</li>
<li><a href="hw2.html">Homework 2</a></li>
</ul>
</nav>
</header>
<div class="mainPart">
<article>
<h1>Hello World!!!</h1>
<img src="appleComputer.jpg" width="200" height="133" alt="Apple 2E Computer" title="Apple IIe Computer" class="appleComputer">
<p>I grew up in San Francisco in the Mission and Sunset districts. I have also lived in many cities in America and traveled the country and world. This has exposed me to many diverse experiences and ideologies which have shaped me into the person I am today.
</p>
<p>I became interested in Web Development as a Electrical Engineering student at City College of San Francisco. I have always had an intrest in computer programming, but only had a limited experience as a child using Basic on a Apple IIe. As taking C++ was a requirement for my Engineering studies, I jumped at the opportunity to take it my second semester. After taking the class, I found a love for all things programming related. I switched directions to the path that I am on now.
</p>
<p>Being an artist growing up, I started to view web technologies as a fun way to expand on these skills, while updating them and using them in a modern way. I bought a book on HTML & CSS and got to work every night. About halfway through that book, which was about XHTML & CSS, I decided to get a book about CSS3. I made it through that book, made a website, and kept buying more books. I got into JavaScript and started learning that language. I am taking CNIT 133 as well as this class currently.
</p>
<p>I hope to tighten up my Web Development skills with these courses and get an internship as my gateway to the industry.
</p>
<p class="goodLuck">Let's Do This!!!<br>~ Ian ~
</p>
</article>
</div>
<footer>
<p>All Material © Ian Rose, 2014<br>Website Designed and Developed by: <a href="mailto:ianrosedev@gmail.com">Ian Rose</a>
</p>
<p>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fhills.ccsf.edu%2F~irose2%2Fcnit132%2Fhw1%2Findex.html" target="_blank">
<img class="w3cLogo" src="http://www.w3.org/html/logo/badge/html5-badge-h-solo.png" width="33" height="34" alt="HTML5 Powered" title="HTML5 Powered">
</a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhills.ccsf.edu%2F~irose2%2Fcnit132%2Fhw1%2Fstyles.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en;lang=en" target="_blank">
<img class="cssValidated" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!">
</a>
</p>
<p>
<script>
var dateModified = document.lastModified;
mydate = dateModified;
document.write("Last updated: " + mydate);
</script>
</p>
</footer>
</div>
</body>
</html>
CSS -
@import url(http://fonts.googleapis.com/css?family=Luckiest+Guy);
html {
background-color: #232393;
background-image: url("zenbg-1.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.bodyCenter {
width: 900px;
margin: 0 auto;
padding-bottom: 10px;
}
header {
border-style: none;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.82);
background-image: url(ianAndPenguin.jpg);
background-repeat: no-repeat ;
background-position: 99.3%;
margin-top: 12px;
height: 180px;
padding-bottom: 10px;
}
header h1 {
font-family: 'Luckiest Guy', cursive;
font-size: 3em;
text-align: center;
color: #1617b1;
padding-top: 20px;
padding-bottom: 30px;
margin: 0px;
-webkit-text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.94);
-moz-text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.94);
text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.94);
}
header h2 {
font-family: 'Luckiest Guy', cursive;
font-size: 4em;
text-align: center;
color: #1617b1;
padding-top: 14px;
padding-bottom: 40px;
margin: 0px;
-webkit-text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.94);
-moz-text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.94);
text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.94);
margin-top: -42px;
}
nav li {
float: left;
list-style: none;
}
nav a {
display: block;
width: inherit;
margin-top: -30px;
list-style: none;
font-size: 1.2em;
color: #000;
padding: 5px;
}
nav a:hover {
color: #2bac38;
}
.navStyle {
list-style: none;
font-size: 1.2em;
color: #000;
padding: 5px;
margin-top: -30px;
}
.active {
color: #000;
-webkit-text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.84);
-moz-text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.84);
text-shadow: 3px 3px .5px rgba(14, 167, 199, .6);
}
a:link {
text-decoration: none;
}
article h1 {
font-family: 'Luckiest Guy', cursive;
font-size: 44px;
color: #1617b1;
-webkit-text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.94);
-moz-text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.94);
text-shadow: 5px 7px 7px rgba(33, 182, 211, 0.94);
text-align: center;
padding: 15px;
margin-bottom: -20px;
}
article h2 {
font-family: 'Luckiest Guy', cursive;
font-size: 34px;
color: #1617b1;
-webkit-text-shadow: 3px 5px 7px rgba(33, 182, 211, 0.94);
-moz-text-shadow: 3px 5px 7px rgba(33, 182, 211, 0.94);
text-shadow: 3px 5px 7px rgba(33, 182, 211, 0.94);
text-align: center;
padding: 15px;
margin-bottom: -20px;
}
article p {
font-family: sans-serif, serif;
font-size: 18px;
color: #000;
padding-left: 30px;
padding-right: 20px;
}
.mainPart {
color: #fff;
background-color: rgba(255, 255, 255, 0.82);
border-style: none;
border-color: #000;
border-radius: 10px;
margin-bottom: 30px;
}
.goodLuck {
font-family: 'Luckiest Guy', cursive;
font-size: 24px;
padding-bottom: 10px;
}
footer {
border-style: none;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.82);
height: 133px;
padding: 2px 3px 3px 30px;
font-family: sans-serif, serif;
font-size: .9em;
color: #000;
}
.w3cLogo {
float: left;
}
.cssValidated {
border: 0;
width: 88px;
height: 31px;
padding-left: 10px;
}
.appleComputer {
float: right;
margin-top: 12px;
padding: 10px;
}
感谢您的帮助！
〜伊恩〜
答案 0 :(得分：0)
我认为你的意思是网站的菜单，而不是导航栏。就像你一样，我在FF中重现了这个问题，似乎在Safari中运行良好。
您应该更改将列表对齐到左侧的方式。有几行你最好起飞。
从给定的CSS块中删除这些行：
nav a {
display: block; /* delete */
}
.navStyle {
margin-top: -30px; /* delete */
}
现在你应该能够正确看到菜单，但位置错误。要解决此问题，您应该为ul元素或nav添加负边距。
例如：
nav {
margin-top: -40px;
}
更好，是吗？虽然你的代码有问题。这不是使用分隔符制作CSS菜单的正确方法。我建议您查看这些文章并查看其代码，您会发现它们更清晰有效。
http://idearays.com/blog/using-separators-in-lists-menu-with-css/
http://www.jackreichert.com/2011/07/31/how-to-add-a-divider-between-menu-items-in-css-using-only-one-selector/
http://code.adonline.id.au/simple-css-menu-separators-for-navigation/