W3.CSS Code(代码)

2020-12-01 16:45 更新

显示的例子

w3-panel 类用于在灰色容器中显示示例:

实例

<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 类用于显示用代码在可读取的单间隔的字体。

实例

<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>


尝试一下 »


突出显示内联代码

W3-codespan 类是用来突出内嵌代码:

该 html 元素定义的 HTML 页面。

实例

<div class="w3-container">

  <h2>突出内联代码</h2>

  <p>w3-codespan类用于突出显示内联代码:</p>

  <p>这个 <code class="w3-codespan">html</code>元素定义一个HTML页面.</p>

</div>


尝试一下 »

着色代码

w3cschool 提供了一个 JavaScript 库来着色代码。

实例

<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 代码:

实例

<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>这是一个标题</h1><br>

    <p>这是一个段落。</p><br><br>

    </body><br>

    </html>

  </div>

</div>


尝试一下 »

突出显示 CSS 代码

该 cssHigh 类是用来突出 CSS 代码:

实例

<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>


尝试一下 »

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号