简单网页实现

在学习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>

效果:


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

全部评论

相关推荐

05-12 17:00
门头沟学院 Java
king122:你的项目描述至少要分点呀,要实习的话,你的描述可以使用什么技术,实现了什么难点,达成了哪些数字指标,这个数字指标尽量是真实的,这样面试应该会多很多,就这样自己包装一下,包装不好可以找我,我有几个大厂最近做过的实习项目也可以包装一下
点赞 评论 收藏
分享
白火同学:大二有这水平很牛了,可以适当对关键信息加粗一点,比如关键技术、性能指标之类的。
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
06-24 14:18
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务