Python实战计划学习第二天:做一个网页

今天是学习Python的第二天,昨天看过教程后,信心满满,今天就马上做了后面的练习!

最终成果是这样的:

Paste_Image.png

下面是代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>the blah</title>
<link rel="stylesheet" type="text/css" href="homework.css">
</head>
<body>
  <div class="header">
    <img src="images/blah.png">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Site</a></li>
        <li><a href="#">Other</a></li>
    </ul>
</div>
<div class="main-content">
    <h2>The Beach</h2>
    <hr />
    <ul class="photos">
        <li>
            <img src="images/0001.jpg"  width="150" height="150">
        </li>
        <li>
            <img src="images/0003.jpg"  width="150" height="150">
        </li>
        <li>
            <img src="images/0004.jpg"  width="150" height="150">
        </li>
    </ul>
    <p>
        For other uses, see Beach (disambiguation).
"Sand beach" redirects here. For other uses, see Sand Beach (disambiguation).

A sand and shingle beach
A beach is a landform along the coast of an ocean or sea. It usually consists
 of loose particles, which are often composed of rock, such as sand, gravel, shingle,
 pebbles, or cobblestones. The particles comprising a beach are occasionally biological
 in origin, such as mollusc shells or coralline algae.

Some beaches have man-made infrastructure, such as lifeguard posts, changing rooms,
 and showers. They may also have hospitality venues (such as resorts, camps, hotels,
 and restaurants) nearby. Wild beaches, also known as undeveloped or undiscovered beaches,
 are not developed in this manner. Wild
 beaches can be valued for their untouched
 beauty and preserved nature.

Beaches typically occur in areas along the coast where wave or current action 
deposits and reworks sediments.
    </p>
</div>
<div class="footer">
    <P>©Beach</P>
</div>
</body>
</html>

总结

  • css样式写好之后,我们就可以直接套用样式了,非常方便。
  • 只有<body>里面的内容才会显示在网页上面。
  • 不同区域的内容用div标签来分开。
  • <hr />可以画出一条横线。
  • css样式文件和图片文件夹最好摆放在同一个文件夹,否则路径必须写仔细。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,567评论 1 19
  • 预定了篁岭景区两天的景观房,因为小苗发烧,意外地非常值,哪里也没去,基本就在景区泡了近两天,景区图上标注出的点都看...
    Rainie牙牙阅读 284评论 1 0
  • 六月末降下了一场骤雨 所以七月的时候 行人的脚步都显得很匆急 ...
    秋酿的鱼阅读 201评论 0 0
  • 按住shift+方向键可以调整控件大小,按住ctrl+键盘方向键可以移动控件
    因思道客阅读 319评论 0 0