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 >點擊我可以跳轉到百度</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 >鏈接</a></p>

更多詳細內容

CSS樣式知識

CSS可以有3種方式來影響頁面:

  1. 外部式:建立一個css文件,在html文件中,在head標簽中建立link標簽來引用。
  2. 嵌入式:在html文件中,使用style標簽編寫。
  3. 內聯式:在html文件中,對某個標簽,使用style屬性來編寫。

建議:初學者可以直接使用嵌入式來編寫css。

css樣式列表

Github配置

可以參照活動教程

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 簡介瀏覽器可以被認為是使用最廣泛的軟件,本文將介紹瀏覽器的工 作原理,我們將看到,從你在地址欄輸入google.c...
    聽風閣閱讀 3,313評論 0 7
  • 價值導向的病態化 痛苦是漫長的,美麗是短暫的,所以幸福來之不易,且...
    時光留影閱讀 348評論 0 0
  • 透過本質看表象,表象包羅萬象而本質蹲在陰暗的角落不見天日。 簡單的言語下暗藏的泉水看不見摸不著的翻涌著...
    研究說明書閱讀 110評論 0 0
  • 我的愛情圣經里有一句話:愛情從來都是相互吸引。 應該是從電視劇開始,教育女人要讓自己柔弱不堪。要有一個長的帥有錢,...
    一鹽閱讀 420評論 0 0