HTML語法沒反應

html boottrap

神威 2018-06-22 14:05:26 ‧ 4180 瀏覽

分享至

各位大大好:
想請教一個問題
以下是我的程式碼

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
      <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title> test</title> 
    </head>
    <body>
       
 <div class="container-fluid">
     <font color="green" size="15">   熱門產品</font>
</div>   
  
  
   <hr color="#00FF00" size="5" width="100%">
   
   
   
   <div id="footer" >      
   <div class="col-md-4">          
   <font color="green" size="15"> welcome</font>         
    </div>
       </div>
    </body>
</html>

其中

 <hr color="#00FF00" size="5" width="100%">

應該要是一條綠色的分隔線，但是我都一直顯現不出來，都只會顯現出若有似無的灰線
我發現只要把

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

這行拿掉，線就會變綠色的
但是我不可能為了一條線把這行刪掉阿......
請問有甚麼方法可以解決這問題呢?
謝謝

窮嘶發發發 iT邦高手 1 級 ‧ 2018-06-22 15:25:50 檢舉

因為你已經載入了 bootstrap ，所以你後面下的會被 CSS 覆蓋掉
所以如果你只是這個 HR 要變綠色，那就是在這邊下 CSS 語法
但是如果要綠色 HR SIZE 5，bootstrap 裡面也有定義的，就是給下相對應的 CLASS 名稱而已
https://getbootstrap.com/docs/4.0/utilities/ 手冊這邊看一下，如果有 bootstrap
還是去用它的定義好的 STYLE 會比較好

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Homura

iT邦高手 1 級 ‧ 2018-06-22 14:12:38

最佳解答

加入這段

<style>
hr{
    border-top: 5px solid #00FF00;
}

</style>

一定要在bootstrap.css之後喔!
這樣才能蓋掉他的css

回應 12
分享
檢舉

看更多先前的回應...收起先前的回應...

神威 iT邦研究生 4 級 ‧ 2018-06-22 14:19:43 檢舉

謝謝homura
我一直以為用普通的html就可以覆蓋
原來只能用CSS語法嗎?

Homura iT邦高手 1 級 ‧ 2018-06-22 14:24:01 檢舉

cool3690
好像瀏覽器都會預設抓css為優先
還有還能這樣寫

<hr style="border-top: 8px solid #00FF00;">

只是這樣有個缺點
每個標籤裡都有css看起來會很亂
所以通常會在獨立做一個css檔當自訂用

神威 iT邦研究生 4 級 ‧ 2018-06-22 14:25:53 檢舉

了解，謝謝囉

神威 iT邦研究生 4 級 ‧ 2018-06-25 16:09:32 檢舉

你好:
想再問個問題，我想把css和html分開所以我寫了一個
style.css
然後在test.jsp程式中加入

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">

但他的綠線就不見了......
我已經把style.css放後面了....
難道東西不能分開寫嗎?
謝謝

Homura iT邦高手 1 級 ‧ 2018-06-25 16:15:23 檢舉

cool3690
我試可以耶
是不是有cache暫存?
Ctrl+F5看看
還是不行貼一下你的style.css

神威 iT邦研究生 4 級 ‧ 2018-06-25 16:24:59 檢舉

真的不行耶，即使我已經把快取都清掉了...
我css還只先寫這樣試試就不行了..


#hr{
    border-top: 5px solid #006633;
}

Homura iT邦高手 1 級 ‧ 2018-06-25 16:27:47 檢舉

cool3690
你用了ID選擇器...
我幫你補充一個基本概念

.hr{}  // class
#hr{}  // ID
hr{}   // 直接給html屬性

所以你的hr應該改成下面這樣

<hr ID="hr">

神威 iT邦研究生 4 級 ‧ 2018-06-25 16:56:51 檢舉

報告:
經實驗發現了一個問題，
我有2個網頁，一個成功一個不成功
其中不成功的那個是index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
      <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="styles.css">
    <title>JSP</title> 
    <script>
        $(document).ready(function () { 
            $("#footer").load("public/foot.html");
        });  
    </script> 
    </head>
    <body>
hello
 <div id="footer" ></div>
    </body>
</html>

我load的foot.html