全球最大最新的中文 Web 技术教程

W3.CSS 下载

下载 W3.CSS

从此链接下载最新版本: http://cdn.w3schools.wang/w3.css

W3.CSS 是免费的


如何使用 W3.CSS

要使用W3.CSS,只需在您的网页中添加 "w3.css" 链接:


<!DOCTYPE html>
<title>My Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://cdn.w3schools.wang/w3.css">
尝试一下 »

或下载 w3.css 并从您自己的网站运行:


<!DOCTYPE html>
<title>My Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="w3.css">

如果将 w3.css 放在子文件夹中,请在斜杠之间添加文件夹名称:


<!DOCTYPE html>
<title>My Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/foldername/w3.css">

如果将 w3.css 放在网络的根目录下,请添加斜杠:


<!DOCTYPE html>
<title>My Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/w3.css">


版本 描述
1.00-09 Beta Versions.
1.1 Version 1.1  June 2015.
1.11 Added containers for example code.
1.12 Added material color themes.
1.13 Added w3-animate classes.
Added w3-row-margin.
Added w3-row-padding.
Added w3-text-color classes.
Changed default tooltip behavior.
1.14 Added w3-checkbox classes.
1.15 Changed default h1, h2, h3, h4, h5, and h6 fonts to "Segoe UI".
Removed the i.tiny, i.small, and i.large classes.
Use w3-tiny, w3-small, or w3-large instead.
1.16 Removed light and dark color classes.
Use themes instead.
1.17 Reduced some default font sizes.
Changed w3-topnav behavior to use <a>...</a> instead of <li><a>...</a></li>.
Added btn-floating-large class.
1.18 Implemented Google's newest use of icon recommendations.
1.19 Added color classes.
Changed the value of some padding classes.
1.2 Version 1.2  July 2015.
1.21 Added the w3-content class.
1.22 Added the w3-rest class.
1.23 Removed text-white and text-black.
Use w3-text-white and w3-text-black instead.
1.24 Removed light and dark colors. Use themes instead.
Renamed colors from color to w3-color.
Added w3-text-black-opacity and .w3-text-white-opacity.
Added w3-stroke.
1.25 Removed w3-row-margin. Use w3-row-padding instead.
1.3 Version 1.3  August 2015.
1.31 Corrected error. Class l4 was wrongly defined.
1.32 Corrected w3-padding classes.
1.33 Fine-tuned all w3-padding classes.
1.34 Fine-tuned all box-sizing properties.
1.35 Added default padding to w3-topnav.
1.36 Added w3-hide classes.
1.4 Version 1.4  August 2015.
1.41 Fine tuned sizes.
1.42 Fine tuned Material Icon sizes.
1.43 Fine tuned Font Awesome and Bootstrap icon sizes.
1.44 Added w3-spin.
1.5 Version 1.5  September 2015.
1.51 Small adjustments.
1.52 Added drop shadow when hovering buttons.
1.53 Added w3-select.
1.54 Added w3-section.
1.55 Added w3-table-all.
1.56 Small adjustments.
1.57 Removed material icon vertical-alignment.
Added w3-slim and w3-wide.
1.58 Added w3-fluid.
1.59 Added w3-ripple.
1.6 Version 1.6  October 2015.
1.61 Added w3-top.
Small adjustments to animation classes.
1.62 Added w3-justify.
1.63 Added w3-round.
1.64 Removed animated labels. Can conflict with invalid content.
Removed w3-textarea. Use w3-input instead.
1.65 Removed w3-stroke. Minimum browser support.
1.66 Adjusted modal properties.
1.67 Added colors w3-aqua and w3-sand.
Added w3-form. Changed default size for w3-input to 100%.
1.68 Added w3-btn-group.
1.7 Version 1.7  November 2015.
1.71 Added w3-input-group.
Added w3-validate.
Added w3-check.
Added w3-radio.
1.72 Removed automatic coloring of invalid input.
Use w3-validate instead.
1.73 Revised disabled buttons to use opacity instead of grey.
1.74 Added w3-bottom.
1.75 Small metric adjustments.
1.76 Added w3-pagination.
1.77 Added w3-dropdown-hover and w3-dropdown-click.
1.8 Version 1.8  December 2015. Download
1.81 Added w3-paragraph (for testing only).
1.82 Corrected an error in w3-validate.
1.83 Corrected an error in w3-label.
1.84 Added w3-sign (for testing only).
1.85 Removed w3-text-black-opacity and w3-text-white-opacity.
Use w3-opacity instead.
1.86 Added w3-text-shadow-white.
Removed w3-sign. Use w3-tag instead.
Removed w3-paragraph. Use <p> or w3-section instead.
1.87 Added w3-animate-zoom.
1.9 Version 1.9  January 2016. Download
1.91 Added w3-pale-red, w3-pale-yellow, w3-pale-green, w3-pale-blue.
Added w3-topbar, w3-bottombar, w3-leftbar, w3-rightbar.
Added w3-border-red, w3-border-yellow, w3-border-green, w3-border-blue.
1.92 Removed w3-blockquote. Use w3-leftbar instead.
1.93 Removed w3-tab. Use w3-topnav or w3-sidenav instead.
1.94 Added w3-navbar.
Added w3-hover-color.
1.95 Added w3-vertical.
Added pale w3-hover colors.
1.96 Added dropdown to w3-sidenav.
Added Slideshow
Added Tabs (Tabulators)
1.97 Added w3-btn-block.
Added w3-accordion and w3-accordion-content.
1.98 Added w3-animate-fading.
1.99 Added w3-main and w3-collapse.
Added w3-serif.
Added w3-overlay.
Added w3-progressbar.
Added w3-show-inline-block.
Added w3-animate-input.
Added w3-display-container.
Added w3-display-topright.
Added w3-display-topleft.
Added w3-display-bottomright.
Added w3-display-bottomleft.
2.0 Version 2.0  February 2016. Download
2.1 Added w3-hover-shadow.
Added w3-hover-text-color.
Changed z-index of w3-modal to "3" (instead of 1).
2.2 Added 100% width to <li> elements in w3-navbar on small screens (< 601px width).
2.3 Fixed minor pixel errors in media queries and added all color classes to w3-border-color
2.4 Added w3-threequarter
Added w3-display-topmiddle and w3-display-bottommiddle
Added w3-transparent and w3-hover-none
Added w3-padding-12 and w3-padding-128
Added w3-section-4|8|12|16|24|32|48|64|128
Changed animation duration of w3-animate-opacity from 4 to 1.5 seconds
2.5 Added w3-container-4|8|12|16|24|32|48|64
Adjusted minor transition values

自定义 W3.CSS

W3.CSS 包括基本字体和字体大小。

您可以通过更改这些设置来自定义 W3.CSS:


html {
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: normal;

h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI", Verdana, sans-serif;
  font-weight: 400;
  line-height: 1;
  margin: 20px 0;

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;}
h1 {font-size: 36px}
h2 {font-size: 30px}
h3 {font-size: 24px}
h4 {font-size: 20px}
h5 {font-size: 18px}
h6 {font-size: 16px}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid #eee;
  margin: 20px 0;
尝试一下 »