W3.CSS有几个实用程序类，这些类对于日常设计需求非常有用。
- 颜色实用程序类-示例：w3-红色，w3-黄色
- 填充实用程序类-示例：w3-padding-jumbo，w3-padding-16
- 保证金实用程序类-示例：w3-margin-8，w3-margin-64
- Border实用程序类-示例：w3-border-left，w3-border-right
- 大小实用程序类-示例：w3-tiny，w3-small
- Circle实用程序类-示例：w3-circle
- Center实用程序类-示例：w3-center
例
w3css_utilities.htm
<html>
<head>
<title>The W3.CSS Utilities</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>W3.CSS Utilities</h2>
<hr/>
<h3>Color Utilities Demo</h3>
<div class = "w3-container w3-red">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "w3-container w3-green">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
<h3>Padding Utilities Demo</h3>
<div class = "w3-container w3-red w3-padding-jumbo">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "w3-container w3-green w3-padding-16">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
<h3>Margin Utilities Demo</h3>
<div class = "w3-container w3-margin-64">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "w3-container w3-margin-8">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
<h3>Border Utilities Demo</h3>
<div class = "w3-container w3-red w3-border-left w3-border-right">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "w3-container w3-green w3-border">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
<h3>Size Utilities Demo</h3>
<div class = "w3-container">
<p class = "w3-small">Using w3-small font.</p>
<p>Using Default (medium).</p>
<p class = "w3-large">Using w3-large font.</p>
<p class = "w3-xlarge">Using w3-xlarge font.</p>
</div>
<h3>Circle Utility Demo</h3>
<div class = "w3-container">
</div>
<h3>Center Utility Demo</h3>
<div class = "w3-container w3-center w3-black w3-card-2">
</div>
</body>
</html>大家可以运行看下效果。
作者：terry，如若转载，请注明出处：https://www.web176.com/w3css/908.html
支付宝 
微信 