<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post/1147/ <![CDATA[拍賣與購物平台常用的HTML程式碼]]> apao <apao@www.apao.idv.tw> Tue, 08 Mar 2016 08:33:27 +0000 https://blog.apao.idv.tw/post/1147/ 換行
<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

底線
<u>下底線</u>
<span style="text-decoration:underline;">下底線</span>

範例：下底線, 下底線

文字顏色
<font color="blue">藍色的字</font>
<font color="#FF0000">紅色的字</font>
<span style="color:orange; background:#F9FDAD;">橘色的字，黃色底</span>

範例：藍色的字, 紅色的字, 橘色的字，黃色底


黑色
black
白色
white
棕色
maroon
深藍色
navy
藍色
blue
紅色
red
綠色
green
檸檬綠
lime
黃色
yellow
銀色
silver
橄欖色
olive
紫色
purple
灰色gray洋紅色fuchsia淺藍色aqua


連結
<a href="你的連結" target="_blank">你的連結</a>

你的連結

圖片連結
<img src="你的圖片連結" alt=""/>



文字居中
<center>文字居中1</center>
<p style="text-align:center">文字居中2</p>

文字居中1

文字居中2



清單
<ul>
<li>清單1</li>
<li>清單2</li>
</ul>

  • 清單1
  • 清單2


表格
<table width="100%" border="1" cellspacing="1" cellpadding="2">
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>表格3</td>
<td>表格4</td>
</tr>
</table>

表格1表格2
表格3表格4


Tags - , , , , ]]> https://blog.apao.idv.tw/post/1029/ <![CDATA[favicon 製作與相關網站]]> apao <apao@www.apao.idv.tw> Wed, 09 Jul 2014 03:31:38 +0000 https://blog.apao.idv.tw/post/1029/ favicon就是Favorites Icon的縮寫，通常用於標籤頁上顯示，一般放置於網頁程式碼中<head>與</head>的裡面，用來加強網站辨識度及加強使用者的印象。常見的尺寸有16*16 px, 32*32 px 和48*48 px。
點擊在新視窗中瀏覽此圖片

製作favicon的網站連結（看喜歡用哪一個）
https://convertico.com/
https://www.ifreesite.com/favicon/

點擊在新視窗中瀏覽此圖片
▲原圖

進入Photoshoop編輯

點擊在新視窗中瀏覽此圖片
▲原比例

點擊在新視窗中瀏覽此圖片
▲上下拉長

點擊在新視窗中瀏覽此圖片
▲到 http://www.favicon.cc/

點擊在新視窗中瀏覽此圖片
▲按下 Import Image

點擊在新視窗中瀏覽此圖片
▲選擇上傳

點擊在新視窗中瀏覽此圖片
▲編輯畫面

點擊在新視窗中瀏覽此圖片
▲Download favicon （舊版瀏覽器，新版則是出現在分頁簽上）

或是到Photoshop輸出 ico (Windows)也是可以

在<head>中放入
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">


有時要這樣才能出現
<link rel="shortcut icon" type="image/x-icon" href="(Your URL)/favicon.ico">


記得ICON制作時轉換時，格式不能弄錯囉。

參考網頁：
http://blog.apao.idv.tw/html5/favicon/favicon.php

製作網頁：
http://www.childepi.org.tw/





Tags - , , , ]]> https://blog.apao.idv.tw/post/918/ <![CDATA[製作 favicon.ico]]> apao <apao@www.apao.idv.tw> Wed, 07 Aug 2013 06:12:27 +0000 https://blog.apao.idv.tw/post/918/ 點擊在新視窗中瀏覽此圖片

要製作 favicon.ico 以前在photoshop裡面可以製作，但是現在似乎在選項內跑不出來了。

一般模式
將html碼置入於<head></head>之間
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">


一般模式 [不同位置]
<head></head>之間放入
<!--第一種-->
<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<!--第二種-->
<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<!--第三種-->
<link rel="icon" href="animated_favicon1.gif" type="image/gif" >


動畫模式
<head></head>之間放入
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >


如果覺得自己製作麻煩，將自己制作好的16x16px GIF或是PNG檔案
上傳至網站中然後下載製作好的favicon.ico
FavIcon Generator

點擊在新視窗中瀏覽此圖片

再將html碼置入於
<head></head>之間放入
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">


也有例外的寫法
<head></head>之間放入
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />


參考網頁：
http://blog.apao.idv.tw/html5/favicon/favicon.php
Tags - , ]]>