W3.CSS Code（代碼）

2020-12-01 16:45 更新

顯示的例子

w3-panel 類用于在灰色容器中顯示示例:

實(shí)例

<div class="w3-panel w3-card w3-light-grey">

      <h3>示例</h3>

      <div class="w3-container w3-white">

        <p>

        <ul class="w3-ul w3-card-4" style="width:50%">

          <li>小明</li>

          <li>小剛</li>

          <li>小美</li>

        </ul>

        </p>

      </div>

      <p>顯示為卡片的列表.</p>

 </div>


嘗試一下 ?

顯示代碼

w3-code 類用于顯示用代碼在可讀取的單間隔的字體。

實(shí)例

<div class="w3-panel w3-card w3-light-grey">

  <h3>Example</h3>

  <div class="w3-code notranslate">

    水果[0] = "香蕉";<br>

    水果[1] = "蘋果";<br>

    水果[2] = "芒果";<br>

    水果[3] = "橘子";<br>

  </div>

</div>


嘗試一下 ?


突出顯示內(nèi)聯(lián)代碼

W3-codespan 類是用來突出內(nèi)嵌代碼：

該 html 元素定義的 HTML 頁面。

實(shí)例

<div class="w3-container">

  <h2>突出內(nèi)聯(lián)代碼</h2>

  <p>w3-codespan類用于突出顯示內(nèi)聯(lián)代碼:</p>

  <p>這個 <code class="w3-codespan">html</code>元素定義一個HTML頁面.</p>

</div>


嘗試一下 ?

著色代碼

w3cschool 提供了一個 JavaScript 庫來著色代碼。

實(shí)例

<div class="w3-panel w3-card w3-light-grey"> 

  <h4>JavaScript 示例</h4>

  <div class="w3-code jsHigh notranslate">

    水果[ 0 ] = “香蕉”；<br>
    水果[ 1 ] = “蘋果”；<br>
    水果[ 2 ] = “芒果” ;<br>
    水果[ 3 ] = “李子”；<br>

  </div>

</div>


嘗試一下 ?

您可以從此處下載該庫： https://7npmedia.w3cschool.cn/w3codecolor.js

如果使用 w3codecolor.js 庫，則還可以使用下面描述的代碼類：

突出顯示 JavaScript 代碼

該 jsHigh 類是用來突出的 JavaScript 代碼：

水果[ 0 ] = “香蕉”；
水果[ 1 ] = “蘋果”；
水果[ 2 ] = “芒果” ;
水果[ 3 ] = “李子”；

突出顯示HTML代碼

該 htmlHigh 類用于高亮的 HTML 代碼：

實(shí)例

<div class="w3-panel w3-card w3-light-grey"> 

  <h4>HTML 示例</h4>

  <div class="w3-code htmlHigh notranslate">

    <!DOCTYPE html><br><html><br>

    <title>HTML Tutorial</title><br>

    <body><br><br>

    <h1>這是一個標(biāo)題</h1><br>

    <p>這是一個段落。</p><br><br>

    </body><br>

    </html>

  </div>

</div>


嘗試一下 ?

突出顯示 CSS 代碼

該 cssHigh 類是用來突出 CSS 代碼：

實(shí)例

<div class="w3-panel w3-card w3-light-grey"> 

  <h4>CSS 示例</h4>

  <div class="w3-code cssHigh notranslate">

    body {<br>

    background-color: #d0e4fe;<br>

    }<br><br>

    h1 {<br>

    color: orange;<br>

    text-align: center;<br>

    }<br><br>

    p {<br>

    font-family: "Times New Roman";<br>

    font-size: 20px;<br>

    }

  </div>

</div>


嘗試一下 ?

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號