W3.CSS支持丰富的颜色类集。这些颜色类别的启发和发展是考虑到市场营销,路标和便签中使用的颜色。
W3.CSS为使用其公共领域主题CSS将主题应用于网站提供了出色的支持。以下是一些示例-
序号 | CSS名称和说明 |
---|---|
1 | w3-theme-indigo.css 具有Indigo变色的CSS |
2 | w3-theme-red.css 具有红色变色的CSS |
为了使用主题,请访问https://www.w3schools.com/w3css/w3css_downloads.asp以下载所需的CSS文件。
现场演示 <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>