@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli'), url(https://fonts.gstatic.com/s/muli/v7/minRpKQdEvXRRS8oAbAtWvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
body {
font-family: 'Muli', Helvetica, Ariel, Georgia, serif;
font-size: medium;
margin: 0px;
}
#initial {
max-width: 100%;
max-height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
h1 {
font-size: 3.5em;
font-style: italic;
font-weight: normal;
text-align: center;
border-color: red;
border-style: solid;
margin-top: 0px;
margin-bottom: 10px;
padding: 0px;
}
div.tableRow {
display: table-row;
}
div.tableContainer {
display: table;
}
#profile {
display: table-cell;
width: 250px;
height: auto;
margin-right: 20px;
margin-bottom: 20px;
}
#bio_text {
display: table-cell;
vertical-align: top;
padding-left: 20px;
padding-right: 20px;
}
#ccb, #cfc {
max-width: 100%;
max-height: 100%;
border-color: red;
border-style: solid;
}
#contactForm {
display: table-cell;
border-color: red;
border-style: solid;
}
#contactInfo {
display: table-cell;
border-color: red;
border-style: solid;
}
#contactInfo ul li {
list-style-type: none;
}
#contactInfo h2 {
text-align: center;
}
footer {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
text-align: center;
}
footer ul li {
list-style-type: none;
display: inline;
padding: 0px 50px 0px 50px;
border-color: red;
border-style: solid;
}
footer p {
text-align: center;
border-color: red;
border-style: solid;
}
footer ul li a:link, footer ul li a:visited {
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chris Wang</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
<header>
<img id="initial" src="img/background_final.jpg" alt="Chris Wang">
</header>
<section id="bio">
<h1>Who Am I?</h1>
<div class="tableContainer">
<div class="tableRow">
<div id="bio_text">
<p>
blah blah blah personal description
</p>
<p>
personal description
</p>
<p>
more personal stuffs
</p>
<p>
more personal stuffs
</p>
</div>
<img id="profile" src="img/profile_edit.jpg" alt="This is me!">
</div>
</div>
</section>
<h1>What Have I Done?</h1>
<section id="past">
<div class="tableRow">
<div id="ccb">
<a href="pages/ccb/index.html">
<img id="ccb_thumbnail" src="pages/ccb/img/thumbnail_resize.jpg" alt="Cranbrook Culture Book">
</a>
</div>
<div id="cfc">
<a href="pages/cfc/index.html">
<img id="cfc_thumbnail" src="pages/cfc/img/thumbnail_resize.jpg" alt="Cranes for Change">
</a>
</div>
<!--<div id="trombetta">
<a href="pages/trombetta/index.html">
<img id="trombetta_thumbnail" src="pages/trombetta/img/thumbnail.jpg" alt="Trombetta Intern">
</a>
</div>-->
</div>
</section>
<h1>Let's Talk!</h1>
<div class="tableContainer">
<fieldset id="contactForm">
<form action="contact.php" method="post">
<div class="tableRow">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" value="" placeholder="Steve Jobs" required>
</div class="tableRow">
<div class="tableRow">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" value="" placeholder="stevejobs@apple.com" required>
</div>
<div class="tableRow">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" value="" placeholder="(000)-000-0000">
</div>
<div class="tableRow">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="tableRow">
<label></label>
<input type="submit" value="Send!">
</div>
</fieldset>
<div id="contactInfo">
<h2>Contact Info</h2>
<ul>
<li>Chris Wang</li>
<li>chriswang.work</li>
<li><a href="mailto:xxx@icloud.com" title="My Email">xxx@icloud.com</a> </li>
<li><a href="tel:+##########" title="My Number">###-###-####</a></li>
</ul>
<img id="linkedin" src="img/linkedin.png" alt="LinkedIn Account">
<img id="twitter" src="img/twitter.png" alt="Twitter Account">
</div>
</div>
<footer>
<ul>
<li><a href="homepage.html#bio" title="Bio">Bio</a></li>
<li><a href="homepage.html#past" title="Experience">Experience</a></li>
<li><a target="_blank" href="file/resume.pdf" title="Resume">Resume</a></li>
<li><a href="pages/quotes/index.html" title="My Favorite Quotes">Quotes</a></li>
</ul>
<p>© 2016 Chris Wang</p>
</footer>
</body>
</html>
我正在尝试建立一个个人网站，其中包含完整的页面幻灯片，只有HTML＆amp; CSS（可能是一些用于后端内容的超级简单的PHP），这里是我所谈论的一个例子：http://www.hannahsilverton.com
现在我使用jpeg的开放幻灯片的最大高度和重量规则，我用photoshop将我的首字母放在一张很酷的图片上。然而，当我无法弄清楚如何将我的2段生物片/图片变成整页幻灯片时。
此外，我在过去的体验部分也遇到了麻烦。我想让它们以屏幕上的几张牌的形式出现（每卷2或3张）。然而，当我使用表格显示w / css时，它所做的就是将两张卡片放在一起（与我使用内联的结果相同）。
提前致谢！我刚刚在一个月前学过这门语言，所以如果我犯了任何noob错误，请原谅我：P
最后，如果有人想查看我现在拥有的代码，请在下方发表评论，然后我就会收件箱。
再次感谢！
答案 0 :(得分：1)
这不是一个完整的答案，但我认为你不想要一个完整的解决方案，而是一步一步的指导，所以我冒着被投票的风险。我们走了：
width: 100%;和height: 100%;。将它们放在另一个div中，类content，还有width: 100%; height: 100%;左右。它将包含所有幻灯片。制作content div overflow-x: hidden; overflow-y: auto; 所以基本上这是最重要的步骤，请看这个例子here