Girls coding day 操作手册

本文内容很简单,从零开始操作一个bootstrap模板。

准备工作

  1. 安装visual studio code(或其他文本编辑器)
  2. 安装Chrome浏览器,开发者模式(windows: F12,mac:Option+Command+I)
  3. 登录Github,注册一个账号,并下载Github desktop

编码

首先去找个Bootstrap模板,这个东西相当于已经做好的一个网站。可以在这里找一个。

下载好一个,解压以后,就可以看到结构了。

打开目录下的index.html,应该可以在浏览器里看到样子。

修改index.html里的内容,保存之后,刷新浏览器就可以看到效果。

Tip:使用Ctrl+F可以快速定位你要找的部分。比如你要查找页面上某段文字,可以在html文件中使用查找来定位。

常见html标签

超链接<a>

<a>标签就是常见的链接,它里面可以包含一段文字,使用href属性可以链接到你想跳转的地址。

举例:

<a href="http://www.baidu.com">点击我可以跳转到百度</a>

使用target="_blank"可以新开标签页。

链接地址可以使用相对地址,比如当前的页面是index.html,如果要链接到index.html文件的那个目录下的about.html,那么就可以用:

<a href="about.html">点击我可以跳转about页面</a>

更多详细内容

图片<img>

<img>标签将会在页面上引入一张图片,使用src属性引入图片链接即可:

![](images/eg_tulip.jpg)

这里的地址跟上面的a标签是一个意思。

更多详细内容

分割标签<div>

当你要在页面上包含一系列内容和其他标签,又想不到用什么标签时,你可以用div标签。

<div>这是一段话</div>
<div>
  <div>子内容</div>
  ![](images/eg_tulip.jpg)
</div>

对于初学者来说,div标签最大的作用就是换行。

更多详细内容

段落标签<p>

p标签表示一段话,用法也很简单:

<p>这是一段话,这是一个<a href="http://www.baidu.com">链接</a></p>

更多详细内容

CSS样式知识

CSS可以有3种方式来影响页面:

  1. 外部式:建立一个css文件,在html文件中,在head标签中建立link标签来引用。
  2. 嵌入式:在html文件中,使用style标签编写。
  3. 内联式:在html文件中,对某个标签,使用style属性来编写。

建议:初学者可以直接使用嵌入式来编写css。

css样式列表

Github配置

可以参照活动教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.c...
    听风阁阅读 3,276评论 0 7
  • 价值导向的病态化 痛苦是漫长的,美丽是短暂的,所以幸福来之不易,且...
    时光留影阅读 330评论 0 0
  • 透过本质看表象,表象包罗万象而本质蹲在阴暗的角落不见天日。 简单的言语下暗藏的泉水看不见摸不着的翻涌着...
    研究说明书阅读 104评论 0 0
  • 我的爱情圣经里有一句话:爱情从来都是相互吸引。 应该是从电视剧开始,教育女人要让自己柔弱不堪。要有一个长的帅有钱,...
    一盐阅读 346评论 0 0