W3.CSS Reference


W3.CSS Classes


Container Classes

Defines
w3-container HTML container with 16px left and right padding 测试一下
  Used as header 测试一下
  Used as footer 测试一下
w3-panel HTML container with 16px left and right padding and 16px top and bottom margin 测试一下
  Used to display a note 测试一下
  Used to display a quote 测试一下
w3-badge Circular badge 测试一下
w3-tag Rectangular tag 测试一下
w3-ul Unordered list 测试一下
w3-display-container Container for w3-display-classes (enables positioning of elements inside the container) 测试一下
w3-block Class that can be used to define a full width for any element 测试一下
w3-code Code container 测试一下
w3-codespan Inline code container (for code snippets) 测试一下
w3-content Container for fixed size centered content 测试一下
w3-auto Container for responsive size centered content 测试一下
w3-stretch Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding)) 测试一下

Table Classes

Defines
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-responsive 测试一下
  With w3-tiny 测试一下
  With w3-small 测试一下
  With w3-large 测试一下
  With w3-xlarge 测试一下
  With w3-xxlarge 测试一下
  With w3-xxxlarge 测试一下
  With color 测试一下
  With w3-jumbo 测试一下
w3-responsive Creates a responsive table 测试一下


Card Classes

Defines
w3-card Same as w3-card-2 测试一下
w3-card-2 Container for any HTML content (2px bordered shadow) 测试一下
w3-card-4 Container for any HTML content (4px bordered shadow) 测试一下

Responsive Classes

Defines
w3-row Container for one row of fluid responsive content 测试一下
w3-row-padding Row where all columns have a default padding 测试一下
w3-auto Container for responsive size centered content 测试一下
w3-stretch Class that removes right and left margins 测试一下
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 测试一下
w3-rest Occupies the rest of the column width 测试一下
     
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-image Responsive image 测试一下
   
w3-mobile Adds mobile-first responsiveness to any element.
Displays elements as block elements on mobile devices.
测试一下

Layout Classes

Defines
w3-cell-row Container for layout columns (cells). 测试一下
w3-cell Layout column (cell). 测试一下
w3-cell-top Aligns content at the top of a column (cell). 测试一下
w3-cell-middle Aligns content at the vertical middle of a column (cell). 测试一下
w3-cell-bottom Aligns content at the bottom of a column (cell). 测试一下

Bar Classes - Navigation

Defines
w3-bar Horizontal bar 测试一下
w3-bar-block Vertical bar 测试一下
w3-bar-item Provides common style for bar items 测试一下
w3-sidebar Side bar 测试一下
  A side bar can contain all types of content 测试一下
  A side bar overlaying main content 测试一下
  A side bar overlaying all main content 测试一下
  A side bar shifting main content to the right 测试一下
  A side bar with an overlay background 测试一下
  A Side bar on the right side 测试一下
w3-collapse Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class 测试一下
w3-main Container for page content when using the w3-collapse class for responsive side navigations 测试一下
  Fully automatic right-sided responsive side navigation 测试一下

Dropdown Classes

w3-dropdown-click Clickable dropdown element 测试一下
w3-dropdown-hover Hoverable dropdown element 测试一下
  Hoverable dropdown element (used in w3-bar) 测试一下
  Hoverable dropdown element (used in w3-bar-block) 测试一下
  Hoverable dropdown element (used in w3-sidebar) 测试一下

Button Classes

Defines
w3-button Rectangular button with grey background color on hover 测试一下
w3-btn Rectangular button with shadows on hover 测试一下
w3-circle Can be used to create a circular button 测试一下
w3-ripple Rectangular button with ripple effect 测试一下
  Circular floating button with ripple effect 测试一下
w3-bar Can be used to group elements (like buttons) in an horizontal bar 测试一下
w3-block Class that can be used to define a full width w3-button 测试一下
  Full width w3-btn 测试一下
  Full width circular button 测试一下

Input Classes

Defines
w3-input Input elements 测试一下
  Input form as a card 测试一下
  Input elements (top labels) 测试一下
  Input elements (bottom labels) 测试一下
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% 测试一下

Modal Classes

Defines
w3-modal Modal container 测试一下
w3-modal-content Modal pop-up element 测试一下
w3-tooltip Tooltip element 测试一下
w3-text Tooltip text 测试一下

Animation Classes

Defines
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% 测试一下

Font and Text Classes

Defines
w3-tiny Specifies a font size of 10 pixels 测试一下
w3-small Specifies a font size of 12 pixels 测试一下
w3-large Specifies a font size of 18 pixels 测试一下
w3-xlarge Specifies a font size of 24 pixels 测试一下
w3-xxlarge Specifies a font size of 32 pixels 测试一下
w3-xxxlarge Specifies a font size of 48 pixels 测试一下
w3-jumbo Specifies a font size of 64 pixels 测试一下
w3-wide Specifies a wider text 测试一下
w3-serif Changes the font to serif 测试一下

Display Classes

