選單
×
我的 W3Schools 獲取認證 Spaces 教師專用 Plus 獲取認證 Spaces 教師專用 Plus
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS Examples

❮ Previous Next ❯
×

Header


  









W3.CSS Colors



Background Colors Text Colors Hover Colors


Examples explained





W3.CSS Containers



Containers Containers with color Container header using <div> Container header using <header> Container footer using <div> Container footer using <footer> Container <article> and <section> Container with <div> elements Container with semantic elements Container padding Container with headers and paragraphs


Examples explained





W3.CSS Borders



Borders Colored borders Rounded borders Thick borders Hoverable borders


Examples explained





W3.CSS Panels



Panels Panel notes Panel quotes Panel alerts Panel cards Panel round Hide/close a panel Show/Open a panel


Examples explained








  

  





W3.CSS Cards



Cards Colored cards Card content Photo cards Hoverable cards Avatar card with buttons Avatar card with full-width button Card Widgets


Examples explained





W3.CSS Fonts



Headings Font-size classes Override the W3.CSS defaults Change the default page font How to use a font class How to use external fonts External google font: lobster Font effects Font effects 2


Examples explained





W3.CSS Text



Text alignment Center elements Wide text Text shadow Text opacity Text special effects


Examples explained





W3.CSS Round



Round classes Circle class Text inside a circle Circle inside a circle Circle inside a circle 2


Examples explained





W3.CSS Padding



Padding number classes Padding size classes


Examples explained





W3.CSS Margins



Margin on all sides Margin top Margin bottom Margin left Margin right Margin sections


Examples explained





W3.CSS Display



Display container Display container with padding Display container for image Displaying a flag Floating classes Hide and show classes Toggle hide and show


Examples explained





W3.CSS Buttons



Buttons Button colors Hover colors Button shapes Button sizes Button borders Buttons with text effects Buttons with wide text effects Padded buttons Left and right buttons Full-width buttons Disabled buttons Button groups on the same line Button bars Buttons with ripple effects


Examples explained





W3.CSS Notes



Notes Grey with rounded borders Pale blue with left and right bar Pale red with left bar Pale yellow with border Pale green with border and bottom bar Yellow with top and bottom bar


Examples explained





W3.CSS Quotes



Quotes Large quotes Blockquotes Custom quotes 1 Custom quotes 2 Custom quotes 3 Black quote Quotes as cards Quotes as cards 2


Examples explained





W3.CSS Alerts



Basic alerts Closable alerts Rounded alerts Alert cards


Examples explained





W3.CSS Tables



Basic table Bordered table (horizontal dividers) Striped table Bordered striped table Borders around the table Table all (combines stripes, borders, etc) Flipping the stripes Centered table Table with a colored heading Table colors Hoverable table (grey color) Specific hoverable table color Table card Responsive table Tiny table Small table Large table xLarge table xxLarge table xxxLarge table Jumbo table


Examples explained





W3.CSS Lists



Basic list Bordered list List header List card Centered list Colored list Colored list item
 Hoverable list (grey color)
 Specific hoverable list color
 Closable list
 Padded list
 Avatar list
 Tiny list Small list Large list xLarge list xxLarge list xxxLarge list Jumbo list


Examples explained





W3.CSS Images



Rounded image Circled image Bordered image Image card Image text Responsive image Responsive image with max width Image opacity Image grayscale Image sepia Image hover effects Image opacity off Photo Album


Examples explained





W3.CSS Inputs



Top labels Bottom labels Input cards Colored labels Bordered inputs Rounded borders Borderless input Colored inputs Hoverable inputs Animated inputs Checkboxes Radio buttons Select menu Bordered select menu Form elements in a three-column grid Two-column layout with labels


Examples explained





W3.CSS Badges



Badges Colored Badges Badges in buttons Badges in lists I Badges in lists II Badges in tables Large badges UTF-8 badges


Examples explained





W3.CSS Tags, Labels, and Signs



Tags and labels Colored tags Large tags Tags as letters Tags in a row Tag as a sign Road signs Large signs Large signs 2 Rounded signs Rotated tags Spinning tags


Examples explained





W3.CSS Icons



Font awesome icons Google material design icons Bootstrap icons


Examples explained





W3.CSS Responsive



The w3-half class The w3-third class The w3-twothird class The w3-quarter class The w3-threequarter class Nested rows (w3-half inside w3-half) Columns using w3-rest Columns using percent The w3-content class Difference between w3-row and w3-row-padding


Examples explained





W3.CSS Animate



Top animation Bottom animation Left animation Right animation Fading animation Fading infinite animation Zoom animation Spin animation Fade all


Examples explained





W3.CSS Dropdowns



Hoverable dropdown menu Hoverable dropdown Dropdown in navbar Clickable dropdown menu Image dropdown Card dropdown Animated dropdown Right-aligned dropdown


Examples explained





W3.CSS Accordions



