HTML+CSS编写静态网站-31 添加About页面

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

到目前为止，我们已经创建了Vedio主页，按照顺序，现在,我们准备构建about页面。

所以，首先，我们要创建一个名为about.html的新文件。所以，文件=》新建，然后我们把它保存到和index.html同级的目录下，命名为about.html：

这里我们已经创建了about.html文件，我们先把Dreamweaver默认给的代码删除掉，然后把编码设为Unicode，因为我们要写中文，然后我们把index.html中的所有内容拷贝到about.html。所以。Ctrl+A选择所有文本，Ctrl+C复制所有文本。然后来到about.html，点击Ctrl+ V粘贴所有的文本。

现在，我们来保存文件，看看浏览器的外观。然后我们点击about，它将带我到about.html。当然，现在，about页面与我们的主页index.html完全相同。因为，我们还没有改变任何的东西。

所以让我们开始修改about.html。首先，我要将被选定的导航项更改为about。所以我要从Vedio导航项中剪切选择的classs属性。然后，添加到About中：

 
 
                     <ul>

<li><a href = "index.html">Vedio</a></li>

<li><a href = "about.html" class = "selected">About</a></li>
接下来，我将删除在section元素中的所有内容：

 
 
              <section>

 

</section>
现在，就剩下了我们的标题，导航和我们的页脚。然后，留下一个空白的section。之所以这么做，是因为我们希望我们的页眉和页脚在每个页面上都相同。

现在，我保存about.html。让我们切换到浏览器并转到about.html。

你看，就剩下标题，导航和页脚，然后内容部分是空白的。

您还会看到，About导航项当前是被选中的。如果我回到Vedio，Vedio就是被选中的导航项。所以如果我们在两个页面之间来回滚动，网站访问者就可以通过查看导航来查看他们目前在哪个页面。

现在，我们回到我们的HTML。在section的内部，我将添加虚幻大学的介绍。在这里的img文件夹里面，你会发现oxox.work.jpg，这是我们网站的logo。所以让我们继续添加。我要说img src，然后是我们图片的路径：img/oxox.work.jpg。对于替代文本alt，设置为www.oxox.work，然后我要添加class为profile-photo，然后我关闭标签：

 
 
              <section>

                     <img src="img/oxox.work.jpg" alt = "www.oxox.work" class="profile-photo" >

</section>
这里，您也可以添加自己的图片。宽度为200像素，高度为200像素的正方形图片最为合适。

那么，接下来，我将添加第三级标题About。

最后我还要添加一些关于虚幻大学的段落文本。你也可以自定义你自己的文本。我要说：“专注IT在线教育，提供科学上网技术”。

接下来我要再放一个段落。在本段中，我要说：“我是棒哥，如果你想找到我，我的私人微信：oxoxwork”。

 
 
              <section>

<img src="img/oxox.work.jpg" alt = "www.oxox.work" class="profile-photo" >

                     <h3>About</h3>

                     <p>专注IT在线教育，提供科学上网技术</p>

                     <p>我是棒哥，如果你想找到我，我的私人微信：oxoxwork</p>

</section>
现在，保存并刷新页面：

你看，这有我们的logo。有我们的关于标题。和我们写的段落文字。

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

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

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