text-decoration的使用
<!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>
相關文章
- 1. Cookie的使用(使用C#)
- 2. jQuery的使用——timepicker的使用
- 3. 方法的使用，數組的使用
- 4. mosby mvp 庫的使用的使用
- 5. matplotlib的使用——pie（餅圖）的使用
- 6. SVN 的使用(二) Eclipse 中的使用
- 7. C# 集合的使用List的使用
- 8. Afinal的使用（一）：FinalActivity的使用
- 9. b Spring AOP 的使用--API的使用
- 10. linux的使用之vmware的使用
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