Defines
w3-center Centered content 测试一下
w3-left Floats an element to the left (float: left) 测试一下
w3-right Floats an element to the right (float: right) 测试一下
w3-left-align Left aligned text 测试一下
w3-right-align Right aligned text 测试一下
w3-justify Right and left aligned text 测试一下
w3-block Class that can be used to define a full width for any element 测试一下
w3-circle Circled content 测试一下
w3-hide Hidden content (display:none) 测试一下
w3-show Show content (display:block) 测试一下
w3-show-block Alias of w3-show (display:block) 测试一下
w3-show-inline-block Show content as inline-block (display:inline-block) 测试一下
w3-top Fixed content at the top of a page 测试一下
w3-bottom Fixed content at the bottom of a page 测试一下
w3-display-container Container for w3-display-classes (position: relative) 测试一下
w3-display-topleft Displays content at the top left corner of the w3-display-container 测试一下
w3-display-topright Displays content at the top right corner of the w3-display-container 测试一下
w3-display-bottomleft Displays content at the bottom left corner of the w3-display-container 测试一下
w3-display-bottomright Displays content at the bottom right corner of the w3-display-container 测试一下
w3-display-left Displays content to the left (middle left) of the w3-display-container 测试一下
w3-display-right Displays content to the right (middle right) of the w3-display-container 测试一下
w3-display-middle Displays content in the middle (center) of the w3-display-container 测试一下
w3-display-topmiddle Displays content at the top middle of the w3-display-container 测试一下
w3-display-bottommiddle Displays content at the bottom middle of the w3-display-container 测试一下
w3-display-position Displays content at a specified position in the w3-display-container 测试一下
w3-display-hover Displays content on hover inside the w3-display-container 测试一下

Effect Classes

Defines
w3-opacity Adds opacity/transparency to an element (opacity: 0.6) 测试一下
  Add opacity/transparency to text 测试一下
w3-opacity-off Turns off opacity/transparency (opacity: 1) 测试一下
w3-opacity-min Adds opacity/transparency to an element (opacity: 0.75) 测试一下
w3-opacity-max Adds opacity/transparency to an element (opacity: 0.25) 测试一下
w3-grayscale-min Adds a grayscale effect to an element (grayscale: 50%) 测试一下
w3-grayscale Adds a grayscale effect to an element (grayscale: 75%) 测试一下
w3-grayscale-max Adds a grayscale effect to an element (grayscale: 100%) 测试一下
w3-sepia-min Adds a sepia effect to an element (sepia: 50%) 测试一下
w3-sepia Adds a sepia effect to an element (sepia: 75%) 测试一下
w3-sepia-max Adds a sepia effect to an element (sepia: 100%) 测试一下
w3-overlay Creates an overlay effect 测试一下

Background Color Classes

Defines
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  

Hover Color Classes

The colors above can also be used as hover classes:

Defines
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 测试一下

Text Color Classes

Defines
w3-text-red Text color red 测试一下
w3-text-green Text color green 测试一下
w3-text-blue Text color blue 测试一下
w3-text-yellow Text color yellow 测试一下
w3-text-light-grey Text color light-grey 测试一下
w3-text-grey Text color grey 测试一下
w3-text-dark-grey Text color dark grey 测试一下
w3-text-black Text color black 测试一下
w3-text-white Text color white 测试一下
w3-text-pink Text color pink 测试一下
w3-text-purple Text color purple 测试一下
w3-text-teal Text color teal 测试一下
w3-text-light-green Text color light green 测试一下
w3-text-lime Text color lime 测试一下
w3-text-deep-purple Text color deep purple 测试一下
w3-text-indigo Text color indigo 测试一下
w3-text-light-blue Text color light blue 测试一下
w3-text-blue-grey Text color blue grey 测试一下
w3-text-cyan Text color cyan 测试一下
w3-text-aqua Text color aqua 测试一下
w3-text-amber Text color amber 测试一下
w3-text-orange Text color orange 测试一下
w3-text-deep-orange Text color deep orange 测试一下
w3-text-sand Text color sand 测试一下
w3-text-khaki Text color khaki 测试一下
w3-text-brown Text color brown 测试一下

Hover Text Classes

The text classes above can also be used as hover classes:

Defines
w3-hover-text-red Hover text color red 测试一下
w3-hover-text-green Hover text color green 测试一下
w3-hover-text-blue Hover text color blue 测试一下
w3-hover-text-yellow Hover text color yellow 测试一下

Other Hover Classes

Defines
w3-hover-border-color Hover border color 测试一下
w3-hover-opacity Adds transparency to an element on hover (opacity: 0.6) 测试一下
w3-hover-opacity-off Removes transparency from an element on hover (100% opacity) 测试一下
w3-hover-shadow Adds shadow to an element on hover 测试一下
w3-hover-grayscale Adds a black and white (100% grayscale) effect to an element 测试一下
w3-hover-sepia Adds a sepia effect to an element on hover 测试一下
w3-hover-none Removes hover effects from an element 测试一下

Round Classes

Defines
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 测试一下

Padding Classes

Defines
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-large Padding 12px top and bottom, and 24px left and right. 测试一下
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 测试一下

Margin Classes

Defines
w3-margin Adds an 16px margin to an element 测试一下
w3-margin-top Adds an 16px top margin to an element 测试一下
w3-margin-right Adds an 16px right margin to an element 测试一下
w3-margin-bottom Adds an 16px bottom margin to an element 测试一下
w3-margin-left Adds an 16px left margin to an element 测试一下
w3-section Adds an 16px top and bottom margin to an element 测试一下

Border Classes

Defines
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 测试一下