iT邦幫忙

0

多個html檔案公用一個header.html和footer.html,但是這兩個html吃不到index.html引入之css檔

abc 2022-06-29 22:13:342127 瀏覽
  • 分享至 

  • xImage

請教一下各位大神,我剛剛將header以及footer利用外部引入index.html的方式進行編寫(如圖),但是我發現它會無法吃到index.html引入之css檔。

想要請教一下有甚麼辦法可以解決的嗎?麻煩各位了!

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
F
iT邦新手 2 級 ‧ 2022-06-30 10:13:15
最佳解答

css是有成功import的
把你

<div id="headerPage">

改成

<header id="headerPage">

就好了

abc iT邦新手 5 級 ‧ 2022-07-02 14:27:35 檢舉

謝謝您 這樣確實就可以了!

1
小魚
iT邦大師 1 級 ‧ 2022-06-29 22:32:15

這問題好奇怪,
你的header跟我的header不一樣嗎?

看更多先前的回應...收起先前的回應...
abc iT邦新手 5 級 ‧ 2022-06-29 23:09:42 檢舉

我的header長這樣(https://github.com/Pacific-Feng/Pacific-Feng.github.io/blob/main/header.html )

但是因為這個東西我會在很多頁面都用到,所以我用引用的方式,這樣只需要改一個檔案,其他引用他的都能被改到了。

但是我現在遇到的問題就是,如果我將header.html的內容都放進去index.html,css可以正常的吃到。但是我用引用的方式,css就無法被吃到了。想要問一下有沒有甚麼可以解決的方法。

不好意思我一開始可能敘述不清楚,如果還有需要補充的可以告訴我。謝謝您~

小魚 iT邦大師 1 級 ‧ 2022-06-30 06:55:42 檢舉

這樣子串還蠻神奇的,
所以是哪裡吃不到?

abc iT邦新手 5 級 ‧ 2022-06-30 07:37:53 檢舉

就是我利用引入header.html的方法的話,網頁會長這個樣子:
https://pacific-feng.github.io/(header主要就是上面的選單列,footer主要就是下面fb等等的連結列)

如果我照正常的方法來做,他會長成這樣:https://pacific-feng.github.io/Sun-Yat-Sen-University.io/

從這兩個可以看得出來引入header.html與footer.html的這兩個html都沒有吃到引入index.html的css檔

我也覺得正常來說應該要吃到,麻煩各位大神解答了QQ

archer9080 iT邦研究生 3 級 ‧ 2022-06-30 09:39:37 檢舉

你把header內引入的style_pattern.css換到index裡面引入試試

小魚 iT邦大師 1 級 ‧ 2022-06-30 10:39:32 檢舉

應該是有吃到啊,
不過我發現幾個有趣的東東

.navbar-nav li:hover >ul.dropdown-menu {

header ul.navbar-nav ul li{

我猜應該還有更多...

0
前端野人
iT邦新手 3 級 ‧ 2022-06-30 01:18:11

相對路徑與絕對路徑得問題

你寫成 href="/style.css" 看看

abc iT邦新手 5 級 ‧ 2022-06-30 07:38:28 檢舉

喔喔我試試看 謝謝您

abc iT邦新手 5 級 ‧ 2022-06-30 08:13:36 檢舉

好像還是不行QQ

2
海綿寶寶
iT邦大神 1 級 ‧ 2022-06-30 11:25:58

建議你下次問問題時
要註明你是在GitHub Pages的環境
以節省彼此時間
(因為 GitHub Pages 的環境跟一般 Web Server 有些不同的地方)

另外我想請教你的「重點」是什麼
1.練習寫 HTML/CSS/JS:建議找個一般的 Web Server/Free Web Hosting 來練習,會比較單純
2.有自己的免費部落格:建議使用 GitHub 的 Jekyll,又快速又美觀

都已經2022年了
如果你辛辛苦苦地用 GitHub Page 寫部落格
做出來又沒有比Jekyll 的美觀
實在意義不大

abc iT邦新手 5 級 ‧ 2022-07-02 14:30:46 檢舉

謝謝您的回答,讓我受益良多。我目前只是為了練習而已,我等等也試試您說的Jekyll,裡面的範本真的都蠻精緻的!
謝謝您~

我要發表回答

立即登入回答