在学习Python爬虫时，接触了一点HTML的知识，于是就跟着教程动手写了一个网页。

HTML代码是跟着视频写的，CSS样式直接用的教程里的，暂时还没学CSS。

有几点要注意：

1.css样式要和html文件放在一个文件夹下，否则要指定到css所在文件，记得把\改成/。

2.图片也要和html文件放在一个文件夹下，除背景图，其他要指定大小，即width和height。

3.主体部分主要是图片+标题+一句话。一句话用的是电影《降临》里的台词，图片用的也是电影里的外星人文字。

4.最后加了一个商标。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Arrival</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <div class="header">
    <img src="IMG_6552.JPG" width="1200" height="500">
    <ul class="nav">
      <li><a href="#">Submit</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Rebel</a></li>
    </ul>
  </div>
  <div class="main-content">
    <h2>Arrival</h2>
    <ul class="article">
      <li>
        <img src="Louise1.jpg" width="90" height="90">
        <h3><a href="#">Louise</a></h3>
        <p>This was the beginning of  your story.</p>
      </li>
      <li>
        <img src="Human1.jpg" width="90" height="90">
        <h3><a href="#">Human</a></h3>
        <p>Memory is a strange thing.</p>
      </li>
      <li>
        <img src="OfferWeapon_1.jpg" width="90" height="90">
        <h3><a href="#">Peace</a></h3>
        <p>I used to think.</p>
      </li>
    </ul>
  </div>
  <div class="footer">
    <p>&copy; Wonz</p>
  </div>
</body>
</html>

效果：


版权声明：本文为博主原创文章，未经博主允许不得转载。