<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../css/html5.css">
<script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
<title>text-decoration的使用</title>
<style>
p{padding-left: 10px}
p.underline{ text-decoration:underline;} /*下划线*/
p.overline{ text-decoration:overline;} /*顶划线*/
p.line-through{ text-decoration:line-through;} /*删除线*/
p.blink{ text-decoration:blink} /*文字闪烁，只有低版本的firefox支持，高版本的通过js实现*/
p.none{ text-decoration:none} /*不给文字设置任何效果，默认值*/
label{
padding-left: 20px;
}
article{
margin: 20px;
}
article h3{
margin: 0;
}
nav{
padding-top:50px;
}
</style>
</head>
<body>
<header><h1>text-decoration的使用</h1></header>
<div id="container">
<nav>
<article>
<header><h3>上划线</h3></header>
<p class="overline">上划线文字 </p>
</article>
<article>
<header><h3>下划线</h3></header>
<p class="underline">下划线文字</p>
</article>
</nav>
<section>
<article style="transform: rotate(0deg)">
<header><h3 style="color:#fff">text-decoration属性说明</h3></header>
<p> text-decoration属性：允许对文本设置某种效果，对应值有： <br> <label>none-默认，没有任何效果；</label> <br> <label>underline：下划线；</label> <br> <label>overline：上划线；</label> <br> <label>line-through：删除线；</label> <br> <label>blink：文字闪烁。</label> </p> </article> <article style="transform: rotate(0deg)"> <header><h3 style="color:#fff;">不设置效果</h3></header> <p class="none">不设置效果</p> <p>正常文字对比</p> </article> </section> <nav> <article style="transform:rotate(10deg)"> <header><h3>删除线</h3></header> <p class="line-through">删除线文字、删除线文字</p> </article> <article style="transform:rotate(10deg)"> <header><h3>文字闪烁</h3></header> <p class="blink">文字闪烁</p> </article> </nav> <footer><h2></h2></footer> </div></body><script type="text/javascript"> //通过js实现文字闪烁效果 setInterval('BlinkObj()',500); function BlinkObj(){ var obj = $(".blink").css("visibility"); if(obj == "hidden") $(".blink").css("visibility","visible"); else $(".blink").css("visibility","hidden"); }</script></html>
