W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 参考手册



容器类

定义
w3-container Container for HTML content (adds 16px padding left and right) 尝 试
  Used with color classes 尝 试
  Used as header 尝 试
  Used as footer 尝 试
  Used with w3-leftbar 尝 试
  Used with w3-bottombar 尝 试
w3-section Container for HTML content (adds 16px margin top and bottom) 尝 试
w3-badge Circular badge 8 尝 试
w3-tag Rectangular tag  More Later ! 尝 试
w3-ul Unordered list 尝 试
w3-display-container Container for w3-display-classes (position an element in the top left, top right, bottom left or the bottom right corner, or in the middle of the container) 尝 试
w3-image Deprecated. Use w3-display-container instead. 尝 试
w3-blockquote Removed in 2.0 (use w3-leftbar instead) 尝 试
w3-code Code container 尝 试

表格类

定义
w3-table Container for an HTML table 尝 试
w3-striped Striped table 尝 试
w3-border Bordered table 尝 试
w3-bordered Bordered lines 尝 试
w3-centered Centered table 尝 试
w3-hoverable Hoverable table 尝 试
w3-table-all All properties set 尝 试
  With w3-striped, w3-border, and w3-bordered 尝 试
  With colored head 尝 试
  With w3-responsible 尝 试
  With w3-tiny 尝 试
  With w3-small 尝 试
  With w3-large 尝 试
  With w3-xlarge 尝 试
  With w3-xxlarge 尝 试
  With w3-xxxlarge 尝 试
  With color 尝 试
  With w3-jumbo 尝 试

卡片类

定义
w3-card Container for any HTML content (With border) 尝 试
w3-card-2 Container for any HTML content (2px bordered shadow) 尝 试
w3-card-4 Container for any HTML content (4px bordered shadow) 尝 试
w3-card-8 Container for any HTML content (8px bordered shadow) 尝 试
w3-card-12 Container for any HTML content (12px bordered shadow) 尝 试
w3-card-16 Container for any HTML content (16px bordered shadow) 尝 试
w3-card-24 Container for any HTML content (24px bordered shadow) 尝 试

响应式类

定义
w3-row Container for one row of fluid responsive content 尝 试
w3-row-padding Row where all columns have a default padding 尝 试
w3-content Container for fixed size centered content 尝 试
   
w3-half Half (1/2) screen column container 尝 试
w3-third Third (1/3) screen column container 尝 试
w3-twothird Two third (2/3) screen column container 尝 试
w3-quarter Quarter (1/4) screen column container 尝 试
w3-threequarter Three quarters (3/4) screen column container 尝 试
w3-col Column container for any HTML content 尝 试
     
l1 - l12 Responsive sizes for large screens 尝 试
m1 - m12 Responsive sizes for medium screens 尝 试
s1 - s12 Responsive sizes for small screens 尝 试
   
w3-hide-small Hide content on small screens (less than 601px) 尝 试
w3-hide-medium Hide content on medium screens 尝 试
w3-hide-large Hide content on large screens (larger than 992px) 尝 试

导航栏类

定义
w3-navbar Navigation bar 尝 试
  Collapsible navigation bar 尝 试
w3-topnav Top navigation bar 尝 试
w3-sidenav Side navigation bar 尝 试
  Side navigation bar overlaying main content 尝 试
  Side navigation bar overlaying all main content 尝 试
  Side navigation bar shifting main content to the right 尝 试
  Side navigation bar with an overlay background 尝 试
w3-collapse Fully automatic responsive side navigation 尝 试
w3-dropnav Dropdown navigation 尝 试
w3-dropdown-click Clickable dropdown element 尝 试
w3-dropdown-hover Hoverable dropdown element 尝 试
  Hoverable dropdown element (used in w3-navbar) 尝 试
  Hoverable dropdown element (used in w3-sidenav) 尝 试
  Hoverable dropdown element (used in w3-topnav) 尝 试
w3-accordion Hide and show collapsible content 尝 试
  Clickable accordion and dropdown used in w3-sidenav 尝 试
w3-pagination Pagination links 尝 试

按钮类

定义
w3-btn Rectangular HTML button 尝 试
  Rectangular HTML button with ripple effect 尝 试
w3-btn-floating Circular floating button 尝 试
  Circular floating button with ripple effect 尝 试
