iT邦幫忙

0

為甚麼css和html連不起來? 但複製到Codepen裡就可以正常呈現

#html #css #javascript #新手求講解
0967052569 2024-10-08 14:17:49 ‧ 397 瀏覽

  • 分享至 

  • xImage 
<!DOCTYPE html>
<html lang="zh-Hant-TW">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>article</title>
        <style>
            .question {
                display: none; /* 初始隱藏所有問題 */
            }
            .active {
                display: block; /* 只顯示當前問題 */
            }
        </style>
    </head>
    <body>
        <div class="container">
            
            <nav class="menu">
                    
                <h1>
                    <a href="home.html"></a>
                </h1>  
                        
                    
                <ul>
                    <li><a href="#">讀嘉診療所</a></li>
                    <li><a href="vlog.html">嘉一點vlog</a></li>
                    
                    <li><a href="article.html">讀嘉記義</a></li>
                    <li><a href="about.html">1+1=4</a></li>
                    
                </ul> 
                <!-- 漢堡按鈕 -->
                <a href="javascript:void(0);" class="icon" onclick="toggleMenu()">&#9776;</a>
                    
            </nav>

            <!-- 心理測驗首頁 -->
            <div class="main-page"  id="mainPage" style ="text-align:center">
            
                <h1><b>讀嘉診療所</b></h1>
                <h4>
                    <br>總是被繁雜的課業壓到喘不過氣的你，給自己一個機會：去放空吧
                    <br>有些答案在書本找不到，就去經歷那些不同的人間煙火
                    <br>把那些沒走過的路，都去走一遍！
                    <br>治療一直困在匆忙生活的你，是時候來一場漫遊之旅了......
                </h4>
                <button  class="start-button"  onclick="startQuiz()">立即檢測</button>
            </div>

            <form id="quizForm">

                 <!-- 進度條容器 -->
                <div class="progress-container">
                <div class="progress-bar" id="progress-bar"></div>
                <div class="progress-text" id="progress-text">0%</div>
                </div>

                <!-- 問題 1 -->
                <div class="question" id="question1" style="text-align:center">
                    <p>
                        <br>清晨六點半，叮咚，訊息聲響起。
                        <br>突如其來的鈴聲驚醒在睡夢中的你，
                        <br>雙擊手機螢幕，睡眼惺忪的查看訊息：「今天學校跳電，停課一天。」
                        <br>此時你會……？
                    </p>
                    
                    <label>
                        <input type="radio" name="q1" onchange="addScoreAndNext(1,{influencer: 2, nature: 1, nostalgia: 2, foodie: 1})">
                        A.心想難得放假，立馬躺回去繼續睡，睡到自然醒
                    </label><br>
                    <label>
                        <input type="radio" name="q1" onchange="addScoreAndNext(1,{influencer:1 , nature: 2, nostalgia: 1, foodie: 1})">
                        B.內心掙扎了一下決定設個九點的鬧鐘再起來吃早餐
                    </label><br>
                    <label>
                        <input type="radio" name="q1" onchange="addScoreAndNext(1,{influencer: 1, nature: 1, nostalgia: 1, foodie: 2})">
                        C.都起床了，盥洗完去吃個早餐吧
                    </label><br>
                </div>
        
                <!-- 問題 2 -->
                <div class="question" id="question2" style="display:none;text-align:center">
                    <p>
                        <br>用餐完畢去櫃檯結帳的時候，老闆拿出四張優惠券，
                        <br>並說道：「同學，老闆這裡有四張不同的優惠卷，挑一張吧！」
                        <br>你驚喜若狂的向老闆道謝後，你會挑選……？
                        
                    </p>
                    
                    <label>
                        <input type="radio" name="q2" onchange="addScoreAndNext(2,{foodie: 2})">
                        A.四人同行一人免費的餐廳優惠卷
                    </label><br>
                    <label>
                        <input type="radio" name="q2" onchange="addScoreAndNext(2,{influencer: 2})">
                        B.四人同行的299元遊樂園學生票
                    </label><br>
                    <label>
                        <input type="radio" name="q2" onchange="addScoreAndNext(2,{nostalgia: 2})">
                        C.單人DIY手作陶藝體驗課程
                    </label><br>
                    <label>
                        <input type="radio" name="q2" onchange="addScoreAndNext(2,{nature:2})">
                        D.歷史文化展覽入園卷
                    </label><br>
                </div>
        
                <!-- 問題 3 -->
                <div class="question" id="question3" style="display:none;text-align:center">
                    <p>
                        <br>你開心的走在街上，揮舞著手上的優惠卷，心想真是美好的一天。
                        <br>突然，一陣大風刮來，手中的優惠卷隨風飄去，你下意識地追向飄走的
                        <br>優惠卷，回過神來，眼前出現了一道料想不到的景象，此時你看到的是......？
                        
                    </p>
                    
                    <label>
                        <input type="radio" name="q3" onchange="addScoreAndNext(3,{ nature: 1, nostalgia: 2})">
                        A.充滿歷史痕跡的眷村
                    </label><br>
                    <label>
                        <input type="radio" name="q3" onchange="addScoreAndNext(3,{ nature: 2, nostalgia: 1})">
                        B.導遊正在進行外國觀光客的導覽
                    </label><br>
                    <label>
                        <input type="radio" name="q3" onchange="addScoreAndNext(3,{ influencer: 2})">
                        C.燦爛耀眼的花海
                    </label><br>
                    <label>
                        <input type="radio" name="q3" onchange="addScoreAndNext(3,{foodie:2})">
                        D.人聲鼎沸的各國特色美食市集
                    </label><br>
                </div>

                <!-- 問題 4 -->
                <div class="question" id="question4" style="display:none;text-align:center">
                    <p>
                        <br>看到這個景象，你會......？
                    </p>
                    
                    <label>
                        <input type="radio" name="q4" onchange="addScoreAndNext(4,{ influencer:2})">
                        A.與景象合照
                    </label><br>
                    <label>
                        <input type="radio" name="q4" onchange="addScoreAndNext(4,{ nature: 2})">
                        B.靜靜的待在一旁觀察
                    </label><br>
                    <label>
                        <input type="radio" name="q4" onchange="addScoreAndNext(4,{ foodie: 2})">
                        C.馬上找當地人詢問情況
                    </label><br>
                    <label>
                        <input type="radio" name="q4" onchange="addScoreAndNext(4,{nostalgia:2})">
                        D.單純拍下眼前景象
                    </label><br>
                </div>

                <!-- 問題 5  -->
                <div class="question" id="question5" style="display:none;text-align:center">
                    <p>
                        <br>這時，遠方有一個人朝你走來，你覺得他是為了......？
                    </p>
                    
                    <label>
                        <input type="radio" name="q5" onchange="addScoreAndNext(5,{ foodie:2})">
                        A.找尋美食的同路人
                    </label><br>
                    <label>
                        <input type="radio" name="q5" onchange="addScoreAndNext(5,{ influence:2})">
                        B.請我幫他拍照
                    </label><br>
                    <label>
                        <input type="radio" name="q5" onchange="addScoreAndNext(5,{ natural: 2})">
                        C.跟我介紹當地的風俗民情
                    </label><br>
                    <label>
                        <input type="radio" name="q5" onchange="addScoreAndNext(5,{nostalgia:2})">
                        D.邀請我參加當地舉辦的祭典
                    </label><br>
                </div>

                 <!-- 問題 6  -->
                 <div class="question" id="question6" style="display:none;text-align:center">
                    <p>
                        <br>與他熱情交流後，他拿出一樣物品送你做紀念，
                        <br>你認為這樣物品會是......？
                    </p>
                    
                    <label>
                        <input type="radio" name="q6" onchange="addScoreAndNext(6,{ influence:2})">
                        A.精緻的吊飾
                    </label><br>
                    <label>
                        <input type="radio" name="q6" onchange="addScoreAndNext(6,{ nostalgia:2})">
                        B.黑膠唱片樂高
                    </label><br>
                    <label>
                        <input type="radio" name="q6" onchange="addScoreAndNext(6,{ natural: 2})">
                        C.具有當地特色的服飾
                    </label><br>
                    <label>
                        <input type="radio" name="q6" onchange="addScoreAndNext(6,{foodie:2})">
                        D.祖傳秘製的地方滷味
                    </label><br>
                </div>

                <!-- 問題 7  -->
                <div class="question" id="question7" style="display:none;text-align:center">
                    <p>
                        <br>你認真的端詳手中的禮物，幾秒後抬頭準備向他致謝，
                        <br>卻發現他已不見人影，此時你內心會想......？
                    </p>
                    
                    <label>
                        <input type="radio" name="q7" onchange="addScoreAndNext(7,{ influence:1,natural:1,nostalgia:1,foodie:2})">
                        A.沒有多想，可能是有事先離開了
                    </label><br>
                    <label>
                        <input type="radio" name="q7" onchange="addScoreAndNext(7,{ influence:1,natural:2,nostalgia:1,foodie:1})">
                        B.好可惜，我還沒聊夠耶！
                    </label><br>
                    <label>
                        <input type="radio" name="q7" onchange="addScoreAndNext(7,{ influence:1,natural:1,nostalgia:2,foodie:1})">
                        C.我還沒道謝呢，怎麼就走了
                    </label><br>
                    <label>
                        <input type="radio" name="q7" onchange="addScoreAndNext(7,{influence:2,natural:1,nostalgia:1,foodie:1})">
                        D.啊～忘記跟他要聯絡方式了
                    </label><br>
                </div>

                 <!-- 問題 8  -->
                 <div class="question" id="question8" style="display:none;text-align:center">
                    <p>
                        <br>天色漸暗，你準備踏上返回的路途，此時的你會選擇......?
                    </p>
                    
                    <label>
                        <input type="radio" name="q8" onchange="addScoreAndNext(8,{natural:2})">
                        A.回味一天的旅程，慢慢步行回去
                    </label><br>
                    <label>
                        <input type="radio" name="q8" onchange="addScoreAndNext(8,{ influence:2,foodie:2})">
                        B.攔下路邊經過的計程車，早點回去
                    </label><br>
                    <label>
                        <input type="radio" name="q8" onchange="addScoreAndNext(8,{nostalgia:2})">
                        C.搭乘接駁車，欣賞沿途風景
                    </label><br>
                    
                </div>

                <!-- 問題 9  -->
                <div class="question" id="question9" style="display:none;text-align:center">
                    <p>
                        <br>回到家中，你決定將此次奇妙的旅程？
                    </p>
                    
                    <label>
                        <input type="radio" name="q9" onchange="addScoreAndNext(9,{influence:2,natural:1,nostalgia:1,foodie:1})">
                        A.抓緊時間，立即發文
                    </label><br>
                    <label>
                        <input type="radio" name="q9" onchange="addScoreAndNext(9,{natural:2,nostalgia:1,foodie:1})">
                        B.只與親近的親朋好友分享
                    </label><br>
                    <label>
                        <input type="radio" name="q9" onchange="addScoreAndNext(9,{natural:1,nostalgia:2,foodie:1})">
                        C.獨自將一天所遇之事記錄下來
                    </label><br>
                    <label>
                        <input type="radio" name="q9" onchange="addScoreAndNext(9,{natural:1,nostalgia:1,foodie:2})">
                        D.不做任何動作，將回憶單純記在腦中
                    </label><br>
                    
                </div>

                
        
    
        </div>
        <script src="js/script.js"></script>
