網頁語言
January 8, 2018
正常來說 HTML裡面,如果使用 li 做 float 功能時,就會讓 li 失去高度,為了不讓 li 失去高度,以及在之後的元素不會錯亂,需要有對應的程式寫法,如下:
HTML 一般寫法
<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
<a href="index.php">首頁 home</a><a href="Category.php">商品清單 Category</a><span>某某商品名稱</span>

December 19, 2017
box-sizing 似乎很不錯。但是做比較複雜的CSS設計時,有優點有缺點。
優點:可以快速地讓母容器縮小至所設定的大小。
缺點:但是內部尺寸卻不是很好計算。包括其內的子容器大小如果有其他設定,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;}
}


-- 注意點 --
Internet Explorer 10、Firefox 以及 Opera 支援@keyframes屬性
Chrome 和 Safari 則需要加上 -webkit- 的前綴
----
March 8, 2016
換行
<br>


文字大小
文字放大 由+1~+6
文字縮小 由-1~-6
<font size="+6">大字</font>
<font size="-1">小字</font>

範例:大字小字

粗體
<b>變粗的文字1</b>
<strong>變粗的文字2</strong>
<span style="font-weight:bold;">變粗的文字3</span>

範例:變粗的文字1, 變粗的文字2, 變粗的文字3

斜體
<i>斜體1</i>
<em>斜體2</em>
<span style="font-style:italic;">斜體3</span>

範例:斜體1, 斜體2, 斜體3
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>
分頁: 1/12 第一頁 1 2 3 4 5 6 7 8 9 10 下頁 最後頁
[ 顯示模式: 摘要 | 清單 ]