HTML+CSS编写静态网站-33 创建Contact页面

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

到目前为止，我们已经完成了我们的Vedio和About页面。现在我们需要制作contact页面。

首先，和我们制作“About”页面一样。我们需要创建一个名为contact.html的新文件。所以：文件=》新建。删除掉所有的内容，将编码格式改为Unicode，然后保存，它与index.html同级，然后命名为Contact.html。

现在，让我们从“About”页面复制所有代码，然后将其粘贴我们的HTML中。

接下来，我们需要将选定的导航项更改为contact。所以，剪切，然后我将它粘贴过来：

<li><a href = "index.html">Vedio</a></li> <li><a href = "about.html">About</a></li> <li><a href = "contact.html" class = "selected">Contact</a></li>

所以现在，保存，刷新，我来到Contact页面。你看，Contact导航项将被选中。

但是，Contact页面与“About”页面完全相同，因为我们尚未对其进行任何修改。所以让我们回到Contact页面。类似于我们以前做的，我们将删除section内的所有内容：

<section>   </section>

接下来，我们需要在这里创建第二个section，我们希望页面是一个2列的布局：

<section>   </section>               <section>                 </section>

现在，第一个section很简单。我只是要添加第三级标题。然后：General Information，然后我要添加一个段落。我会说：“虚幻大学希望能够让每个人享受编程的乐趣，没有编程经验的人能够通过学习找到工作，有编程经验的人能够通过学习全面自己的技术“。如果你有任何问题，请随时与我联系。

<section>                      <h3>General Information</h3>                      <p>虚幻大学希望能够让每个人享受编程的乐趣，没有编程经验的人能够通过学习找到工作，有编程经验的人能够通过学习全面自己的技术“。如果您有任何问题，请随时与我联系</p> </section>

现在第二个section也从h3开始。内容是：Contact Details，

然后我将创建一个无序的列表，其中包括几种与我们联系的方式。在无序列表中，我将添加联系信息。所以我们来创建这个无序列表。Class = “contact-info”。

<section>                      <h3>Contact Details</h3>                      <ul class="contact-info"></ul> </section>

现在我们来填写这个无序列表。里面我想要三种联系方式，手机邮箱和Twitter。对于手机，我们class = “phone”

<ul class="contact-info"> <li class="phone"><a href="tel:8888888">88888888</a></li> </ul>

你可以看到，我们用了一个不同于前使用过的链接。我们在href属性中添加了电话专用的tel，后跟电话号码。在智能手机上，这将告诉浏览器它是一个可以拨打的电话号码。因此，如果您在智能手机浏览器上启动此网站，您可以点击此链接，并直接拨打此电话号码，或者，它至少会显示一个窗口，询问您是否要拨打此电话号码。

接下来，我们添加电子邮件项。我将创建一个新的列表项，class = “mail”。然后创建一个anchor元素到Gmail：

<li class="phone"><a href="tel:17090403915">17090403915</a></li> <li class="mail"><a href="mailto:huangbangqing12@gmail.com">huangbangqing12@gmail.com</a></li>

与电话号码类似，我使用了关键字mailto。这将告诉浏览器这里我要发送邮件到这个电子邮件地址。通常这将打开网站访问者的计算机上的默认电子邮件客户端;例如Outlook或Foxmail等。

最后，我们添加一个Twitter链接。Class=”Twitter”，然后，创建一个新的列表项。添加一个Google开发者的Twitter链接：

<li class="twitter"><a href="https://twitter.com/googledevs">https://twitter.com/googledevs</a></li>

让我们保存并刷新浏览器，看看它是什么样的。

切换到Contact页面。这是我们的两个三级标题。这是我们添加的两个段落。最后，这里是无序的列表，其中包含联系人详细信息。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/contact-page/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/contact-page/