第三節跑腿接單網頁的實現之創建導航條

現在的App很多都把導航條放在網頁底部，咱們也放在下面吧。

創建方法是這樣的，先寫個導航條的文件nav.php，然後在需要使用的地方引用。

我們在目錄hs/php/下創建nav.php文件，其內容如下：

注意class="nav"，這樣是引用css美化的，什麼顏色大小等都放在style.css文件中，位於hs/css/目錄下。

其內容是這樣的：

html,body{

margin:0;

padding:0;

}

/*超鏈*/

a{

text-decoration:none;

color:#151081;

font-size:14px;

}

body{

margin-bottom:1000px;

}

/*導航條外層*/

.nav{

bottom:0;

width:100%;

position:fixed;

text-align:center;

z-index:10000;

padding:0.5em 0;

background: -webkit-linear-gradient(#000000,#FF0000, #000000);

background: -o-linear-gradient(#000000,#FF0000, #000000);

background: -moz-linear-gradient(#000000,#FF0000, #000000);

background: linear-gradient(#000000,#FF0000, #000000);

}

/*導航條鏈接*/

.nav a{

display:inline-table;

width:18%;

padding:0;

text-align:center;

color:#FFFFFF;

text-decoration:none;

font-size:1.2em;

}

/*導航條圖片*/

.nav a img{

display:block;

width:2em;

height:2em;

margin:auto;

}

然後在頁面中引用，如

再在需要使用導航條的地方引用nav.php文件，我這裡在index.php中全局引用。

用include函數。

到這裡，保存後，打開首頁就可以看到導航條了。

這裡有五個鏈接，其頁面如下編寫，在目錄hs/php/目錄下創建。

內容如下：

看看函數名和nav.php中的f是對應的，只不過文件名多了個1字，用來歸類。

好了，到此就可以在頁面之間串門了。

下節說說登錄和註冊。如果你有興趣，請關注一下我，查看往期的內容，點擊頭像就能看到。我不是程序員，沒有高深的技術，我只把知道的分享一下。

---

分享到:

---

閱讀更多 茂名阿信 的文章

關鍵字: 上節 WebKit PHP

---