</body>

</html>

CSS部分

@charset "utf-8";

*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html{
    font-size: 24px;
    font-family: oswald;
 
    margin: 0;
    padding: 0;
    height: 100%;
}


body{
 
    margin: 0;
    padding: 0;
  max-height: 100%;
 
}
article{
  flex-grow: 1;  /* 讓 article 填充剩餘的空間 */
    padding-bottom: 30px;  /* 給 footer 一點空間 */
}

.container {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    background: linear-gradient(180deg, #FDFCFB 0%, #E2D1C3 100%);
 overflow-x: hidden;
 
    bottom: 0px; /* 尝试移除这个bottom属性 */
 min-height: 100vh;
 padding-top: 88px;
}

header {
 
     height:700px;
 width:100%;
 
    
}

.menu{
 background-color:#FE9858;
 padding:0px 5px 0px 16px;
 height:88px;
 width: 100%;
 position :fixed;
 top:0px;
 z-index:20;
 
 

}

.menu.scrolled {
  background-color: rgba(254, 152, 88, 0.8); /* 变成更透明 */
  backdrop-filter: blur(10px); /* 添加模糊效果 */
}



.menu h1{
 float:left;
}

.menu h1 a{
 display:block;
 background-image:url(https://images2.imgbox.com/96/0c/G1gO1j7e_o.png);
 width:229px;
 height:88px;
 background-position:center center;
 background-repeat:no-repeat;
 text-indent:101%;
 white-space:nowrap;
 overflow:hidden;
}

.menu ul li {
    float: right;
}

.menu ul li a {
    font-size: 20px;
    display: block;
    font-weight: 600;

    width: 148px;
    height: 59px;
    line-height: 29px;

    margin: 16px 13px 16px 5px;
    padding: 15px 0px;
    color: #8C6C57;
    background-color: #FFF;

    text-decoration: none;
    text-align: center;

    border: 5px solid transparent; /* 初始狀態下邊框透明 */
    transition: border 0.3s ease; /* 增加邊框過渡效果 */
}
.menu ul {
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu ul li a:hover {
    border: 5px solid #7B5F49; /* 設置咖啡色邊框 */
   
}
.icon {
  display: none;
padding:20px 5% 0 40%;

    font-size: 24px;
    color: #fff;
    cursor: pointer;
}
.h4{
    color: #000;

text-align: center;
font-family: Oswald;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 3px;
}
.start-button{
    font-family: 微軟正黑體;
    border:solid 3px;
    border-radius:15px;
    display:inline-block;
    padding:10px 20px;
    background-color:white;
    color:#D6E0DE;
    cursor:pointer;
    margin-top:30px;
}
.start-button:hover{
    background-color:#D6E0DE;
    color:white;
}

.question {
    display: none; /* 初始隱藏所有問題 */
}
.active {
    display: block; /* 只顯示當前問題 */
}


.question{
    color: #000;
    text-align: center;
    font-family: Oswald;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 3px;
}



/* 進度條的容器 */
.progress-container {
    width: 20px;
    height: 400px;
    background-color: #f3f3f3;
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
    border: 1px solid #ccc;
}


/* 進度條的填充部分 */
.progress-bar {
    width: 100%;
    height: 0;
    background-color:  #4CAF50;
    border-radius: 10px 10px 0 0;
    position: absolute;
    bottom: 0;
}

/* 用來表示進度的文字 */
.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
}
/* 手機和平板響應式設計 */
@media screen and (max-width: 768px) {
    body {
        padding: 10px;
    }

    .main-page h1 {
        font-size: 2.2em;
    }

    .main-page h4 {
        font-size: 1.1em;
    }

    .start-button {
        font-size: 1.2em;
        padding: 10px 20px;
    }

    .question p {
        font-size: 1.1em;
    }
}

/* 更小的手機螢幕 */
@media screen and (max-width: 480px) {
    .main-page h1 {
        font-size: 1.8em;
    }

    .main-page h4 {
        font-size: 1em;
    }

    .start-button {
        font-size: 1em;
        padding: 8px 16px;
    }

    .question p {
        font-size: 1em;
    }
}
@media screen and (max-width: 600px) {
    body {
        font-size: 16px;
    }

    .start-button, button {
        font-size: 16px;
        padding: 8px 12px;
    }
}

JS

function startQuiz() {
    document.getElementById("mainPage").style.display = "none"; // 隱藏首頁
    document.getElementById("question1").style.display = "block"; // 顯示第一題
}

// 紀錄分數並跳到下一題
let scores = {
    influencer: 0,
    nature: 0,
    nostalgia: 0,
    foodie: 0
};

// 增加分數並跳轉下一題
function addScoreAndNext(currentQuestion, scoreObject) {
    // 更新分數邏輯
    scores.influencer += scoreObject.influencer;
    scores.nature += scoreObject.nature;
    scores.nostalgia += scoreObject.nostalgia;
    scores.foodie += scoreObject.foodie;

    // 跳到下一題
    nextQuestion(currentQuestion);
}

// 切換到下一題
function nextQuestion(currentQuestion) {
    const currentDiv = document.getElementById('question' + currentQuestion);
    const nextDiv = document.getElementById('question' + (currentQuestion + 1));

    if(currentDiv){
    currentDiv.style.display='none';  //隱藏當前問題  
    }
    if(nextDiv){
        nextDiv.style.display='block';//顯示下一題
    }else{
        showResult(); //如果沒有下一題顯示結果
    }

}

// 總題目數
const totalQuestions = 12;
// 當前題目編號
let currentQuestion = 0;

// 更新進度條
function updateProgress() {
    if (currentQuestion < totalQuestions) {
        currentQuestion++;
        const progressPercentage = (currentQuestion / totalQuestions) * 100;

        // 更新進度條高度
        document.getElementById('progress-bar').style.height = progressPercentage + '%';

        // 更新進度百分比文字
        document.getElementById('progress-text').textContent = Math.round(progressPercentage) + '%';
    }
}

// 顯示測驗結果
function showResult() {
    document.getElementById('resultPage').style.display = 'block';

    // 根據分數判斷最高的類別
    const maxCategory = Object.keys(scores).reduce((a, b) => scores[a] > scores[b] ? a : b);

    let resultText = '';
    switch (maxCategory) {
        case 'influencer':
            resultText = '你是「網美」類型，喜歡拍照打卡！';
            break;
        case 'nature':
            resultText = '你是「自然」類型，喜歡親近大自然！';
            break;
        case 'nostalgia':
            resultText = '你是「懷舊」類型，喜歡懷舊風格！';
            break;
        case 'foodie':
            resultText = '你是「老饕」類型，熱愛美食！';
            break;
    }

    document.getElementById('resultText').innerText = resultText;
}
看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2024-10-08 15:41:01 檢舉
href="css/reset.css"
去查查絕對和相對路徑。

https://ithelp.ithome.com.tw/m/articles/10324963
ccutmis iT邦高手 2 級 ‧ 2024-10-08 16:03:18 檢舉
善用 F12 開發者工具 看執行過程中有沒有出現驚嘆號 有的話看看錯誤訊息是什麼 出錯的行號在哪 這是基本web開發者要學的DEBUG技巧
麻糬Mouchi iT邦新手 5 級 ‧ 2024-10-08 22:49:29 檢舉
用F12檢查工具看一下網路那邊有沒有正常下載你指定的css檔案
meebox iT邦新手 4 級 ‧ 2024-10-09 09:27:18 檢舉
你要提供你本機上整個資料夾結構, 才能知道你個別檔案放在哪裡, 以便判斷問題。
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答
iThome鐵人賽
參賽組數
1054 組
團體組數
40 組
累計文章數
19879 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 16th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