Day18 CSS网页开始写前的准备

学到这里，我们差不多可以开始着手做出一个简单的网页了!

但是在这之前我们需要link一个CSS档案，叫做reset.css档案。

而我们为甚麽要有这个CSS档案呢?不能直接写吗?答案是可以的，但是浏览器会有预设的CSS，才能够分辨我们的Html标签，例如:h1、h2、h3，宽度间距也会有预设的。这会导致一个问题，就是网页无法完全按照我们想要的样子去排版，让我们看看以下范例。

<body>
    <div>
        <h1>标题</h1>
        <h3>导览列</h3>
        <img src="https://picsum.photos/seed/picsum/200/300" alt="">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem maiores maxime quam nam laudantium mollitia. Iusto, distinctio omnis expedita veritatis quod, explicabo perferendis est aliquid harum aspernatur ullam, eos commodi.</p>
    </div>
</body>


在预设的浏览器CSS中，标题与导览列还有图片中间都有间距，但这间距是多少呢?我们不知道。所以我们要自行设定，就必须加入reset.css。

连结link reset.css 并把程序码复制下来开一个css档案(名称reset.css)。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
</head>


套用以後就会发现这些间距不见了!虽然h1、h2、h3这些分辨不出来了，但我们就可以自行透过font-size决定大小!让网页完成造着你的意思走。

今天的前置作业就完成了!接下来就让我们着手做网页吧!


<<:  30天学会 Python: Day 16-图片处理

>>:  Day 17：Next 布景客制化 - 将 Social Link 移到主选单

表单 Controlled Component VS Uncontrolled Component （ Day 11 ）

在 HTML 中，表单的 element 像是 、 和 通常会维持它们自身的 state，并根据使...

EP10 - Django 持续整合持续部署使用 Jenkins 和 AWS CodeDeploy

有 Jenkins、有 Gitlab、 有 Web Portal 又有给 Web Portal 部署...

[Day28]ISO 27001 附录 A.16 资讯安全事故管理

「请问近期有相关资安事件吗？」 「没～有～」 「那请问你们怎麽确认没有资安事件？」 「因为我们没有收...

Day 21. Hashicorp Vault: Path limit

Hashicorp Vault: Path limit 在Vault里，当enable一个Secre...

C# WebSocket实作双向通讯

本文将透过WebSocketSharp来实作WebSocket Client使用js Server使...