稻米鼠 · 更新于 2018-08-19 07:00:33

第十五章 开始征途

如果本章演示效果无法正常展示,请至主站查看 http://coffee.zji.me/

我说过学代码要勤动手,其实你们光拿我当相声看了,根本没动手。别以为我不知道哦。今天开始我们要一起写一个页面了,大家可一定一定要动手跟着操作才行啊,否则你会跟不上的!

看懂和会做绝对是两码事!

我们要开始写一个页面了,这是我们的处女作,大家要好好珍惜,认真享受过程~~(怎么总觉得好猥琐?)我们要写一个很简单很普通的页面,就写一个最朴素的 App 发布页面好了,这应该算是一个很实用的东西。我就不画效果图给大家看了,因为这又不是给老板干活,花毛线效果啊,做成什么样是什么样就好了嘛~

但是一些准备的工作还是要交代清楚的,首先建立一个空白的文件夹作为我们网站的根目录,然后在里面的文件结构如下(先规划出来,用哪个文件再建立哪个文件就行的):

/

  • |_ images
  • |_ styles
    • |_ main.css
  • |_ index.html

其中 images 文件夹用来放我们后面要用到的所有图片。styles 文件夹下的 main.css 里面用来写我们用到的所有 css 样式。最后 index.html 当然就是我们这次要写的页面了。

现在在 Notepad++ 里面新建一个文件,然后菜单 —— 格式 —— 以 UTF-8 格式编码,然后保存文件为 index.html。

网页乱码就是因为这里的编码没选对,现在不要再问我为什么乱码了哦~~

文件里粘入如下代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我们的目标是抢前端的饭碗!</title>
        <link href="styles/main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <!-- 后面的 Html 代码写这里,我就不老复制完整的网页代码了。 -->
    </body>
</html>

CSS 代码的建立方法一样,在里面粘贴如下内容:

/* 这是我写的第一个 CSS 文件,内心十分的激动,在这心潮澎湃之余,我想到了一个真理 —— 稻米鼠真帅! */

认真写,不许错字,否则后果很严重!

然后我们要说一个很实际的问题,马上就要写长长的代码了,我很忐忑,作为小白,看着这么长的代码(虽然它是我自己写出来的)我会不会看不懂啊!

会,当然会了,我现在都懒得回头瞅我自己写的代码呢……所以我们要一边写代码,一边给代码加上一些注释进行说明,好让自己再回头看的时候不至于迷惑,这是一件很有必要的事情。

那么如何注释呢?在 Html 代码里注释的格式如下:

<!-- 这里的内容就是注释 -->

下面是 CSS 文件里的注释格式:

/* 这样写就是 css 代码中的注释 */

想想标记语言是怎么回事来着?现在我们就是用特定的符号来标记出来注释的内容。那么现在要记住:注释是为了我们日后能够方便的理解代码用的,除此之外,他不会起任何其他作用。他不会被显示,也不会对页面造成影响,你就当他是电影中的旁白好了。

虽然注释不起作用,但是你也不能给他乱放,否则至少也会让我们不方便阅读。一般我们新起一行书写注释或者把注释放在行尾。

好了,准备工作做完了,下节课开始写这个页面的导航部分~一个属于你的战役就此拉开了序幕……(我好像是讨人厌的旁白……)

本章学习卡片:卡片 15


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me