a. Indentation: text-indent: 3em
b. Alignment: text-align: left
c. Text decoration: text-decoration: underline
d. Letter spacing: letter-spacing: 0.5em
e. Handling blanks and line breaks:
1. There are several blanks in the code, the page shows a few blanks: white-space: pre
2. Combine the general blank, that is, the web page only displays a blank: white-space: normal
3. Same as normal, and can't be split: white-space: nowrap
4. Do not merge general whitespace, only branch when a new line appears in the original file: white-space: pre-wrap
5. Merge general blanks, only branches when new lines appear in the original file: white-space: pre-line
a. Indentation (縮排)：text-indent: 3em
b. Alignment (對齊)：text-align: left
c. Text decoration (文字裝飾)：text-decoration: underline
d. Letter spacing (字母間距)：letter-spacing: 0.5em
e. 處理空白和換行：
1. 程式碼中有幾個空白，網頁就顯示幾個空白：white-space: pre
2. 合併一般空白，就是網頁只顯示一個空白：white-space: normal
3. 跟 normal 一樣，且不可分行：white-space: nowrap
4. 不合併一般空白，只有在原始檔中出現新行時才分行：white-space: pre-wrap
5. 合併一般空白，只有在原始檔中出現新行時才分行：white-space: pre-line
2. Transition (轉場效果)
a. Transition：Different pre-words for different browsers
1. Chrome： -webkit-
2. Firefox： -moz-
3.opera： -o-
4. IE：not support
b. Example
1. Need 2 JS, one CSS, and a few pictures.
Code:
<title> Transition Demo</title>
<link rel="stylesheet" href="refineslide.css" />
</head>
<body>
<ul class="rs-slider">
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
<li><img src="images/05.jpg" /></li>
<li><img src="images/06.jpg" /></li>
<li><img src="images/07.jpg" /></li>
<li><img src="images/07.jpg" /></li>
</ul>
<script src="jquery.js"></script>
<script src="jquery.refineslide.min.js"></script>
<script>
$(document).ready(function () {
$('.rs-slider').refineSlide();
});
</script>
</body>
</html>
Result:
No comments:
Post a Comment