codecamp

W3.CSS Texts (文本)

文本对齐

w3-left-align 和 w3-right-align 类用于对齐文本。

实例

<div class="w3-container w3-border w3-large">

  <div class="w3-left-align"><p>左对齐文本。</p></div>

  <div class="w3-right-align"><p>右对齐文本。</p></div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

居中元素

w3-center 类用于中心对齐元素:

实例

<div class="w3-container w3-center">

  <h2>中心内容</h2>

  <img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">

  <p>一些居中的文本。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

宽文本

w3-wide 类指定一个更宽的文本:

此文字是正常的。

此 文 本 内 容 更 宽。

实例

<p class="w3-wide">w3-wide 指定更宽的文本。</p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

文本不透明度

w3-opacity 类旨在与颜色协同调色:

实例

<div class="w3-panel w3-pink">

  <h2 class="w3-opacity">文本不透明度</h2>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

文本阴影

CSS3 文本阴影属性可用于向文本添加阴影或模糊效果:

实例

<h2 class="w3-blue" style="text-shadow:1px 1px 0 #444">文本阴影</h2>


尝试一下 »
点击“尝试一下”按钮查看在线实例

文本特效

实例

<div class="w3-panel w3-pink">

  <h1 class="w3-opacity">

  <b>文本不透明度 + 粗体</b></h1>

</div>

<div class="w3-panel w3-amber">

  <h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">

  <b>黄色文本 + 阴影 + 粗体</b></h1>

</div>

<div class="w3-panel w3-blue">

  <h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">

  <b>橙色文本 + 阴影 + 粗体</b></h1>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

Text Shadow 在 IE 9 及更低版本中不起作用。


W3.CSS Fonts (字体)
W3.CSS Round (圆)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }