May 24, 2018
這個CSS主要是可以從畫面的某個X座標，移動到頂端時，便停留在畫面頂端，不再需要Javascript計算位置。
幫客戶製作網頁時，考慮好幾種界面來導入網頁，因為簡單，輕量化，不使用 Javascript ，覺得很棒；但沒有完全對應多數瀏覽器版本，於是就放棄這個方案，做個筆記，過幾年大家都升級電腦與系統了，這個寫法就通用了。
中文參考網頁：smaple
幫客戶製作網頁時，考慮好幾種界面來導入網頁，因為簡單，輕量化，不使用 Javascript ，覺得很棒；但沒有完全對應多數瀏覽器版本，於是就放棄這個方案，做個筆記，過幾年大家都升級電腦與系統了，這個寫法就通用了。
中文參考網頁：smaple
January 8, 2018
正常來說 HTML裡面，如果使用 li 做 float 功能時，就會讓 li 失去高度，為了不讓 li 失去高度，以及在之後的元素不會錯亂，需要有對應的程式寫法，如下：
HTML 一般寫法
就會變成這樣：（灰框：div, 藍框：ul, 紅框：li）
HTML 一般寫法
<ul>
<li>★</li>
<li>this is list comm.</li>
</ul>
<ul>
<li>★</li>
<li>this is list comm.</li>
</ul>
<li>★</li>
<li>this is list comm.</li>
</ul>
<ul>
<li>★</li>
<li>this is list comm.</li>
</ul>
就會變成這樣：（灰框：div, 藍框：ul, 紅框：li）
January 4, 2018
當我製作手機版網頁時，習慣性的沿用PC版的CSS定義
發現一個跟 padding 完全無關的問題（BUG）
HTML for mobile
發現一個跟 padding 完全無關的問題（BUG）
HTML for mobile
<a href="index.php">首頁 home</a><a href="Category.php">商品清單 Category</a><span>某某商品名稱</span>
December 19, 2017
box-sizing 似乎很不錯。但是做比較複雜的CSS設計時，有優點有缺點。
優點：可以快速地讓母容器縮小至所設定的大小。
缺點：但是內部尺寸卻不是很好計算。包括其內的子容器大小如果有其他設定，img, span, a, 等改變diaplay屬性後還是要經過計算
優點：可以快速地讓母容器縮小至所設定的大小。
缺點：但是內部尺寸卻不是很好計算。包括其內的子容器大小如果有其他設定，img, span, a, 等改變diaplay屬性後還是要經過計算
June 20, 2016
首先建立 @keyframes 規則
@keyframes youranimetion
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
-- 注意點 --
Internet Explorer 10、Firefox 以及 Opera 支援@keyframes屬性
Chrome 和 Safari 則需要加上 -webkit- 的前綴
----
February 26, 2016
<style type="text/css">
<!--
h1{
//標題用的文字區塊
}
p{
//文字的第一行內縮
text-indent: 50px;
//字間距離
letter-spacing: 3px;
//行間高度
line-height: 0.8;
//文字居中
text-align:center;
}
b{
//粗字。手機版不太起作用
}
strong{
//粗字。比較對應手機版
}
span{
//讓文字成為區塊元件
display:inline-block;
//文字背景
background:#000000;
background:rgba(0,0,0,1.00);
//文字顏色
background:#ffffff;
color:rgba(255,255,255,1.00);
//區塊圓角
border-radius:13px;
-moz-border-radius:13px;
-webkit-border-radius:13px;
//粗字。也可以這樣設定。對應中文。英文有更多詳細設定。
font-weight:bolder;
}
a{
//讓a成為母區塊
position:relative;
}
a:hover{
//不要出現文字下底線
text-decoration:none;
}
a:hover::before{
//讓a:hover::before成為子區塊
position:absolute;
}
-->
</style>
<!--
h1{
//標題用的文字區塊
}
p{
//文字的第一行內縮
text-indent: 50px;
//字間距離
letter-spacing: 3px;
//行間高度
line-height: 0.8;
//文字居中
text-align:center;
}
b{
//粗字。手機版不太起作用
}
strong{
//粗字。比較對應手機版
}
span{
//讓文字成為區塊元件
display:inline-block;
//文字背景
background:#000000;
background:rgba(0,0,0,1.00);
//文字顏色
background:#ffffff;
color:rgba(255,255,255,1.00);
//區塊圓角
border-radius:13px;
-moz-border-radius:13px;
-webkit-border-radius:13px;
//粗字。也可以這樣設定。對應中文。英文有更多詳細設定。
font-weight:bolder;
}
a{
//讓a成為母區塊
position:relative;
}
a:hover{
//不要出現文字下底線
text-decoration:none;
}
a:hover::before{
//讓a:hover::before成為子區塊
position:absolute;
}
-->
</style>
