33 lines
1.0 KiB
Markdown
33 lines
1.0 KiB
Markdown
|
|
|||
|
|
#localeTitle: undefined
|
|||
|
|
#W3 CSS容器 W3.css提供了一个容器类，它为任何html元素添加了16个像素的左右填充，以及0.01em的 顶部和底部填充。 这使得它非常适用于包含`<header>, <div>, <footer>, <section>`等元素的html。但也可以在`<img> and <p>.`等元素上使用效果很好`<img> and <p>.`
|
|||
|
|
|
|||
|
|
### 简单的例子
|
|||
|
|
```
|
|||
|
|
<header class="w3-container">
|
|||
|
|
<h1>Header With W3 Container</h1>
|
|||
|
|
</header>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<header>
|
|||
|
|
<h1>Header Without W3 Container</h1>
|
|||
|
|
</header>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
会产生以下结果。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 使用W3.Css容器
|
|||
|
|
|
|||
|
|
只需将常规样式表链接添加到网页的头部，如下所示：
|
|||
|
|
```
|
|||
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
或者将最新的css文件下载到本地计算机。这里：（https://www.w3schools.com/w3css/4/w3.css）
|
|||
|
|
|
|||
|
|
#### 有关W3.Css容器的更多信息
|
|||
|
|
|
|||
|
|
##### W3schools.com（https://www.w3schools.com/w3css/w3css\_containers.asp）
|