HTML/CSS自制導航頁面做瀏覽器主頁
介紹利用簡單的HTML/CSS來編寫導航頁面，并設置為瀏覽器本家兒頁。
將本身需要用到的常用毗連做當作導航頁面，美不雅便利。比擬瀏覽器自帶的導航頁心猿意馬制，便宜導航頁面有更多的自由度。
東西/原料
- VS Code（或其他文本編纂東西）
- 瀏覽器
方式/步調
- 1
第一步，我們在一個位置固心猿意馬的文件夾下（不常移動）新建文本文件，點竄后綴為.html，然后右鍵->打開體例，找一個文本編纂器打開。
- 2
在文本編纂器中，編寫根基的<html><head><body>這些標簽。
然后，在<head>下面添加一行如圖所示內容：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
這一行指心猿意馬了編碼，不然在一些瀏覽器中會呈現中文亂碼的環境。
- 3
接下來在Body中，添加一些<a>標簽。
格局為：<a href=網頁鏈接>顯示名稱</a>
添加好保留，然后用瀏覽器打開此html文件，可以看到簡單的導航頁以形當作。
- 4
接下來，在head或者其它便利位置添加CSS層疊樣式表。
如圖，添加了一個類名為tag的樣式，類名為math的樣式，類名為cs的樣式。
然后給body中的每個a標簽添加class屬性如圖，使得三個樣式應用給它們。
結果如圖，不敷美不雅只是用于演示樣式。
- 5
接下來繼續添加一個類名為group的樣式。
然后在body里面，利用div標簽對那些暗示鏈接的a標簽分組。
對每個分組添加class屬性group，利用類名為group樣式；而且各自指心猿意馬style屬性籠蓋失落group樣式中的布景色。
- 6
然后，在CSS樣式中繼續添加margin外邊距，padding內邊距，border-width邊框寬，border-radius邊框圓角半徑等。
最后保留，瀏覽器刷新結果如圖。
- 7
最后，打開瀏覽器設置頁面，設置啟動本家兒頁為文件位置，如圖所示。
注重事項
- 本經驗介紹了最根基的標簽，標簽，CSS的用法入門，可以完當作最根基導航頁面的建造。可是CSS/HTML中仍有良多良多手藝可以去進修。
- 用當地文件建造導航頁面，和一些小我本家兒頁的建造，道理是一樣的。
- 發表于 2018-04-01 00:00
- 閱讀 ( 1523 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章