w3-btn-group Grouped buttons 尝 试
w3-btn-block Full-width buttons (100%) 尝 试

输入框类

定义
w3-form Same as w3-padding 尝 试
  Input form as a card 尝 试
w3-input Input elements 尝 试
  Input elements (top labels) 尝 试
  Input elements (bottom labels) 尝 试
w3-group Group of HTML elements 尝 试
w3-label Input label 尝 试
w3-validate Validates input (Changes color when invalid input) 尝 试
w3-check Checkbox input type 尝 试
w3-radio Radio input type 尝 试
w3-select Input select element 尝 试
w3-animate-input Animates the width of an input to 100% 尝 试

模态框类

定义
w3-modal Modal container 尝 试
w3-modal-content Modal pop-up element 尝 试
w3-tooltip Tooltip element 尝 试
w3-text Tooltip text 尝 试
  Tooltip inline 尝 试

动画类

定义
w3-animate-top Animates an element from the top -300px to 0px 尝 试
w3-animate-left Animates an element from left -300px to 0px 尝 试
w3-animate-bottom Animates an element from the bottom -300px to 0px 尝 试
w3-animate-right Animates an element from right -300px to 0px 尝 试
w3-animate-opacity Animates an element's opacity from 0 to 1 尝 试
w3-animate-zoom Animates an element from 0 to 100% in size 尝 试
w3-animate-fading Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) 尝 试
w3-spin Spin an icon 360 degrees 尝 试
  Spin any element 360 degrees 尝 试
w3-animate-input Animates the width of an input field to 100% 尝 试

颜色类

定义
w3-red Background color red 尝 试
w3-pink Background color pink 尝 试
w3-purple Background color purple 尝 试
w3-deep-purple Background color deep purple 尝 试
w3-indigo Background color indigo 尝 试
w3-blue Background color blue 尝 试
w3-light-blue Background color light blue 尝 试
w3-cyan Background color cyan 尝 试
w3-aqua Background color aqua 尝 试
w3-teal Background color teal 尝 试
w3-green Background color green 尝 试
w3-light-green Background color light green 尝 试
w3-lime Background color lime 尝 试
w3-sand Background color sand 尝 试
w3-khaki Background color khaki 尝 试
w3-yellow Background color yellow 尝 试
w3-amber Background color amber 尝 试
w3-orange Background color orange 尝 试
w3-deep-orange Background color deep orange 尝 试
w3-blue-grey Background color blue grey 尝 试
w3-brown Background color brown 尝 试
w3-light-grey Background color light grey 尝 试
w3-grey Background color grey 尝 试
w3-dark-grey Background color dark grey 尝 试
w3-black Background color black 尝 试
w3-pale-red Background color pale red 尝 试
w3-pale-yellow Background color pale yellow 尝 试
w3-pale-green Background color pale green 尝 试
w3-pale-blue Background color pale blue 尝 试
w3-transparent Transparent background-color  

悬停类

以上所有颜色也可用作悬停类:

定义
w3-hover-white Hover color white 尝 试
w3-hover-black Hover color black 尝 试
w3-hover-red Hover color red 尝 试
w3-hover-blue Hover color blue 尝 试
w3-hover-green Hover color green 尝 试
w3-hover-aqua Hover color aqua 尝 试
w3-hover-orange Hover color orange 尝 试
w3-hover-grey Hover color grey 尝 试
w3-hover-pale-green Hover color pale green 尝 试
     
w3-hover-text-red Hover text color red 尝 试
w3-hover-text-red Hover text color blue 尝 试
w3-hover-text-green Hover text color green 尝 试
w3-hover-text-purple Hover text color purple 尝 试
     
w3-hover-border-color Hover border color 尝 试
     
w3-hover-opacity Adds transparency to an element on hover (60% opacity) 尝 试
w3-hover-shadow Adds shadow to an element on hover 尝 试
w3-hover-none Removes hover effects from an element 尝 试

Round Classes

定义
w3-round Element rounded (border-radius) 4px 尝 试
w3-round-small Element rounded (border-radius) 2px 尝 试
w3-round-medium Element rounded (border-radius) 4px 尝 试
w3-round-large Element rounded (border-radius) 8px 尝 试
w3-round-xlarge Element rounded (border-radius) 16px 尝 试
w3-round-xxlarge Element rounded (border-radius) 32px 尝 试
w3-round-jumbo Element rounded (border-radius) 64px 尝 试

