无需编写任何 CSS 代码，即可使用 W3.CSS 创建美观的网页样式。

在你的项目中使用它

好的，但是你可以搭配什么呢？

嗯，有意思，但是怎么做到的呢？

这篇文章的封面图片怎么样？

最近，我一直在寻找一种方法来创建一些网页，以便在即将举办的技术研讨会上用作演示页面。我不想在样式设计上花费太多时间，但同时又希望它们看起来美观且现代。此时使用 CSS 显然是不可能的，因为对于我想要创建的效果来说，那需要投入太多精力。后来，我偶然发现了一个完美符合我需求的工具——W3.CSS。W3.CSS
是一个现代且易于学习的 CSS 框架，它支持响应式设计，并且可以在各种浏览器和平台上运行。

在你的项目中使用它

要使用此框架设置页面样式，您只需在 HTML 页面中添加以下条目即可导入它：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

好的，但是你可以搭配什么呢？

要全面了解这个框架的功能，您可以查看其介绍页面。您可以自定义按钮、导航栏、下拉菜单和列表等元素的样式。您还可以应用预定义颜色，或为图像添加色调效果。当然，您还可以轻松设置内边距或外边距，甚至可以设置页面布局，使元素放置在正确的位置。或者，如果您愿意，也可以放置在左侧。

嗯，有意思，但是怎么做到的呢？

简而言之：要为任何 HTML 元素设置样式，都需要添加一个 class 属性。class 属性的值决定了样式。例如，要为元素添加预定义颜色（例如青色），元素的 class 属性需要设置为“w3-cyan”。要添加简单的边框，需要添加“w3-border”类。访问“W3.CSS”网站，查看所有这些值以及所有可用的样式。

这篇文章的封面图片怎么样？

啊，是的。这张图片只使用了“W3.CSS”进行样式设计，只是为了让您体验一下这个框架。

让我来告诉您我是如何创建它的。按钮（左侧）和图片（右侧，以及图片下方的文字）都放在一个div元素中，该元素看起来像这样：

<div class="w3-display-middle w3-container w3-border-top w3-border-bottom w3-margin w3-border-teal">

这意味着：

• w3-display-middle - 元素将放置在页面中间。元素可以显示在：左上角、顶部中间、右上角、左侧、中间、右侧或左下角、底部中间和右下角。
• w3-container - 一个元素，其左右内边距为 16px，适用于任何其他元素。
• w3-border-top和w3-border-bottom用于添加顶部和底部边框。边框颜色（青色）由w3-border-teal设置。您还可以创建圆形边框或粗边框。
• w3-margin - 为该容器的所有边添加 16px 的边距。

容器左侧的按钮包含以下 HTML 代码：

<button class="w3-btn w3-border w3-teal w3-margin w3-padding-large w3-left w3-large w3-opacity">Who's
        stylish?</button>

让我们看看这一切意味着什么：

• w3-btn - 创建一个矩形按钮，当鼠标悬停在该按钮上时，会显示漂亮的阴影。
• w3-border - 为按钮提供细边框。
• w3-teal - 将按钮颜色设置为青色。有关其他可用颜色，请参阅“颜色”部分。
• w3-left相当于CSS 中的float:left 。
• w3-large - 指定按钮的文本比默认文本大小更大。
• w3-opacity - 为按钮添加透明效果。有关更多详细信息和其他值，请参阅“效果”部分。

现在，来看右侧，也就是图片所在的位置：

<div class="w3-card-4 w3-border w3-left w3-padding-large w3-margin w3-teal">
        <img src="https://farm2.staticflickr.com/1870/44322750771_d9eb2522f8_n.jpg"
             class="w3-sepia-min w3-round-xlarge">
        <div class="w3-container w3-center">
            <h4><b>We are. Yes we are.</b></h4>
        </div>
</div>

如您所见，图片（img标签）及其下方的文字都放置在一个样式化的div 元素内。定义此div 元素功能的属性是w3-card-4。它指定此div 元素是一个容器（主要用于创建类似“纸卡”的容器），并带有 4px 的阴影边框。此外，该卡片div元素还设置了边框、浮动位置、内边距、外边距和背景颜色（这些已在前面的元素描述中提及）。

该图像的样式有两个属性：应用了棕褐色颜色效果（由w3-sepia-min属性给出），并且根据w3-round-xlarge属性，其边角被圆角化了很多。

图片正下方显示的文本被放置在一个w3-container类型的div元素中。w3 -center属性指定div 元素内的所有文本将相对于该div 元素居中显示。文本本身则是一个加粗的h4标签。

已经感到困惑了吗？不妨访问W3.CSS 网站，了解所有详细信息以及他们提供的轻松创建时尚网页的各种选项。