Basic accordion Accordion buttons Active accordion Accordion width Accordion links Accordion card with lists Accordion and dropdown in sidebar Animated accordion


Examples explained





W3.CSS Navigation



Basic navigation Colored bar Bordered bar Active link in bar Hoverable bar links Right-aligned links Bar font-size Bar padding Bar width Bar icons Bar with input Bar with dropdown Bar with an active dropdown and icon Bar with clickable dropdown Top bar Bottom bar Collapsible bar


Examples explained





W3.CSS Sidebar



Basic sidebar (always displayed) Collapsible sidebar Sidebar hiding a part of the page content Sidebar hiding all page content Sidebar shift content to the right Sidebar color Bordered sidebar Bottom bordered sidebar (dividers) Sidebar card Hoverable sidebar links (background color) Hoverable sidebar links (text color) Sidebar size Sidebar with icons (icon bar) Sidebar with dropdown Sidebar with accordion Animated sidebar Sidebar with overlay effect Sidebar with content


Examples explained





W3.CSS Tabs



Basic tab Active/current tab Vertical tab Animated tab content Tabbed image gallery Tabs in a grid


Examples explained





W3.CSS Pagination



Basic pagination Pagination arrows Active pagination link Pagination hover color Pagination size Bordered pagination Rounded bordered pagination Centered pagination Next/previous pagination arrows Pagination menu


Examples explained





W3.CSS Progress Bars



Basic progress bar Progress bar width Progress bar sizes Progress bar colors Rounded progress bars Progress bar labels Dynamic progress bar Dynamic progress bar with centered label Dynamic progress bar with left-aligned label Dynamic progress bar with label placed outside


Examples explained





W3.CSS Slideshow



Manual slideshow with images Automatic slideshow with images Automatic HTML slides Slideshow captions Slideshow indicators with numbers and prev/next buttons Slideshow indicators with icons and bullets Images as indicators Animated slides Automatic slideshow with infinite fading


Examples explained





W3.CSS Modal



Basic modal (dialog box/popup window) Modal with containers Modal card Animated modal Fade in modal Modal image Modal image gallery Modal login form Modal tab How to close the modal Modal lightbox (modal image gallery)


Examples explained





W3.CSS Tooltips



Inline tooltip text Inline tooltip tag Tooltip text before a hoverable image Tooltip text after a hoverable image Absolute tooltip Colored tooltip Rounded tooltip Small tooltip Large tooltip


Examples explained





W3.CSS Responsive Grid



Fluid grid demonstration Two equal columns Two unequal columns Three equal columns Three unequal columns Six equal columns Mixed: Mobile and Laptops Mixed: Mobile, Tablets and Laptops Difference between w3-row and w3-row-padding Columns using w3-rest Columns using percent


Examples explained





W3.CSS Code



Displaying examples Displaying code Displaying colored HTML Displaying colored CSS Displaying colored JavaScript code Displaying inline code (w3-codespan)


Examples explained





W3.CSS Filters



Filter Tables Filter Lists Filter Dropdowns (click) Filter Dropdowns (hover)


Examples explained






❮ Previous Next ❯



























  
    
  



PLUS


空格


獲取證書


面向教師


面向企業


聯絡我們







  ×
  
聯絡銷售

  
如果您想將 W3Schools 服務用於教育機構、團隊或企業，請傳送電子郵件給我們
sales@w3schools.com

  
報告錯誤

  
如果您想報告錯誤，或想提出建議，請傳送電子郵件給我們
help@w3schools.com









  
熱門教程

  HTML 教程

  CSS 教程

  JavaScript 教程

  操作方法教程

  SQL 教程

  Python 教程

  W3.CSS 教程

  Bootstrap 教程

  PHP 教程

  Java 教程

  C++ 教程

  jQuery 教程





  
熱門參考

  HTML 參考

  CSS 參考

  JavaScript 參考

  SQL 參考

  Python 參考

  W3.CSS 參考

  Bootstrap 參考

  PHP 參考

  HTML 顏色

  Java 參考

  Angular 參考

  jQuery 參考





  
熱門示例

  HTML 示例

  CSS 示例

  JavaScript 示例

  操作方法示例

  SQL 示例

  Python 示例

  W3.CSS 示例

  Bootstrap 示例

  PHP 示例

  Java 示例

  XML 示例

  jQuery 示例





  
獲取證書
 HTML 證書

  CSS 證書

  JavaScript 證書

  前端證書

  SQL 證書

  Python 證書

  PHP 證書

  jQuery 證書

  Java 證書

  C++ 證書

  C# 證書

  XML 證書









      

  論壇 關於 學院



W3Schools 經過最佳化，旨在方便學習和培訓。示例可能經過簡化，以提高閱讀和學習體驗。
教程、參考資料和示例會不斷審查，以避免錯誤，但我們無法保證所有內容的完全正確性。
使用 W3Schools 即表示您已閱讀並接受我們的使用條款、Cookie 和隱私政策。


版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援。