W3.CSS-颜色

W3.CSS支持丰富的颜色类集。这些颜色类别的启发和发展是考虑到市场营销,路标和便签中使用的颜色。

  • w3-red
  • w3-pink
  • w3-purple
  • w3-deep-purple
  • w3-indigo
  • w3-blue
  • w3-light-blue
  • w3-cyan
  • w3-teal
  • w3-green
  • w3-light-green
  • w3-lime
  • w3-khaki
  • w3-yellow
  • w3-amber
  • w3-orange
  • w3-deep-orange
  • w3-blue-grey
  • w3-brown
  • w3-light-grey
  • w3-grey
  • w3-dark-grey
  • w3-black

颜色主题

W3.CSS为使用其公共领域主题CSS将主题应用于网站提供了出色的支持。以下是一些示例-

序号CSS名称和说明
1w3-theme-indigo.css
具有Indigo变色的CSS
2w3-theme-red.css
具有红色变色的CSS

为了使用主题,请访问https://www.w3schools.com/w3css/w3css_downloads.asp以下载所需的CSS文件。

w3css_colors.htm

现场演示
<html>
   <head>
      <title>The W3.CSS Color Themes</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "css/w3-theme-red.css">
   </head>
   
   <body class = "w3-container">
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "w3-card-4">
         <div class = "w3-container w3-theme w3-card-2">
            <h1>Red Colored Theme</h1>
         </div>
         
         <div class = "w3-container w3-text-theme">
            <h2>w3-text-theme - Theme for Text</h2>
         </div>
         
         <ul class = "w3-ul w3-border-top">
            <li class = "w3-theme-l5" style = "position:relative">
            <a class = "w3-btn-floating-large w3-theme-action w3-right"
            style = "position:absolute;top:-28px;right:16px;">+</a>
            <p>Using w3-theme-l5 / w3-theme-light style</p>
            </li>
            <li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
            <li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
            <li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
            <li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
            <li class = "w3-theme"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
         </ul>
      </div>
   </body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/w3css/913.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2020年11月3日 下午2:18
下一篇 2020年11月3日 下午2:29

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注