所以，我目前正在重建我的投资组合，我以前使用HTML5构建过网站，但从未见过这个。我想知道我是否正确使用了标签，以及这是否是导致断开连接的原因。
这是一个实时链接，因此您可以自己尝试，代码将遵循。
如果你在Firefox中查看这个页面，一切都应该在这里（顺便说一句，这仅适用于内部页面，不适用于索引），但是在Safari或Chrome中查看它。然后，检查元素，您会注意到标签"section"和该标签中的所有内容都没有被 css 中的浏览器看到。
现在，让我认为它是我缺少的标签之外的东西是当我将其更改为'div并给出的是一类部分时，仍然具有相同的结果。
我也尝试过 Modernzr，"部分"标签甚至没有出现在列表中。并且，它验证 100%。
注意：我删除了许多无关的内容，使大纲完好无损。例如，"ul"标签都有多个订单项。我担心非必要的代码会妨碍干净的视图。
编辑的代码：将类添加到部分以尝试在浏览器中抓取它，并为section标签添加了 CSS。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Lisa Reisman, portfolio, web design, Atlanta, Georgia, print, photography, responsive web design, CSS3, HTML5, javascript, transitions, ">
<meta name="description" content="The portfolio of freelance designer Lisa Reisman, interactive and print, photography and planning in Altanta, Georgia.">
<title>Lisa Reisman Portfolio - About Lisa</title>
<link href="css/keyframes.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="css/basic.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!--jquery-->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(onclick) {
$("a#about").addClass("slideDwn");
$("a#inter").addClass("slideUp");
$("a#print").addClass("slideUp");
$("a#photo").addClass("slideUp");
}
</script>
<!--modernizer-->
<!-- <script src="js/modernizr.custom.71520.js"></script> -->
<!--google analytics-->
</head>
<body id="about_pg">
<main id="wrap">
<aside>
<div id="sidehead"><a href="index.html" title="Lisa Reisman Portfolio Web Site"><span class="l">L</span> <span class="r">R</span></a></div>
<div id="sidenav">
<ul id="subnav">
<li><a id="about" class="slide" href="about.html" title="About Lisa Reisman">A</a><span class="word">bout</span></li>
<li><a id="inter" class="slide" href="interactive.html" title="Lisa Reisman Interactive Projects">I</a></li>
<li><a id="print" class="slide" href="print.html" title="Lisa Reisman Print Work">P</a></li>
<li><a id="photo" class="slide" href="photo.html" title="Lisa Reisman Photography">Ph</a></li>
</ul>
</div><!--end side nav-->
</aside><!--end aside-->
<div id="innersocial">
<ul id="contact">
<li><a href="https://www.facebook.com/lisarosereis" title="Lisa Reisman Facebook" rel="external"><img src="i/lisareisman-facebook.png" alt="Lisa Reisman Facebook" /></a></li>
<li><a href="www.linkedin.com/pub/lisa-reisman/9/22a/912/" title="Lisa Reisman LinkedIN" rel="external"><img src="i/lisareisman-linkedin.png" alt="Lisa Reisman Facebook" /></a></li>
<li><a href="https://twitter.com/LisaRose_webD" title="Lisa Reisman Twitter" rel="external"><img src="i/lisareisman-twitter.png" alt="Lisa Reisman Facebook" /></a></li>
<li><a href="#" title="Lisa Reisman MySpace"><img src="i/lisareisman-myspace.png" alt="Lisa Reisman Facebook" /></a></li>
<li><a href="mailto:lisa.reisman@lisareisman.com?subject=Saw%20Your%20Web%20Site" title="Lisa Reisman Email"><img src="i/lisareisman-email.png" alt="Lisa Reisman Email" /></a></li>
</ul>
</div><!--end inner social div-->
<section class="section" id="about-nav">
<ul>
<li class="btn"><a href="#openTech" title="Lisa Reisman Techincal Knowledge">Technical</a></li>
<li class="btn"><a href="#openIndus" title="Lisa Reisman Industries Experience">Industries</a></li>
<li class="btn"><a href="i/ReismanResume13.pdf" title="Lisa reisman Resume 2013" rel="external">Resume</a></li>
</ul>
</section><!--end section nav-->
<div id="openTech" class="modalDialog">
<div>
<a href="#close" title="close" class="close">X</a>
<a href="i/ReismanResume13.pdf" title="Lisa Reisman Resume 2013"><img src="i/lisareisman-download_resume.png" alt="Lisa Reisman Resume" /></a>
<h2>Technical Knowledge</h2>
<h3>Advanced</h3>
<h4>Apps</h4>
<ul>
<li>Illustrator • </li>
</ul>
<h4>Developer Tools</h4>
<ul>
<li>DreamWeaver • </li>
</ul>
<h4>On-The-Job Skills</h4>
<ul>
<li>Organized • </li>
</ul>
<h4>General Advanced Abilities</h4>
<ul>
<li>Responsive Web Design • </li>
</ul>
<h3>Intermediate</h3>
<h4>Apps & Frameworks</h4>
<ul>
<li>After Effects • </li>
</ul>
<h4>Developer Tools</h4>
<ul>
<li>PHP/MySQL • </li>
</ul>
<h3>Working on Expanding Knowledge</h3>
<h4>Apps, Frameworks & Miscellaneous</h4>
<ul>
<li>Bootstrap • </li>
</ul>
<h3>Platforms</h3>
<ul>
<li>Apple • </li>
</ul>
</div>
</div><!--end tech modal-->
<div id="openIndus" class="modalDialog">
<div>
<a href="#close" title="close" class="close">X</a>
<h2>Industry Experience</h2>
<ul>
<li>Medical • </li>
</ul>
</div>
</div><!--end industries modal-->
</main><!--end wrap-->
</body>
</html>
/*=== PAGE CONTENT ===*/
section.section {
width: 680px;
float:left;
margin: -285px 62px 0px 205px;
opacity: 1;
}
section.section .fade {
opacity: .0;
animation: fade .75s ease;
-webkit-animation: fade .75s ease;
-o-animation: fade .75s ease;
-moz-webkit-animation: fade .75s ease;
}
section.section .switch {
-webkit-transition: margin-top .75s ease .5s;
-moz-transition: margin-top .75s ease .5s;
-o-transition: margin-top .75s ease .5s;
transition: margin-top .75s ease .5s;
}
section.section li:first-child.btn {
padding-right: 16px;
}
section.section li.btn {
height: 66px;
width: 300px;
font-size: 3em;
line-height: 2.0;
padding: 0px 16px 0 7px;
}
section.section li a {
/* padding: 0 7px; */
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: thin solid #000000;
}
section.section li a img {
}
至少你在jQuery中缺少一个右大括号
$(document).ready(function(onclick) {
$("a#about").addClass("slideDwn");
$("a#inter").addClass("slideUp");
$("a#print").addClass("slideUp");
$("a#photo").addClass("slideUp");
}); // You were missing );
对没有width或height的小圆圈使用 float:left; 。它将根据文本的大小进行调整。
根据需要放一些padding。
您的代码可以在没有jquery的情况下更短（只是普通的javascript和CSS）。