填充类

定义
w3-padding-0 No padding 尝 试
w3-padding-tiny Padding 2px top and bottom, and 4px left and right. 尝 试
w3-padding-small Padding 4px top and bottom, and 8px left and right. 尝 试
w3-padding Padding 8px top and bottom, and 16px left and right. 尝 试
w3-padding-medium Padding 8px top and bottom, and 16px left and right. 尝 试
w3-padding-large Padding 12px top and bottom, and 24px left and right. 尝 试
w3-padding-xlarge Padding 16px top and bottom, and 32px left and right. 尝 试
w3-padding-xxlarge Padding 24px top and bottom, and 48px left and right. 尝 试
w3-padding-jumbo Padding 32px top and bottom, and 64px left and right. 尝 试
w3-padding-4 Padding 4px top and bottom 尝 试
w3-padding-8 Padding 8px top and bottom 尝 试
w3-padding-12 Padding 12px top and bottom 尝 试
w3-padding-16 Padding 16px top and bottom 尝 试
w3-padding-24 Padding 24px top and bottom 尝 试
w3-padding-32 Padding 32px top and bottom 尝 试
w3-padding-48 Padding 48px top and bottom 尝 试
w3-padding-64 Padding 64px top and bottom 尝 试
w3-padding-128 Padding 128px top and bottom 尝 试
w3-padding-top Padding top 8px 尝 试
w3-padding-right Padding right 16px 尝 试
w3-padding-bottom Padding bottom 8px 尝 试
w3-padding-left Padding left 16px 尝 试

边距类

定义
w3-margin Same as w3-margin-16 尝 试
w3-margin-0 Margin 0 (removes margin: top, right, bottom and left) 尝 试
w3-margin-2 Margin 2px (top, right, bottom and left) 尝 试
w3-margin-4 Margin 4px (top, right, bottom and left) 尝 试
w3-margin-8 Margin 8px (top, right, bottom and left) 尝 试
w3-margin-12 Margin 12px (top, right, bottom and left) 尝 试
w3-margin-16 Margin 16px (top, right, bottom and left) 尝 试
w3-margin-24 Margin 24px (top, right, bottom and left) 尝 试
w3-margin-32 Margin 32px (top, right, bottom and left) 尝 试
w3-margin-64 Margin 64px (top, right, bottom and left) 尝 试
w3-margin-top Margin top 16px 尝 试
w3-margin-right Margin right 16px 尝 试
w3-margin-bottom Margin bottom 16px 尝 试
w3-margin-left Margin left 16px 尝 试
w3-section Container for HTML content (adds 16px margin top and bottom) 尝 试
w3-section-4 Container for HTML content (adds 4px margin top and bottom) 尝 试
w3-section-8 Container for HTML content (adds 8px margin top and bottom) 尝 试
w3-section-12 Container for HTML content (adds 12px margin top and bottom) 尝 试
w3-section-16 Same as w3-section. Container for HTML content (adds 16px margin top and bottom) 尝 试
w3-section-24 Container for HTML content (adds 24px margin top and bottom) 尝 试
w3-section-32 Container for HTML content (adds 32px margin top and bottom) 尝 试
w3-section-48 Container for HTML content (adds 48px margin top and bottom) 尝 试
w3-section-64 Container for HTML content (adds 64px margin top and bottom) 尝 试
w3-section-128 Container for HTML content (adds 128px margin top and bottom) 尝 试

边框类

定义
w3-border Borders (top, right, bottom, left) 尝 试
w3-border-top Border top 尝 试
w3-border-right Border right 尝 试
w3-border-bottom Border bottom 尝 试
w3-border-left Border left 尝 试
w3-border-0 Removes all borders 尝 试
w3-border-color Displays any defined borders in a specified color (like red, etc) 尝 试
w3-bottombar Adds a thick bottom border (bar) to an element 尝 试
w3-leftbar Adds a thick left border (bar) to an element 尝 试
w3-rightbar Adds a thick right border (bar) to an element 尝 试
w3-topbar Adds a thick top border (bar) to an element 尝 试
w3-hover-border-color Hoverable border color 尝 试