【发布时间】：2016-12-21 15:55:45
【问题描述】：
所以我有这个网页：http://cmpt165.csil.sfu.ca/~jpadayat/exercise12/exercise12.html
我需要让它看起来像这样： https://courses.cs.sfu.ca/2016fa-cmpt-165-c0/pages/E12large/view
我不需要缩小尺寸，第二个链接只是指定位。
我尝试在我的 CSS 中进行以下更改：
main {
float: right;
}
或
nav {
float: left;
}
这是我的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<title>Protocols</title>
</head>
<body>
<h1 id="top">Protocols</h1>
<nav>
<ul>
<li><a href="#top">Top of Page</a></li>
<li><a href="#email">Email</a></li>
<li><a href="#http">HTTP</a></li>
</ul>
</nav>
<main>
<p><dfn>Protocols</dfn> (or <dfn>communications protocols</dfn>) are agreed ways for to computers to communicate and exchange information. The Wikipedia page on <a href="https://en.wikipedia.org/wiki/Communications_protocol">communications protocols</a> contains much more information than we can cover here.</p>
<section id="email">
<h2>Email Protocols</h2>
<p>There are several protocols that make email work:</p>
<ul>
<li><p><abbr title="Internet Message Access Protocol">IMAP</abbr> is used to fetch mail from the server so you can read it in clients like Thunderbird or on your phone.</p></li>
<li><p><abbr title="Post Office Protocol">POP</abbr> is an older protocol that does the same job as IMAP, but is less flexible.</p></li>
<li><p>The <abbr title="Simple Mail Transfer Protocol">SMTP</abbr> protocol is used to send email, either from a client program you are using, or from one mail server to another. SMTP has existed since the 1980s, but has been extended several times to add user authentication, encryption, and other features.</p>
<p>SMTP is where most spam fighting happens: preventing fraudulent email from being sent the the ultimate goal.</p></li>
</ul>
</section>
<section id="http">
<h2>HTTP</h2>
<p>The <a href="https://en.wikipedia.org/wiki/World_Wide_Web">World Wide Web</a> rests on the protocol <abbr title="Hypertext Transfer Protocol">HTTP</abbr>.</p>
<p>HTTP is a client-server protocol. That means that an HTTP client (like a web browser, also called a “user agent”) contacts an HTTP server and makes a request. The request is likely a request for a particular web page available on that server. The server will respond with a response: often the contents of the web page that was requested.</p>
<section id="uses">
<h3>Uses</h3>
<p>HTTP is often used to transfer <abbr title="Hypertext Markup Language">HTML</abbr> documents which we generally think of as “web pages”. HTML contains markup like <code class="html"><em></code> and <code class="html"><a href="http://example.com/"></code>.</p>
<p>Every piece of content available on the web is called a <dfn>resource</dfn> and is available at a URL like <code class="url">http://example.com/somepage.html</code>.</p>
</section>
</section>
</main>
</body>
</html>
这是我的 CSS：
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
margin: 0.2em;
padding: 0.75em 1em;
background: #689;
background-image: linear-gradient(to bottom, #689, #245);
border-radius: 1.25em;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
main {
float: right;
}
似乎没有任何效果。请帮忙。谢谢。
【问题讨论】：
-
请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决或您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布 Minimal, Complete, and Verifiable example (MCVE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅Something on my web site doesn't work. Can I just paste a link to it?
-
请添加您的html和css代码
-
对此感到抱歉。我已经添加了它们。
标签： html css position css-float css-position