tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger47125tag:blogger.com,1999:blog-5946530704742130970.post-7904583457729593852022-07-15T12:38:00.000+08:002022-07-15T12:38:39.289+08:00[轉載] CSS 变量教程轉載自:<a href="http://www.ruanyifeng.com/blog/2017/05/css-variables.html" target="_blank">阮一峰 CSS 变量教程</a>
<p>今年三月,微软<a href="https://www.neowin.net/news/css-custom-properties-are-coming-to-microsoft-edge-in-the-windows-10-creators-update" target="_blank">宣布</a> Edge 浏览器将支持 CSS 变量。</p>
<p>这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。</p>
<h3>一、变量的声明</h3>
<p>声明变量的时候,变量名前面要加两根连词线(<code>--</code>)。</p>
<pre class="css:nogutter:nocontrols" name="code">
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
</pre>
<p>上面代码中,<code>body</code>选择器里面声明了两个变量:<code>--foo</code>和<code>--bar</code>。</p>
<p>它们与<code>color</code>、<code>font-size</code>等正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variable)又叫做<strong>"CSS 自定义属性"</strong>(CSS custom properties)。因为变量与自定义的 CSS 属性其实是一回事。</p>
<p>你可能会问,为什么选择两根连词线(<code>--</code>)表示变量?因为<code>$foo</code>被 Sass 用掉了,<code>@foo</code>被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了。 </p>
<p>各种值都可以放入 CSS 变量。</p>
<pre class="css:nogutter:nocontrols" name="code">
:root{
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
}
</pre>
<p>变量名大小写敏感,<code>--header-color</code>和<code>--Header-Color</code>是两个不同变量。</p>
<h3>二、var() 函数</h3>
<p><code>var()</code>函数用于读取变量。</p>
<pre class="css:nogutter:nocontrols" name="code">
a {
color: var(--foo);
text-decoration-color: var(--bar);
}
</pre>
<p><code>var()</code>函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。</p>
<pre class="css:nogutter:nocontrols" name="code">
color: var(--foo, #7F583F);
</pre>
<p>第二个参数不处理内部的逗号或空格,都视作参数的一部分。</p>
<pre class="css:nogutter:nocontrols" name="code">
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);
</pre>
<p><code>var()</code>函数还可以用在变量的声明。</p>
<pre class="css:nogutter:nocontrols" name="code">
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}
</pre>
<p>注意,变量值只能用作属性值,不能用作属性名。</p>
<pre class="css:nogutter:nocontrols" name="code">
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}
</pre>
<p>上面代码中,变量<code>--side</code>用作属性名,这是无效的。</p>
<h3>三、变量值的类型</h3>
<p>如果变量值是一个字符串,可以与其他字符串拼接。</p>
<pre class="css:nogutter:nocontrols" name="code">
--bar: 'hello';
--foo: var(--bar)' world';
</pre>
<p>利用这一点,可以 debug(<a href="https://codepen.io/malyw/pen/oBWMOY" target="_blank">例子</a>)。</p>
<pre class="css:nogutter:nocontrols" name="code">
body:after {
content: '--screen-category : 'var(--screen-category);
}
</pre>
<p>如果变量值是数值,不能与数值单位直接连用。</p>
<pre class="css:nogutter:nocontrols" name="code">
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
</pre>
<p>上面代码中,数值与单位直接写在一起,这是无效的。必须使用<code>calc()</code>函数,将它们连接。</p>
<pre class="css:nogutter:nocontrols" name="code">
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
</pre>
<p>如果变量值带有单位,就不能写成字符串。</p>
<pre class="css:nogutter:nocontrols" name="code">
/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);
}
</pre>
<br/>
<h3>四、作用域</h3>
<p>同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。</p>
<p>下面是一个<a href="http://jsbin.com/buwahixoqo/edit?html,css,output" target="_blank">例子</a>。</p>
<pre class="xml:nogutter:nocontrols" name="code">
<style>
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
</pre>
<p>上面代码中,三个选择器都声明了<code>--color</code>变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。</p>
<p>这就是说,变量的作用域就是它所在的选择器的有效范围。</p>
<pre class="css:nogutter:nocontrols" name="code">
body {
--foo: #7F583F;
}
.content {
--bar: #F7EFD2;
}
</pre>
<p>上面代码中,变量<code>--foo</code>的作用域是<code>body</code>选择器的生效范围,<code>--bar</code>的作用域是<code>.content</code>选择器的生效范围。</p>
<p>由于这个原因,全局的变量通常放在根元素<code>:root</code>里面,确保任何选择器都可以读取它们。</p>
<pre class="css:nogutter:nocontrols" name="code">
:root {
--main-color: #06c;
}
</pre>
<br/>
<h3>五、响应式布局</h3>
<p>CSS 是动态的,页面的任何变化,都会导致采用的规则变化。</p>
<p>利用这个特点,可以在响应式布局的<code>media</code>命令里面声明变量,使得不同的屏幕宽度有不同的变量值。</p>
<pre class="css:nogutter:nocontrols" name="code">
body {
--primary: #7F583F;
--secondary: #F7EFD2;
}
a {
color: var(--primary);
text-decoration-color: var(--secondary);
}
@media screen and (min-width: 768px) {
body {
--primary: #F7EFD2;
--secondary: #7F583F;
}
}
</pre>
<br/>
<h3>六、兼容性处理</h3>
<p>对于不支持 CSS 变量的浏览器,可以采用下面的写法。</p>
<pre class="css:nogutter:nocontrols" name="code">
a {
color: #7F583F;
color: var(--primary);
}
</pre>
<p>也可以使用<code>@support</code>命令进行检测。</p>
<pre class="css:nogutter:nocontrols" name="code">
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
</pre>
<br/>
<h3>七、JavaScript 操作</h3>
<p>JavaScript 也可以检测浏览器是否支持 CSS 变量。</p>
<pre class="js:nogutter:nocontrols" name="code">
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}
</pre>
<p>JavaScript 操作 CSS 变量的写法如下。</p>
<pre class="js:nogutter:nocontrols" name="code">
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');
</pre>
<p>这意味着,JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子,事件信息被存入 CSS 变量。</p>
<pre class="js:nogutter:nocontrols" name="code">
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--mouse-x', e.clientX);
docStyle.setProperty('--mouse-y', e.clientY);
});
</pre>
<p>那些对 CSS 无用的信息,也可以放入 CSS 变量。</p>
<pre class="css:nogutter:nocontrols" name="code">
--foo: if(x > 5) this.width = 10;
</pre>
<p>上面代码中,<code>--foo</code>的值在 CSS 里面是无效语句,但是可以被 JavaScript 读取。这意味着,可以把样式设置写在 CSS 变量中,让 JavaScript 读取。</p>
<p>所以,CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。</p>
<h3>八、参考链接</h3>
<ul>
<li><a href="https://vgpena.github.io/winning-with-css-variables/" target="_blank">Winning with CSS Variables</a></li>
<li><a href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care" target="_blank">CSS Variables: Why Should You Care?</a></li>
<li><a href="https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/" target="_blank">It's Time To Start Using CSS Custom Properties</a></li>
<li><a href="https://philipwalton.com/articles/why-im-excited-about-native-css-variables/" target="_blank">Why I'm Excited About Native CSS Variables</a></li>
</ul>
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-46992830865686016662014-03-05T15:18:00.001+08:002014-03-05T15:18:36.453+08:00CSS 選擇器權重表<table class="table_list" cellspacing="0" cellpadding="4" border="1"> <tr>
<th></th>
<th>!important</th>
<th>style=""</th>
<th>#id</th>
<th>htmlTag</th>
<th>.class</th>
</tr>
<tr>
<th>權重</th>
<td style="text-align:center;">10000</td>
<td style="text-align:center;">1000</td>
<td style="text-align:center;">100</td>
<td style="text-align:center;">10</td>
<td style="text-align:center;">1</td>
</tr>
</table><br />
Ex:<br />
<pre class="css:nocontrols" name="code">.title {} /* 1 */
div span.title {} /* 21 */
#product-list .title {} /* 101 */
</pre><br />
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-40523079476201578702014-02-21T17:43:00.002+08:002023-02-25T21:33:00.264+08:00[T4] url, base64, sprite 三種格式的 icons.css 產生器之前有寫過 <a href="/2013/08/php-make-icons-css.html">[PHP] url, base64, sprite 三種格式的 icons.css 產生器</a>,這次換用 C# T4 Text Templates 來製作這個功能:<br />
<br />
<pre class="cs" name="code">int spriteGap = 30;
var scanTypes = new string[]{".jpg", ".gif", ".png"};
string workDirectory =
Path.GetDirectoryName(this.Host.TemplateFile);
/* 取得圖檔資訊 */
List<ImageInfo> imageList = Directory
.EnumerateFiles(Path.Combine(workDirectory, "icons"))
.Where(path => scanTypes.Contains(Path.GetExtension(path)))
.Select(path =>
{
var image = Image.FromFile(path);
return new ImageInfo{
FilePath = path,
FileName = Path.GetFileName(path),
IconImage = image,
IconName = Path.GetFileNameWithoutExtension(path),
TopOffset = 0,
Width = image.Width,
Height = image.Height,
IsAnimated = ImageAnimator.CanAnimate(image),
};
})
.OrderBy(info => info.IsAnimated)
.ToList();
/*檢查重複的圖檔名稱*/
List<string> repeatList = imageList.GroupBy(info => info.IconName)
.Where(g => g.Count() > 1)
.SelectMany(g => g.Select(x => x.FileName))
.ToList();
if(repeatList.Count > 0){
throw new Exception(
"出現重複的圖檔名稱[" + String.Join(", ", repeatList) + "]"
);
}
/* 製作 CSS Sprite */
int sumHeight = imageList.Sum( info => info.Height);
int spriteWidth = imageList.Max( info => info.Width);
int spriteHeight = sumHeight + (imageList.Count - 1) * spriteGap;
var bitmap = new Bitmap(spriteWidth, spriteHeight);
using (Graphics graphics = Graphics.FromImage(bitmap))
{
int nextTop = 0;
for(int i=0; i< imageList.Count; i++){
/*忽略具有動畫的 GIF 圖片*/
if(imageList[i].IsAnimated){ continue; }
imageList[i].TopOffset = nextTop;
graphics.DrawImage(imageList[i].IconImage, 0, nextTop);
nextTop = nextTop + imageList[i].Height + spriteGap;
}
graphics.Save();
}
SaveOutput("icons.sprite.png");
bitmap.Save(
Path.Combine(workDirectory, "icons.sprite.png"),
ImageFormat.Png
);
bitmap.Dispose();
</pre><br />
下載完整程式: <a href="https://dl.dropboxusercontent.com/u/16784943/code-demo/t4_make_icons_css.zip">t4_make_icons_css.zip</a><br />
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-56047174653778322932014-02-05T20:25:00.000+08:002014-02-05T20:25:35.858+08:00[CSS] float 與 clear<h3>float</h3>一開始是用來定義文繞圖的呈現,後來其浮動特性很適合用來排版佈局,所以大部分的網頁都用這種方式排版。 <br />
<br />
特性:<br />
<ul><li>不佔用父元素的空間</li>
<li>寬高會內縮至子元素所呈現的大小</li>
<li>會排擠其他相鄰的 inline 元素</li>
<li>在所定位的空間不足時會自動換行</li>
</ul><br />
<pre class="xml:nogutter:nocontrols" name="code"><div style="border:1px solid #f00; float:left;">div 1</div>
<div style="background:#0f0;">div 2</div>
</pre><div style="border:1px solid #f00; float:left;">div1</div><div style="background:#0f0;">div2</div><br />
透過上面的範例可以看出因為 div1 不佔用空間而讓 div2 的位子上移了,然而呈現與 div1 重疊的效果,以及可以看到 float 排擠文字的特性,而讓 div2 的文字被擠到 div1 之後。<br />
<br />
<br />
<br />
<h3>clear</h3>清除在元素相鄰邊上的 float 元素<br />
<br />
屬性:<br />
<ul><li>none 不做任何 clear 動作</li>
<li>left 將元素向下換行,來排除具有 float:left 的相鄰元素</li>
<li>right 將元素向下換行,來排除具有 float:right 的相鄰元素</li>
<li>both 將元素向下換行,來排除具有 float:left 或 float:right 的相鄰元素</li>
</ul><br />
<pre class="xml:nogutter:nocontrols" name="code"><div style="border:1px solid #f00; float:left;">div1</div>
<div style="background:#0f0; clear:left;">div2</div>
</pre><div style="border:1px solid #f00; float:left;">div1</div><div style="background:#0f0; clear:left;">div2</div><br />
這個範例在 div2 加上 clear:left 的屬性,讓 div2 根據前一個具有 float:left 元素之後向下換行,來排除具有 float:left 的相鄰元素。<br />
<br />
<br />
<pre class="xml:nogutter:nocontrols" name="code"><div style="border:1px solid #f00; float:left;">div1</div>
<div style="background:#0f0; clear:right;">div2</div>
</pre><div style="border:1px solid #f00; float:left;">div1</div><div style="background:#0f0; clear:right;">div2</div><br />
這個範例則是將 div2 換成 clear:right,可以看到 div1 與 div2 仍舊重疊在一起,這是因為 div2 前一個具有 float:right 不存在,而 div1 的 float:left 不是 div2 clear:right 排除的對象。<br />
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-78390549069734330712014-01-30T20:46:00.000+08:002014-01-30T20:46:26.947+08:00[CSS] display inline, block 與 inline-block<strong>inline</strong> 行內 (例如: <b>,<span>),具有以下特性:<br />
<ul><li>會連接在文字及 inline 元素之後</li>
<li>不具有 width, height 以及上下的 padding, margin (padding-top, padding-bottom, margin-top, margin-bottom)</li>
<li>寬度、高度會內縮至所含文字所使用的空間</li>
</ul><br />
<strong>block</strong> 區塊 (例如: <p>,<div>),具有以下特性:<br />
<ul><li>會獨佔父元素一整行的空間</li>
<li>具有完整 width, height 及 padding, margin 屬性</li>
<li>當不指定寬度時,預設寬度會擴張至一整列</li>
<li>當不指定高度時,預設高度會內縮至子元素所使用的空間</li>
</ul> <br />
<strong>inline-block</strong> 行內-區塊 (例如: <img>,<button>),同時具備 inline 與 block 的特性: <br />
<ul><li>會連接在文字及 inline 元素之後</li>
<li>具有完整 width, height 及 padding, margin 屬性</li>
<li>當不指定寬度、高度時,預設會內縮至所含文字所使用的空間</li>
</ul>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-31896571194172941612014-01-30T20:41:00.001+08:002014-01-30T20:41:27.309+08:00[CSS] Selector Meaning<table class="table_list" cellspacing="0" cellpadding="4" border="1"><tr class="header"><th>Selector</th><th>Meaning</th></tr>
<tr><td>AB</td><td>A and B</td></tr>
<tr><td>A, B</td><td>A or B</td></tr>
<tr><td>A B</td><td>foreach B whose parents contains A</td></tr>
<tr><td>A > B</td><td>foreach B whose parent is A</td></tr>
<tr><td>A + B</td><td>foreach B whose previous sibling is A</td></tr>
<tr><td>A ~ B</td><td>foreach B whose previous siblings contains A</td></tr>
</table>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-85304044466838396972014-01-21T00:23:00.001+08:002014-01-21T00:23:41.999+08:00[Less] 簡單做到背景漸層對選顏色不擅長,又想在網頁做出 CSS 漸層效果,Less 提供了兩個方便的函數 lighten(加亮顏色)、darken(加深顏色),透過這兩個函數就可以輕鬆產生漸層所需要的色差,然後調整百比值就可以控制漸層的色階。<br />
<br />
<pre class="css" name="code">.toolbar {
@color: #914;
@lighten: lighten(@color, 3%);
@darken: darken(@color, 3%);
background-color: @color;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
background-image: -webkit-linear-gradient(top, @lighten, @darken);
background-image: -moz-linear-gradient(top, @lighten, @darken);
background-image: -ms-linear-gradient(top, @lighten, @darken);
background-image: -o-linear-gradient(top, @lighten, @darken);
background-image: linear-gradient(to bottom, @lighten, @darken);
}
</pre><br />
上面除了用 linear-gradient 來產生漸層,額外還加上了 background-color 這個保險,讓不支援 CSS3 的 browser 也能有基本的底色。<br />
<br />
<br />
這樣寫還是有點麻煩,如果包成 mixin 會更方便,如下:<br />
<pre class="css" name="code">.bg-vertical-gradient(@color, @amount:3%) {
@lighten: lighten(@color, @amount);
@darken: darken(@color, @amount);
background-color: @color;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
background-image: -webkit-linear-gradient(top, @lighten, @darken);
background-image: -moz-linear-gradient(top, @lighten, @darken);
background-image: -ms-linear-gradient(top, @lighten, @darken);
background-image: -o-linear-gradient(top, @lighten, @darken);
background-image: linear-gradient(to bottom, @lighten, @darken);
}
.toolbar {
.bg-vertical-gradient(#914);
}
.banner {
.bg-vertical-gradient(#702, 5%);
}
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-17281822509853364672013-08-17T14:55:00.001+08:002013-08-17T15:01:57.490+08:00[PHP] url, base64, sprite 三種格式的 icons.css 產生器先做一個假設,如果 icon 的檔名就是 css 的 class 樣式名稱,那麼我們只要掃瞄資料夾的 Icon 圖檔,然後產生對應的 CSS 檔案,這樣就可以省去製作 Sprite 圖檔跟維護 CSS 對應的問題。<br />
<br />
第一種 url 格式只是取得路徑的問題。<br />
<br />
第二種 base64 格式可以透過 <code>base64_encode(file_get_contents($path));</code> 就簡單的達成。<br />
<br />
第三種 sprite 格式則使用 <a target="_blank" href="http://php.net/manual/en/book.imagick.php">Imagick</a> 去處理,會比較快樂。<br />
<br />
<br />
接著以下就是如何達成的程式片段:<br />
<br />
<pre class="php" name="code"><?php
/*把目錄改變到當前文件下*/
chdir(dirname(__FILE__));
/*Sprite 圖與圖的間距*/
$spriteGap = 30;
/*=[ 取得圖檔資訊 ]=*/
$maxWidth = 0;
$maxHeight = 0;
$nextTop = 0;
$imageList = array();
foreach ( glob('icons/*.{png,jpg,gif}',GLOB_BRACE) as $path )
{
$image = new Imagick($path);
$name = pathinfo($path,PATHINFO_FILENAME);
if(isset($imageList[$name])){
throw new Exception("圖片名稱重複 [ $name ]");
}
$info = array(
'{top}' => $nextTop,
'{image}' => $image,
'{width}' => $image->getImageWidth(),
'{height}' => $image->getImageHeight(),
'{name}' => $name,
'{path}' => $path,
'{isAnimate}' => false
);
$header = '';
switch($image->getImageFormat()){
case "PNG":
$header = 'data:image/png;base64,'; break;
case "JPEG":
$header = 'data:image/jpeg;base64,'; break;
case "GIF":
$header = 'data:image/gif;base64,'; break;
default: break;
}
$info['{uri}'] = $header.base64_encode(file_get_contents($path));
$maxWidth = max($maxWidth, $info['{width}']);
$maxHeight = max($maxHeight, $info['{height}']);
/*檢查圖片是否為動畫*/
$frameNum = 0;
foreach($image->deconstructImages() as $i) {
$frameNum++;
if ($frameNum > 1) {
$info['{isAnimate}'] = true;
break;
}
}
if(!$info['{isAnimate}']){
$nextTop += $info['{height}'] + $spriteGap;
}
$imageList[$name] = $info;
}
/*=[ 製作 CSS Sprite 圖檔 ]=*/
$spriteImage = new Imagick();
$spriteImage->newImage($maxWidth, $nextTop, new ImagickPixel());
$spriteImage->setImageFormat('png');
$spriteImage->paintTransparentImage(new ImagickPixel(), 0.0, 0);
foreach ($imageList as $name => $info)
{
if($info['{isAnimate}']){ continue; } /* 忽略 GIF 動畫 */
/* 複製 Icon 圖檔到 Sprite */
$spriteImage->compositeImage(
$info['{image}'],
$info['{image}']->getImageCompose(),
0,
$info['{top}']
);
$info['{image}']->destroy();
unset($imageList[$name]['{image}']);
}
$spriteImage->writeImage('icons.sprite.png');
$spriteImage->destroy();
$spriteImage = null;
</pre><br />
<br />
下載完整程式: <a target="_blank" href="https://dl.dropboxusercontent.com/u/16784943/code-demo/php_make_icons_css.zip">php_make_icons_css.zip</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-49832142920384977892013-07-07T13:29:00.000+08:002013-07-07T13:37:33.015+08:00[轉載][CSS] drop-shadows without images轉載自:<a target="_blank" href="http://nicolasgallagher.com/css-drop-shadows-without-images/">CSS drop-shadows without images</a><br />
<style type="text/css">
.post-body {
position:relative;
z-index:1;
}
/* Shared styles */
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
/* Curled corners */
.curled {
border:1px solid #efefef;
-moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.curled:before,
.curled:after {
bottom:12px;
left:10px;
width:50%;
height:55%;
max-width:200px;
max-height:100px;
-webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-webkit-transform:skew(-8deg) rotate(-3deg);
-moz-transform:skew(-8deg) rotate(-3deg);
-ms-transform:skew(-8deg) rotate(-3deg);
-o-transform:skew(-8deg) rotate(-3deg);
transform:skew(-8deg) rotate(-3deg);
}
.curled:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
/* Perspective */
.perspective:before {
left:80px;
bottom:5px;
width:50%;
height:35%;
max-width:200px;
max-height:50px;
-webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-webkit-transform:skew(50deg);
-moz-transform:skew(50deg);
-ms-transform:skew(50deg);
-o-transform:skew(50deg);
transform:skew(50deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
}
.perspective:after {
display:none;
}
/* Raised shadow - no pseudo-elements needed */
.raised {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/* Curved shadows */
.curved:before {
top:10px;
bottom:10px;
left:0;
right:50%;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:10px / 100px;
border-radius:10px / 100px;
}
.curved-vt-2:before {
right:0;
}
.curved-hz-1:before {
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.curved-hz-2:before {
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
/* Rotated box */
.rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rotated > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style><br />
<div class="drop-shadow lifted"><p>Lifted corners</p></div><div class="drop-shadow curled"><p>Curled corners</p></div><div class="drop-shadow perspective"><p>Perspective</p></div><div class="drop-shadow raised"><p>Raised box</p></div><div class="drop-shadow curved curved-vt-1"><p>Single vertical curve</p></div><div class="drop-shadow curved curved-vt-2"><p>Vertical curves</p></div><div class="drop-shadow curved curved-hz-1"><p>Single horizontal curve</p></div><div class="drop-shadow curved curved-hz-2"><p>Horizontal curves</p></div><div class="drop-shadow lifted rotated"><p>Rotated box</p></div>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-46650975776219412182013-06-04T22:39:00.001+08:002013-06-10T22:22:38.116+08:00[轉載][CSS] 3D 立體文字轉載自:<a target="_blank" href="http://markdotto.com/playground/3d-text/">3D Text</a><br />
<br />
<h1 class="title_3d">3D 立體文字</h1><br />
<pre class="css" name="code">h1.title_3d {
color: #FFFFFF;
font: bold 50px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</pre><br />
<style type="text/css">
h1.title_3d {
color: #FFF;
background: #11A9E2;
padding: 20px;
font: bold 50px/1 標楷體, "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-33568104778083619532013-05-29T21:23:00.001+08:002014-02-05T20:21:13.950+08:00[轉載] Default style sheet for HTML 4轉載自:<a target="_blank" href="http://www.w3.org/TR/CSS21/sample.html">W3C Appendix D. Default style sheet for HTML 4</a><br />
<br />
This appendix is informative, not normative.<br />
<br />
This style sheet describes the typical formatting of all HTML 4 ([HTML4]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.<br />
<br />
The full presentation of some HTML elements cannot be expressed in CSS 2.1, including replaced elements ("img", "object"), scripting elements ("script", "applet"), form control elements, and frame elements.<br />
<br />
For other elements, the legacy presentation can be described in CSS but the solution removes the element. For example, the FONT element can be replaced by attaching CSS declarations to other elements (e.g., DIV). Likewise, legacy presentation of presentational attributes (e.g., the "border" attribute on TABLE) can be described in CSS, but the markup in the source document must be changed. <br />
<br />
<pre class="css" name="code">html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed; }
li { display: list-item; }
head { display: none; }
table { display: table; }
tr { display: table-row; }
thead { display: table-header-group; }
tbody { display: table-row-group; }
tfoot { display: table-footer-group; }
col { display: table-column; }
colgroup { display: table-column-group; }
td, th { display: table-cell; }
caption { display: table-caption; }
th { font-weight: bolder; text-align: center; }
caption { text-align: center; }
body { margin: 8px; }
h1 { font-size: 2em; margin: .67em 0; }
h2 { font-size: 1.5em; margin: .75em 0; }
h3 { font-size: 1.17em; margin: .83em 0; }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0; }
h5 { font-size: .83em; margin: 1.5em 0; }
h6 { font-size: .75em; margin: 1.67em 0; }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder; }
blockquote { margin-left: 40px; margin-right: 40px; }
i, cite, em,
var, address { font-style: italic; }
pre, tt, code,
kbd, samp { font-family: monospace; }
pre { white-space: pre; }
button, textarea,
input, select { display: inline-block; }
big { font-size: 1.17em; }
small, sub, sup { font-size: .83em; }
sub { vertical-align: sub; }
sup { vertical-align: super; }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle; }
td, th, tr { vertical-align: inherit; }
s, strike, del { text-decoration: line-through; }
hr { border: 1px inset; }
ol, ul, dir,
menu, dd { margin-left: 40px; }
ol { list-style-type: decimal; }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0; }
u, ins { text-decoration: underline; }
br:before { content: "\A"; white-space: pre-line; }
center { text-align: center; }
:link, :visited { text-decoration: underline; }
:focus { outline: thin dotted invert; }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override; }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed; }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed; }
@media print {
h1 { page-break-before: always; }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid; }
ul, ol, dl { page-break-before: avoid; }
}
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-36639650058254651692012-06-04T01:29:00.000+08:002013-06-10T22:36:08.628+08:00[轉載] 自適應網頁設計轉載自:<a target="_blank" href="http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html">自适应网页设计(Responsive Web Design)</a> <a target="_blank" href="http://www.ruanyifeng.com/">阮一峰</a><br />
<br />
随着 3G 的普及,越来越多的人使用手机上网。<br />
<br />
移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?<br />
<br />
<a href="https://lh5.googleusercontent.com/-BaYt_zlv9p0/T8uOr2QueOI/AAAAAAAALUA/-OjZ66K3vpg/s1600-h/1335922013593.jpg"><img src="https://lh5.googleusercontent.com/-BaYt_zlv9p0/T8uOr2QueOI/AAAAAAAALUA/-OjZ66K3vpg/s512/1335922013593.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846233219758306" /></a><br />
<br />
手机的屏幕比较小,宽度通常在 600 像素以下,PC 的屏幕宽度,一般都在 1000 像素以上(目前主流宽度是1366×768),有的还达到了 2000 像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。<br />
<br />
很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个 mobile 版本,或者 iPhone / iPad 版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个 portal(入口),会大大增加架构设计的复杂度。<br />
<br />
于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?<br />
<br />
<a href="https://lh5.googleusercontent.com/-uIH_p4AhHN4/T8uOrZZsOmI/AAAAAAAALT4/2EqPm_6-2j4/s1600-h/1335922013149.jpg"><img src="https://lh5.googleusercontent.com/-uIH_p4AhHN4/T8uOrZZsOmI/AAAAAAAALT4/2EqPm_6-2j4/s512/1335922013149.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846225472731746" /></a><br />
<br />
<br />
<strong>一、"自适应网页设计"的概念</strong><br />
<br />
2010 年,Ethan Marcotte 提出了"<a target="_blank" href="http://www.alistapart.com/articles/responsive-web-design/">自适应网页设计</a>"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。<br />
<br />
他制作了一个<a target="_blank" href="http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html">范例</a>,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于 1300 像素,则 6 张图片并排在一行。<br />
<br />
<a href="https://lh4.googleusercontent.com/-XAH8R976OOI/T8uOse7P1SI/AAAAAAAALUM/ExEs_IE2RAc/s1600-h/1335922013819.jpg"><img src="https://lh4.googleusercontent.com/-XAH8R976OOI/T8uOse7P1SI/AAAAAAAALUM/ExEs_IE2RAc/s512/1335922013819.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846244135523618" /></a><br />
<br />
如果屏幕宽度在 600 像素到 1300 像素之间,则 6 张图片分成两行。<br />
<br />
<a href="https://lh5.googleusercontent.com/-iSqeGMtM0UY/T8uOrpu3KeI/AAAAAAAALT8/RcqQgtaeoLc/s1600-h/1335922013300.jpg"><img src="https://lh5.googleusercontent.com/-iSqeGMtM0UY/T8uOrpu3KeI/AAAAAAAALT8/RcqQgtaeoLc/s512/1335922013300.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846229856496098" /></a><br />
<br />
如果屏幕宽度在 400 像素到 600 像素之间,则导航栏移到网页头部。<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZkypXxwuGsMhVb1Wh3khRsYcCK48r1uMLiYGUNpKKqluIgJfZx17-pZXbx77I2p3deRiC3kAd42j51kIBYFdWUKrNb4sn8vTfSPVZW1YGbY5MTNnQ5f391lpbG3-J4g_zc53M4tFCmk3/s1600-h/1335922013682.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZkypXxwuGsMhVb1Wh3khRsYcCK48r1uMLiYGUNpKKqluIgJfZx17-pZXbx77I2p3deRiC3kAd42j51kIBYFdWUKrNb4sn8vTfSPVZW1YGbY5MTNnQ5f391lpbG3-J4g_zc53M4tFCmk3/s1600/1335922013682.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846236187791842" /></a><br />
<br />
如果屏幕宽度在 400 像素以下,则 6 张图片分成三行。<br />
<br />
<a href="https://lh6.googleusercontent.com/-HtZ9oy6v99Y/T8uOsogAY-I/AAAAAAAALUU/xQS_hQHczMg/s1600-h/1335922013951.jpg"><img src="https://lh6.googleusercontent.com/-HtZ9oy6v99Y/T8uOsogAY-I/AAAAAAAALUU/xQS_hQHczMg/s1600/1335922013951.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846246705619938" /></a><br />
<br />
<a target="_blank" href="http://mediaqueri.es/">mediaqueri.es</a> 上面有更多这样的例子。<br />
<br />
这里还有一个<a target="_blank" href="http://www.benjaminkeen.com/misc/bricss/">测试小工具</a>,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。<br />
<br />
<br />
<strong>二、允许网页宽度自动调整</strong><br />
<br />
"自适应网页设计"到底是怎么做到的?其实并不难。<br />
<br />
首先,在网页代码的头部,加入一行 <a target="_blank" href="https://developer.mozilla.org/en/mobile/viewport_meta_tag">viewport元标签</a>。<br />
<br />
<pre class="xml" name="code"><meta name="viewport" content="width=device-width, initial-scale=1" />
</pre><br />
<a target="_blank" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">viewport</a> 是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为 1.0,即网页初始大小占屏幕面积的 100%。<br />
<br />
所有主流浏览器都支持这个设置,包括 IE9。对于那些老式浏览器(主要是 IE6、7、8),需要使用 <a target="_blank" href="http://code.google.com/p/css3-mediaqueries-js/">css3-mediaqueries.js</a>。<br />
<br />
<pre class="xml" name="code"><!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</pre><br />
<br />
<strong>三、不使用绝对宽度</strong><br />
<br />
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。<br />
<br />
具体说,CSS代码不能指定像素宽度:<br />
<br />
<pre class="css" name="code">width: xxx px;
</pre><br />
只能指定百分比宽度:<br />
<br />
<pre class="css" name="code">width: xx%;
</pre><br />
或者<br />
<br />
<pre class="css" name="code">width: auto;
</pre><br />
<br />
<strong>四、相对大小的字体</strong><br />
<br />
字体也不能使用绝对大小(px),而只能使用相对大小(em)。<br />
<br />
<pre class="css" name="code">body {
font: normal 100% Helvetica, Arial, sans-serif;
}
</pre><br />
上面的代码指定,字体大小是页面默认大小的 100%,即 16 像素。<br />
<br />
<pre class="css" name="code">h1 {
font-size: 1.5em;
}
</pre><br />
然后,h1 的大小是默认大小的 1.5 倍,即 24 像素(24/16=1.5)。<br />
<br />
<pre class="css" name="code">small {
font-size: 0.875em;
}
</pre><br />
small 元素的大小是默认大小的 0.875 倍,即 14 像素(14/16=0.875)。<br />
<br />
<br />
<strong>五、流动布局(fluid grid)</strong><br />
<br />
"<a target="_blank" href="http://www.alistapart.com/articles/fluidgrids/">流动布局</a>"的含义是,各个区块的位置都是浮动的,不是固定不变的。<br />
<br />
<pre class="css" name="code">.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
</pre><br />
<a target="_blank" href="http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/">float</a> 的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向 overflow(溢出),避免了水平滚动条的出现。<br />
<br />
另外,绝对定位(position: absolute)的使用,也要非常小心。<br />
<br />
<br />
<strong>六、选择加载CSS</strong><br />
<br />
"自适应网页设计"的核心,就是 CSS3 引入的 <a target="_blank" href="http://www.w3.org/TR/CSS21/media.html">Media Query</a> 模块。<br />
<br />
它的意思就是,自动探测屏幕宽度,然后加载相应的 CSS 文件。<br />
<br />
<pre class="xml" name="code"><link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
</pre><br />
上面的代码意思是,如果屏幕宽度小于 400 像素(max-device-width: 400px),就加载 tinyScreen.css 文件。<br />
<br />
<pre class="xml" name="code"><link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
</pre><br />
如果屏幕宽度在 400 像素到 600 像素之间,则加载 smallScreen.css 文件。<br />
<br />
除了用 html 标签加载 CSS 文件,还可以在现有 CSS 文件中加载。<br />
<br />
<pre class="css" name="code">@import url("tinyScreen.css") screen and (max-device-width: 400px);
</pre><br />
<br />
<strong>七、CSS 的 @media 规则</strong><br />
<br />
同一个 CSS 文件中,也可以根据不同的屏幕分辨率,选择应用不同的 CSS 规则。<br />
<br />
<pre class="css" name="code">@media screen and (max-device-width: 400px) {
.column {
float: none;
width: auto;
}
#sidebar {
display: none;
}
}
</pre><br />
上面的代码意思是,如果屏幕宽度小于 400 像素,则 column 块取消浮动(float:none)、宽度自动调节(width:auto),sidebar 块不显示(display:none)。<br />
<br />
<br />
<strong>八、图片的自适应(fluid image)</strong><br />
<br />
除了布局和文本,"自适应网页设计"还必须实现图片的<a target="_blank" href="http://unstoppablerobotninja.com/entry/fluid-images">自动缩放</a>。<br />
<br />
这只要一行 CSS 代码:<br />
<br />
<pre class="css" name="code">img { max-width: 100%; }
</pre><br />
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:<br />
<br />
<pre class="css" name="code">img, object { max-width: 100%; }
</pre><br />
老版本的 IE 不支持 max-width,所以只好写成:<br />
<br />
<pre class="css" name="code">img { width: 100%; }
</pre><br />
此外,windows 平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用 IE 的专有命令:<br />
<br />
<pre class="css" name="code">img { -ms-interpolation-mode: bicubic; }
</pre><br />
或者,Ethan Marcotte 的 <a target="_blank" href="http://unstoppablerobotninja.com/demos/resize/imgSizer.js">imgSizer.js</a>。<br />
<br />
<pre class="js" name="code">addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
</pre><br />
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。<br />
<br />
(完)Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-21502380030553182662011-05-23T17:07:00.001+08:002014-10-08T13:44:45.237+08:00CSS Selector 優先權計算表資料來源:<a target="_blank" href="http://www.aiyooo.net/blog/archives/506/css-selector%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7.html">小繁的blog</a><br />
<a href="http://1.bp.blogspot.com/-EOXssn7rheU/Tdoi0z6Ze9I/AAAAAAAANHg/692lFsBwAq4/s1600/Css_Selector.png"><img src="http://1.bp.blogspot.com/-EOXssn7rheU/Tdoi0z6Ze9I/AAAAAAAANHg/692lFsBwAq4/s512/Css_Selector.png" /></a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-37815853752378841102011-05-19T13:16:00.000+08:002013-08-06T22:43:11.618+08:00Hotmail, Yahoo!Mail, Gmail 郵件CSS樣式表轉載自:<br />
<a target="_blank" href="http://www.campaignmonitor.com/css/">Guide to CSS support in email clients - Articles & Tips - Campaign Monitor</a><br />
<a target="_blank" href="http://www.webknowhow.net/dir/HTML/CSS/0607CSSSupportineMail.html">CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail</a><br />
<br />
<table class="table_list" cellspacing="0" cellpadding="5" border="1"><tr class="header" style="text-align:left;"> <th>style element</th> <th>Gmail</th> <th>Hotmail</th> <th>Yahoo! Mail</th> </tr>
<tr> <td><code><style></code> element in the <code><head></code></td> <td>No</td> <td>No</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td><code><style></code> element in the <code><body></code></td> <td>No</td> <td style="color:#070;">Yes, but...</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr class="header" style="text-align:left;"> <th>link element</th> <th>Gmail</th> <th>Hotmail</th> <th>Yahoo! Mail</th> </tr>
<tr> <td><code><link></code> element in the <code><head></code></td> <td>No</td> <td>No</td> <td>No</td> </tr>
<tr> <td><code><link></code> element in the <code><body></code></td> <td>No</td> <td>No</td> <td>No</td> </tr>
<tr class="header" style="text-align:left;"> <th>CSS selector</th> <th>Gmail</th> <th>Hotmail</th> <th>Yahoo! Mail</th> </tr>
<tr> <td>*</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e > f</td> <td class="untestable">untestable</td> <td>No</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e:link</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e:active, e:hover</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e:focus</td> <td class="untestable">untestable</td> <td>No</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e:lang©</td> <td class="untestable">untestable</td> <td>No</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e+f</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e[foo]</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e.className</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e#id</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e:first-line</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>e:first-letter</td> <td class="untestable">untestable</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr class="header" style="text-align:left;"> <th>CSS property</th> <th>Gmail</th> <th>Hotmail</th> <th>Yahoo! Mail</th> </tr>
<tr> <td>background-color</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>background-image</td> <td>No</td> <td style="color:#070;">Yes, but...</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>background-position</td> <td>No</td> <td>No</td> <td>No</td> </tr>
<tr> <td>background-repeat</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>border</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>border-collapse</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>border-spacing</td> <td style="color:#070;">Yes</td> <td>No</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>bottom</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>caption-side</td> <td style="color:#070;">Yes</td> <td>No</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>clear</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>clip</td> <td>No</td> <td style="color:#070;">Yes, but...</td> <td style="color:#070;">Yes, but...</td> </tr>
<tr> <td>color</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>cursor</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>direction</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>display</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>empty-cells</td> <td style="color:#070;">Yes</td> <td>No</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>filter</td> <td>No</td> <td>No</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>float</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>font-family</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>font-size</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>font-style</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>font-variant</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>font-weight</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>height</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>left</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>letter-spacing</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>line-height</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>list-style-image</td> <td>No</td> <td style="color:#070;">Yes, but...</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>list-style-position</td> <td style="color:#070;">Yes</td> <td>No</td> <td>No</td> </tr>
<tr> <td>list-style-type</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>margin</td> <td style="color:#070;">Yes</td> <td>No</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>opacity</td> <td>No</td> <td>No</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>overflow</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>padding</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>position</td> <td>No</td> <td>No</td> <td>No</td> </tr>
<tr> <td>right</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>table-layout</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>text-align</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>text-decoration</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>text-indent</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>text-transform</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>top</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>vertical-align</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>visibility</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>white-space</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>width</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>word-spacing</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>z-index</td> <td>No</td> <td style="color:#070;">Yes</td> <td style="color:#070;">Yes</td> </tr>
<tr class="header" style="text-align:left;"> <th>Others</th> <th>Gmail</th> <th>Hotmail</th> <th>Yahoo! Mail</th> </tr>
<tr> <td>@import</td> <td class="untestable">untestable</td> <td>No</td> <td>No</td> </tr>
<tr> <td>IE Mac hack</td> <td>No</td> <td>No</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>javascript in url()</td> <td>No</td> <td>No</td> <td>No</td> </tr>
<tr> <td>url()</td> <td>No</td> <td>No</td> <td style="color:#070;">Yes</td> </tr>
<tr> <td>Inline comments</td> <td>No</td> <td>No</td> <td style="color:#070;">Yes</td> </tr>
</table>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-55715341433220771532011-01-18T16:15:00.001+08:002013-08-20T20:27:44.234+08:00CSS 常用命名表<h3>版面類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>欄目</td><td>column</td></tr>
<tr><td>容器</td><td>container</td></tr>
<tr><td>內容</td><td>content</td></tr>
<tr><td>頁尾</td><td>footer</td></tr>
<tr><td>頁首</td><td>header</td></tr>
<tr><td>版型佈局</td><td>layout</td></tr>
<tr><td>首頁</td><td>index</td></tr>
<tr><td>頁面主體</td><td>main</td></tr>
<tr><td>側欄</td><td>sidebar</td></tr>
</table><br />
<h3>導航類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>主導航</td><td>main_nav</td></tr>
<tr><td>全域導航</td><td>global_nav</td></tr>
<tr><td>導航</td><td>nav</td></tr>
<tr><td>領行列</td><td>navbar </td></tr>
<tr><td>左導航</td><td>left_sidebar</td></tr>
<tr><td>右導航</td><td>right_sidebar</td></tr>
<tr><td>子導航</td><td>subnav</td></tr>
<tr><td>頂導航</td><td>topnav</td></tr>
<tr><td>工具條</td><td>toolbar</td></tr>
</table><br />
<h3>菜單類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>菜單</td><td>menu</td></tr>
<tr><td>子菜單</td><td>submenu</td></tr>
<tr><td>菜單內容</td><td>menu_content</td></tr>
<tr><td>菜單容器</td><td>menu_container</td></tr>
</table><br />
<h3>樣式類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>箭頭</td><td>arrow</td></tr>
<tr><td>橫幅廣告</td><td>banner</td></tr>
<tr><td>分界線</td><td>boundary</td></tr>
<tr><td>按鈕</td><td>btn</td></tr>
<tr><td>按鈕</td><td>button</td></tr>
<tr><td>轉角/圓角</td><td>corner</td></tr>
<tr><td>文字</td><td>font</td></tr>
<tr><td>標題</td><td>title</td></tr>
<tr><td>圖示</td><td>icon</td></tr>
<tr><td>項目</td><td>item</td></tr>
<tr><td>列表</td><td>list</td></tr>
<tr><td>主要的</td><td>master</td></tr>
<tr><td>頁面</td><td>page</td></tr>
<tr><td>標示</td><td>mark</td></tr>
<tr><td>分段</td><td>section</td></tr>
<tr><td>邊導航圖標</td><td>sidebar_icon</td></tr>
<tr><td>標籤頁</td><td>tab</td></tr>
<tr><td>樣式/主題</td><td>theme</td></tr>
<tr><td>閃爍</td><td>twinkle</td></tr>
<tr><td>小部件</td><td>widget</td></tr>
<tr><td>包裝器 </td><td>wrapper<br />
<em>頁面外圍控制整體佈局寬度</em></td></tr>
<tr><td>區域</td><td>zone</td></tr>
</table><br />
<h3>功能類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>檢舉</td><td>abuse</td></tr>
<tr><td>點擊這裡</td><td>click_here</td></tr>
<tr><td>收藏</td><td>coffin</td></tr>
<tr><td>塌陷</td><td>collapse</td></tr>
<tr><td>完成的,結束的</td><td>complete</td></tr>
<tr><td>改變,轉變</td><td>conversion</td></tr>
<tr><td>當前的</td><td>current</td></tr>
<tr><td>預設</td><td>default</td></tr>
<tr><td>下載</td><td>download</td></tr>
<tr><td>下拉</td><td>drop</td></tr>
<tr><td>編輯</td><td>edit</td></tr>
<tr><td>相等</td><td>equals</td></tr>
<tr><td>例外</td><td>exception</td></tr>
<tr><td>完成,結束</td><td>finalize</td></tr>
<tr><td>折疊</td><td>fold</td></tr>
<tr><td>雜湊</td><td>hash</td></tr>
<tr><td>局部的</td><td>localized</td></tr>
<tr><td>管理</td><td>manager</td></tr>
<tr><td>方法</td><td>method</td></tr>
<tr><td>即時通訊</td><td>messenger</td></tr>
<tr><td>提示信息</td><td>msg</td></tr>
<tr><td>註釋</td><td>note</td></tr>
<tr><td>通知,告知;報告</td><td>notify</td></tr>
<tr><td>語法分析</td><td>parse</td></tr>
<tr><td>語法分析器</td><td>parser</td></tr>
<tr><td>傳送</td><td>pass</td></tr>
<tr><td>位置</td><td>place</td></tr>
<tr><td>投票</td><td>poll</td></tr>
<tr><td>發表文章</td><td>post</td></tr>
<tr><td>預覽</td><td>preview</td></tr>
<tr><td>列印</td><td>print</td></tr>
<tr><td>發布</td><td>publish</td></tr>
<tr><td>查詢</td><td>query</td></tr>
<tr><td>收到,接到</td><td>receive</td></tr>
<tr><td>重填</td><td>reset</td></tr>
<tr><td>滾動</td><td>scroll</td></tr>
<tr><td>搜索</td><td>search</td></tr>
<tr><td>搜索框</td><td>search_box</td></tr>
<tr><td>進階搜尋</td><td>search_further</td></tr>
<tr><td>搜尋結果</td><td>search_results</td></tr>
<tr><td>統計</td><td>statistics</td></tr>
<tr><td>狀態</td><td>status</td></tr>
<tr><td>串流</td><td>stream</td></tr>
<tr><td>訂閱</td><td>subscribe</td></tr>
<tr><td>送出</td><td>submit</td></tr>
<tr><td>查詢訂閱</td><td>subscriptions</td></tr>
<tr><td>小技巧</td><td>tips</td></tr>
<tr><td>追蹤清單</td><td>track</td></tr>
<tr><td>指導</td><td>tutorial</td></tr>
<tr><td>上傳</td><td>upload</td></tr>
<tr><td>驗證碼</td><td>verification_code</td></tr>
<tr><td>觀看</td><td>view</td></tr>
<tr><td>投票</td><td>vote</td></tr>
</table><br />
<h3>內容類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>檔案/文件</td><td>archive</td></tr>
<tr><td>文章</td><td>article</td></tr>
<tr><td>所有文章</td><td>article_all</td></tr>
<tr><td>文章分類</td><td>article_folder</td></tr>
<tr><td>招呼語</td><td>blast</td></tr>
<tr><td>部落格</td><td>blog</td></tr>
<tr><td>部落格資料</td><td>blog_info</td></tr>
<tr><td>麵包屑</td><td>bread_crumb<br />
<em>頁面所處位置導航提示</em></td></tr>
<tr><td>行事曆</td><td>calendar</td></tr>
<tr><td>徵才</td><td>careers</td></tr>
<tr><td>社群家族</td><td>club</td></tr>
<tr><td>評論、評鑑</td><td>comment</td></tr>
<tr><td>社群家族</td><td>community</td></tr>
<tr><td>位置導航</td><td>crumb</td></tr>
<tr><td>娛樂</td><td>entertainment</td></tr>
<tr><td>電子報</td><td>epaper</td></tr>
<tr><td>活動</td><td>event</td></tr>
<tr><td>常見問題</td><td>faq</td></tr>
<tr><td>回覆意見</td><td>feedback</td></tr>
<tr><td>論壇</td><td>forum</td></tr>
<tr><td>友情鏈接</td><td>friend_link</td></tr>
<tr><td>強力搜尋</td><td>gd_search_tech</td></tr>
<tr><td>留言板</td><td>guestbook</td></tr>
<tr><td>指南</td><td>guide</td></tr>
<tr><td>公會</td><td>guild</td></tr>
<tr><td>熱門</td><td>hot</td></tr>
<tr><td>熱門連結</td><td>hot_link</td></tr>
<tr><td>學習</td><td>learning</td></tr>
<tr><td>介紹</td><td>introduce</td></tr>
<tr><td>徵才</td><td>job</td></tr>
<tr><td>知識</td><td>knowledge</td></tr>
<tr><td>新聞</td><td>news</td></tr>
<tr><td>記事本</td><td>notepad</td></tr>
<tr><td>即時訊息</td><td>online_news</td></tr>
<tr><td>作品</td><td>portfolio</td></tr>
<tr><td>活動比賽</td><td>promo</td></tr>
<tr><td>排行</td><td>rank</td></tr>
<tr><td>景點</td><td>scenic</td></tr>
<tr><td>服務</td><td>service</td></tr>
<tr><td>招呼語</td><td>set_blast</td></tr>
<tr><td>即時留言板</td><td>shoutbox</td></tr>
<tr><td>網頁導覽</td><td>sitemap</td></tr>
<tr><td>技術支援</td><td>support</td></tr>
<tr><td>旅遊</td><td>travels</td></tr>
<tr><td>視訊</td><td>video</td></tr>
</table><br />
<h3>網站類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>關於</td><td>about</td></tr>
<tr><td>關於我們</td><td>about_us</td></tr>
<tr><td>公司</td><td>company</td></tr>
<tr><td>公司簡介</td><td>company_profile</td></tr>
<tr><td>聯絡</td><td>contact</td></tr>
<tr><td>聯絡我們</td><td>contact_us</td></tr>
<tr><td>版權資訊</td><td>copyright</td></tr>
<tr><td>資訊</td><td>info</td></tr>
<tr><td>網站標誌</td><td>logo</td></tr>
<tr><td>商標</td><td>label</td></tr>
<tr><td>組織</td><td>organization</td></tr>
<tr><td>合作夥伴</td><td>partner</td></tr>
<tr><td>薪資福利</td><td>remuneration</td></tr>
<tr><td>摘要</td><td>summary</td></tr>
<tr><td>系統</td><td>system</td></tr>
<tr><td>網頁快訊</td><td>web_slices</td></tr>
</table><br />
<h3>購物類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>atm</td><td>atm</td></tr>
<tr><td>現折活動</td><td>allowance</td></tr>
<tr><td>配件</td><td>appendix</td></tr>
<tr><td>紅利折抵</td><td>bank_bonus</td></tr>
<tr><td>競標</td><td>bid</td></tr>
<tr><td>取消訂單</td><td>cancel</td></tr>
<tr><td>刷卡</td><td>card</td></tr>
<tr><td>換貨</td><td>change</td></tr>
<tr><td>推薦</td><td>commend</td></tr>
<tr><td>優惠卷</td><td>coupon</td></tr>
<tr><td>顧客</td><td>customer</td></tr>
<tr><td>顧客服務</td><td>customer_service</td></tr>
<tr><td>運送</td><td>deliver</td></tr>
<tr><td>折扣</td><td>discount</td></tr>
<tr><td>快速到貨</td><td>express</td></tr>
<tr><td>購物流程</td><td>flow</td></tr>
<tr><td>贈品</td><td>gift</td></tr>
<tr><td>集殺</td><td>group</td></tr>
<tr><td>詢價</td><td>inquire</td></tr>
<tr><td>服務中心</td><td>help</td></tr>
<tr><td>訂購單</td><td>order</td></tr>
<tr><td>訂單查詢</td><td>order_check</td></tr>
<tr><td>包裝</td><td>packing</td></tr>
<tr><td>付費</td><td>payment</td></tr>
<tr><td>集購</td><td>payshop_flow</td></tr>
<tr><td>價格</td><td>price</td></tr>
<tr><td>產品名稱</td><td>product_name</td></tr>
<tr><td>產品</td><td>products</td></tr>
<tr><td>嚴選保證</td><td>promise</td></tr>
<tr><td>估價</td><td>quotes</td></tr>
<tr><td>維修</td><td>repair</td></tr>
<tr><td>退貨</td><td>return</td></tr>
<tr><td>交易安全</td><td>safety</td></tr>
<tr><td>購物</td><td>shop</td></tr>
<tr><td>商店</td><td>store</td></tr>
<tr><td>超商取貨付款</td><td>store</td></tr>
<tr><td>補貨通知</td><td>supply_info</td></tr>
<tr><td>信用卡線上分期</td><td>time</td></tr>
<tr><td>統一編號</td><td>unified business no.</td></tr>
</table><br />
<h3>會員類</h3><table cellspacing="0" cellpadding="4" border="1"><tr><td>通訊錄</td><td>abook</td></tr>
<tr><td>帳務</td><td>account</td></tr>
<tr><td>地址</td><td>address</td></tr>
<tr><td>相簿</td><td>album</td></tr>
<tr><td>申請</td><td>apply</td></tr>
<tr><td>審核</td><td>approval</td></tr>
<tr><td>黑名單</td><td>black_list</td></tr>
<tr><td>信箱</td><td>email</td></tr>
<tr><td>忘記密碼</td><td>forgot_password</td></tr>
<tr><td>忘記帳號</td><td>forgot_username</td></tr>
<tr><td>服務條款</td><td>legal</td></tr>
<tr><td>登入</td><td>login</td></tr>
<tr><td>登出</td><td>logout</td></tr>
<tr><td>登入條</td><td>login_bar</td></tr>
<tr><td>邀請朋友</td><td>invite</td></tr>
<tr><td>加入</td><td>join_us</td></tr>
<tr><td>會員</td><td>member</td></tr>
<tr><td>會員登入</td><td>member_login</td></tr>
<tr><td>個人</td><td>personal</td></tr>
<tr><td>個人資訊</td><td>personal_information</td></tr>
<tr><td>照片</td><td>photo</td></tr>
<tr><td>隱私權政策</td><td>privacy</td></tr>
<tr><td>個人簡介</td><td>profile</td></tr>
<tr><td>個人相片</td><td>profile_photo</td></tr>
<tr><td>註冊</td><td>register</td></tr>
<tr><td>轉寄好友</td><td>send_friend</td></tr>
<tr><td>註冊</td><td>sign_up</td></tr>
<tr><td>登入</td><td>sign_in</td></tr>
<tr><td>登出</td><td>sign_out</td></tr>
</table><br />
<br />
參考來源:<br />
<a target="_blank" href="http://www.pccode.net/info/2010/11/08/20101108-5962.html">CSS 常用命名参考 - PHP新手博客(phpabc‘s blog)</a><br />
<a target="_blank" href="http://www.blog.e-creative.tw/archives/3">css常用命名</a><br />
<a target="_blank" href="http://www.yangqixin.com/article.asp?id=1422">div+css命名规则 (注重SEO的朋友注意了)</a><br />
<a target="_blank" href="http://jane-wu.blogspot.com/2007/05/css.html">Jane’s Blog: CSS 命名規則</a><br />
<!--
css-nomenclature.textile
CSS 命名表(nomenclature)
h3. 版面類
| 欄目| column|
| 容器| container|
| 內容| content|
| 頁尾| footer
| 頁首| header|
| 版型佈局| layout|
| 首頁| index|
| 頁面主體| main
| 側欄| sidebar|
h3. 導航類
| 主導航| main_nav|
| 全域導航| global_nav|
| 導航| nav|
| 領行列| navbar |
| 左導航| left_sidebar|
| 右導航| right_sidebar|
| 子導航| subnav|
| 頂導航| topnav|
| 工具條| toolbar|
h3. 菜單類
| 菜單| menu|
| 子菜單| submenu|
| 菜單內容| menu_content|
| 菜單容器| menu_container|
h3. 樣式類
| 箭頭| arrow|
| 橫幅廣告| banner
| 分界線| boundary|
| 按鈕| btn|
| 按鈕| button|
| 轉角/圓角| corner|
| 文字| font
| 標題| title|
| 圖示| icon|
| 項目| item|
| 列表| list|
| 主要的| master|
| 頁面| page|
| 標示| mark|
| 分段| section|
| 邊導航圖標| sidebar_icon|
| 標籤頁| tab|
| 樣式/主題| theme|
| 閃爍| twinkle|
| 小部件| widget|
| 包裝器 | wrapper
_頁面外圍控制整體佈局寬度_|
| 區域| zone|
h3. 功能類
| 檢舉| abuse|
| 點擊這裡| click_here|
| 收藏| coffin|
| 塌陷| collapse|
| 完成的,結束的| complete|
| 改變,轉變| conversion|
| 當前的| current|
| 預設| default|
| 下載| download|
| 下拉| drop|
| 編輯| edit|
| 相等| equals|
| 例外| exception|
| 完成,結束| finalize|
| 折疊| fold|
| 雜湊| hash|
| 局部的| localized|
| 管理| manager|
| 方法| method|
| 即時通訊| messenger|
| 提示信息| msg|
| 註釋| note|
| 通知,告知;報告| notify|
| 語法分析| parse|
| 語法分析器| parser|
| 傳送| pass|
| 位置| place|
| 投票| poll|
| 發表文章| post
| 預覽 preview|
| 列印| print|
| 發布| publish|
| 查詢| query|
| 收到,接到| receive|
| 重填| reset|
| 滾動| scroll|
| 搜索| search|
| 搜索框| search_box|
| 進階搜尋| search_further|
| 搜尋結果| search_results|
| 統計| statistics|
| 狀態| status|
| 串流| stream|
| 訂閱| subscribe
| 送出| submit|
| 查詢訂閱| subscriptions|
| 小技巧| tips|
| 追蹤清單| track|
| 指導| tutorial|
| 上傳| upload|
| 驗證碼| verification_code|
| 觀看| view|
| 投票| vote|
h3. 內容類
| 檔案/文件| archive|
| 文章| article|
| 所有文章| article_all|
| 文章分類| article_folder|
| 招呼語| blast|
| 部落格| blog|
| 部落格資料| blog_info|
| 麵包屑| bread_crumb
_頁面所處位置導航提示_|
| 行事曆| calendar|
| 徵才| careers|
| 社群家族| club|
| 評論、評鑑| comment|
| 社群家族| community|
| 位置導航| crumb|
| 娛樂| entertainment|
| 電子報| epaper|
| 活動| event|
| 常見問題| faq|
| 回覆意見| feedback|
| 論壇| forum|
| 友情鏈接| friend_link|
| 強力搜尋| gd_search_tech|
| 留言板| guestbook|
| 指南| guide|
| 公會| guild|
| 熱門| hot|
| 熱門連結| hot_link|
| 學習| learning|
| 介紹| introduce|
| 徵才| job|
| 知識| knowledge|
| 新聞| news|
| 記事本| notepad|
| 即時訊息| online_news|
| 作品| portfolio|
| 活動比賽| promo|
| 排行| rank|
| 景點| scenic|
| 服務| service|
| 招呼語| set_blast|
| 即時留言板| shoutbox|
| 網頁導覽| sitemap|
| 技術支援| support|
| 旅遊| travels|
| 視訊| video|
h3. 網站類
| 關於| about|
| 關於我們| about_us|
| 公司| company|
| 公司簡介| company_profile|
| 聯絡| contact|
| 聯絡我們| contact_us|
| 版權資訊| copyright|
| 資訊| info|
| 網站標誌| logo|
| 商標| label|
| 組織| organization|
| 合作夥伴| partner|
| 薪資福利| remuneration|
| 摘要| summary|
| 系統| system|
| 網頁快訊| web_slices|
h3. 購物類
| atm| atm|
| 現折活動| allowance|
| 配件| appendix|
| 紅利折抵| bank_bonus|
| 競標| bid|
| 取消訂單| cancel|
| 刷卡| card|
| 換貨| change|
| 推薦| commend|
| 優惠卷| coupon|
| 顧客| customer|
| 顧客服務| customer_service|
| 運送| deliver|
| 折扣| discount|
| 快速到貨| express|
| 購物流程| flow|
| 贈品| gift|
| 集殺| group|
| 詢價| inquire|
| 服務中心| help|
| 訂購單| order|
| 訂單查詢| order_check|
| 包裝| packing|
| 付費| payment|
| 集購| payshop_flow|
| 價格| price|
| 產品名稱| product_name|
| 產品| products|
| 嚴選保證| promise|
| 估價| quotes|
| 維修| repair|
| 退貨| return|
| 交易安全| safety|
| 購物| shop
| 商店| store|
| 超商取貨付款| store|
| 補貨通知| supply_info|
| 信用卡線上分期| time|
| 統一編號| unified business no.|
h3. 會員類
| 通訊錄| abook|
| 帳務| account|
| 地址| address|
| 相簿| album|
| 申請| apply|
| 審核| approval|
| 黑名單| black_list|
| 信箱| email
| 忘記密碼| forgot_password|
| 忘記帳號| forgot_username|
| 服務條款| legal|
| 登入| login|
| 登出| logout|
| 登入條| login_bar|
| 邀請朋友| invite|
| 加入| join_us|
| 會員| member|
| 會員登入| member_login|
| 個人| personal|
| 個人資訊| personal_information|
| 照片| photo|
| 隱私權政策| privacy|
| 個人簡介| profile|
| 個人相片| profile_photo|
| 註冊| register|
| 轉寄好友| send_friend|
| 註冊| sign_up|
| 登入| sign_in|
| 登出| sign_out|
-->Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-57858866629683277482010-09-12T02:12:00.003+08:002011-04-06T10:03:52.910+08:00用 PhotoShop JSX 製作 CSS Sprite 的使用方法自從上一篇 <a href="http://jax-work-archive.blogspot.com/2010/09/photoshop-css-sprite.html">利用 PhotoShop 製作 CSS Sprite</a> 發佈後我又改了 JSX 好幾次,現在終於修到讓我自己滿意了,順便來寫一下使用方法。<br /><br />由於我的 PhotoShop 是 CS2 的,太舊的版本可能會沒有 Script 的功能,在這裡先聲明一下。<br /><br />檔案連結:<a href="https://sites.google.com/site/weskerjax/code-demo/css_sprite_ps-script.jsx?attredirects=0&d=1">css_sprite_ps-script.jsx</a><br /><br /><br /><ol><li>先將所有需要組合的圖檔開啟<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWdnNMQm5D_p-ZU-ufUhGhe5eVAbZoBjaYdDHtC8x7rFP2rD3gPSSJCG1TOU6lVT5IoHO7eDJuulrWDh5ba4SKbWdFGXJXRxYK7ms0UQr9YIznoLlnjo8U2iPPwXpt6uXHL3bQudUE8D6/s1600-h/css_sprite_ps-script-01.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWdnNMQm5D_p-ZU-ufUhGhe5eVAbZoBjaYdDHtC8x7rFP2rD3gPSSJCG1TOU6lVT5IoHO7eDJuulrWDh5ba4SKbWdFGXJXRxYK7ms0UQr9YIznoLlnjo8U2iPPwXpt6uXHL3bQudUE8D6/s256/css_sprite_ps-script-01.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720207379368002" border="0" /></a><br /><br /></li><li>選擇『檔案 -> 指令碼 -> 瀏覽』<br /><a href="http://lh4.ggpht.com/_b8lN_UbLoEc/TIvGTbHr5II/AAAAAAAAHwE/eb7cyvcor6w/s1600-h/css_sprite_ps-script-02.jpg"><img src="http://lh4.ggpht.com/_b8lN_UbLoEc/TIvGTbHr5II/AAAAAAAAHwE/eb7cyvcor6w/s256/css_sprite_ps-script-02.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720205645112450" border="0" /></a><br /><br /></li><li>選擇下載後的 css_sprite_ps-script.jsx<br /><a href="http://lh6.ggpht.com/_b8lN_UbLoEc/TIvGS2sz-jI/AAAAAAAAHwA/Fqqh792RaWo/s1600-h/css_sprite_ps-script-03.jpg"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/TIvGS2sz-jI/AAAAAAAAHwA/Fqqh792RaWo/s256/css_sprite_ps-script-03.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720195868719666" border="0" /></a><br /><br /></li><li>接著馬上會要你選擇一個要參考的原始 CSS,這裡會解析你原本的樣式名稱跟檔案對應,當然不選也沒關係。<br />解析 CSS 是用正規表示式去解析的,可能要花一點時間,我餵了一個兩千行的 CSS file 都還可以正常執行,再多我就不敢保證了。<br /><a href="http://lh4.ggpht.com/_b8lN_UbLoEc/TIvGSdkrfFI/AAAAAAAAHv8/TIMq7nGo--Y/s1600-h/css_sprite_ps-script-04.jpg"><img src="http://lh4.ggpht.com/_b8lN_UbLoEc/TIvGSdkrfFI/AAAAAAAAHv8/TIMq7nGo--Y/s256/css_sprite_ps-script-04.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720189123722322" border="0" /></a><br /><br /></li><li>我原始的 CSS 看起來像是這樣,當然稍微複雜一點內容應該也沒問題。<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1T-oBveZ_MHA4WzzDBLiaDABVoDBRtxW7bNGWK56zsdF1z5FiQfDyRmy6n16-m03VyTN1t-LHko_-aEywdNEFmX7omNVhrbcZ_R8ERiGGldLennChIhkTGffwD6qv2BGtl4QQC168vtlG/s1600-h/css_sprite_ps-script-05.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1T-oBveZ_MHA4WzzDBLiaDABVoDBRtxW7bNGWK56zsdF1z5FiQfDyRmy6n16-m03VyTN1t-LHko_-aEywdNEFmX7omNVhrbcZ_R8ERiGGldLennChIhkTGffwD6qv2BGtl4QQC168vtlG/s256/css_sprite_ps-script-05.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720184178767730" border="0" /></a><br /><br /></li><li>在圖片處理完後,會要選擇一個輸出定位的 CSS file<br /><a href="http://lh3.ggpht.com/_b8lN_UbLoEc/TIvGRiOBAMI/AAAAAAAAHv0/6GzpHkY9Hmg/s1600-h/css_sprite_ps-script-06.jpg"><img src="http://lh3.ggpht.com/_b8lN_UbLoEc/TIvGRiOBAMI/AAAAAAAAHv0/6GzpHkY9Hmg/s256/css_sprite_ps-script-06.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720173190971586" border="0" /></a><br /><br /></li><li>輸出的內容看起來會像是這樣<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_c2cx2n-HQWwys3MWnrtYMKFLpq4QYF_gej4U076v_Iy4LXYp2Tu2DglTdDiBM5eAVdi1x7Z2zafKAGl9Hhfl7QM5SxyFtJvKfzS8XXpa9jzzCvrSllptXKdx5pnqfmETUBDTkh_Yc_EK/s1600-h/css_sprite_ps-script-07.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_c2cx2n-HQWwys3MWnrtYMKFLpq4QYF_gej4U076v_Iy4LXYp2Tu2DglTdDiBM5eAVdi1x7Z2zafKAGl9Hhfl7QM5SxyFtJvKfzS8XXpa9jzzCvrSllptXKdx5pnqfmETUBDTkh_Yc_EK/s256/css_sprite_ps-script-07.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720172326074066" border="0" /></a><br /><br /></li><li>最後再將製作完成的圖檔存成自己需要的格式就可以了<br /><a href="http://lh6.ggpht.com/_b8lN_UbLoEc/TIvGRGSu-QI/AAAAAAAAHvs/F_8EEU23WU0/s1600-h/css_sprite_ps-script-08.jpg"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/TIvGRGSu-QI/AAAAAAAAHvs/F_8EEU23WU0/s256/css_sprite_ps-script-08.jpg" alt="" id="BLOGGER_PHOTO_ID_5515720165694568706" border="0" /></a></li></ol>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-25043879769921739262010-09-01T23:50:00.013+08:002011-04-06T10:03:52.911+08:00利用 PhotoShop 製作 CSS Sprite原本想用 PhotoShop 的巨集來製作 CSS Sprite 的圖片,但沒想到巨集沒辦法很方便的匯入圖片到圖層上,最後找到一個可行的方法就是寫 PhotoShop 的 Script。<br /><br />我只有兩個需求:<ul><li>處理圖檔組合</li><li>紀錄每張圖的起始定位</li></ul><del>雖然已經寫完了,但是還是有一些小小的 Bug,對於透明底色的 png 會有定位上的偏差,我的解決辦法就是在四個角畫上 1px 透明為 1% 的白色,雖然美中不足但勉強夠用。</del> <br />這個小 Bug 已經解決了。<br /><br /><br />這個 Script 的執行方式很簡單<br />只要將需要合併的圖檔全部開啟<br />接著『檔案 -> 指令碼 -> 瀏覽』選擇下載後的 css_sprite_ps-script.jsx<br />執行後會建立一個新圖檔,並且要選擇輸出的 CSS 的檔案名稱 <br /><br /><pre class="js" name="code"><br />// css_sprite_ps-script.jsx<br />#target photoshop<br /><br />/** 建立參考線<br /> * @param {Int} pixelOffSet 偏移像素<br /> * @param {String} orientation ["Vrtc" => 垂直 ,"Hrzn" => 水平]<br /> */<br />function makeGuide(pixelOffSet, orientation) {<br /> var id8 = charIDToTypeID( "Mk " );<br /> var desc4 = new ActionDescriptor();<br /> var id9 = charIDToTypeID( "Nw " );<br /> var desc5 = new ActionDescriptor();<br /> var id10 = charIDToTypeID( "Pstn" );<br /> var id11 = charIDToTypeID( "#Rlt" );<br /> desc5.putUnitDouble( id10, id11, pixelOffSet ); // integer<br /> var id12 = charIDToTypeID( "Ornt" );<br /> var id13 = charIDToTypeID( "Ornt" );<br /> var id14 = charIDToTypeID( orientation ); // "Vrtc", "Hrzn"<br /> desc5.putEnumerated( id12, id13, id14 );<br /> var id15 = charIDToTypeID( "Gd " );<br /> desc4.putObject( id9, id15, desc5 );<br /> executeAction( id8, desc4, DialogModes.NO );<br />}<br /><br />function main(){<br /> //判斷是否有開啟圖檔<br /> if (app.documents.length = 0) {return;}<br /><br /> //設定前景色為白色<br /> app.foregroundColor.rgb.hexValue = 'FFFFFF';<br /><br /> var atDoc;<br /> var list = [];<br /> var length = app.documents.length;<br /><br /> //新增目標圖片文件<br /> var newPic = app.documents.add(<br /> 1, 1, 72,<br /> "css_sprite",<br /> NewDocumentMode.RGB,<br /> DocumentFill.TRANSPARENT<br /> );<br /><br /> var height=0;<br /> var width = newPic.width;<br /> //複製所有圖檔至新建立的圖檔<br /> for (var i=0; i<length; i++){<br /> atDoc=app.activeDocument=app.documents[i];<br /> <br /> //記錄圖層資訊<br /> var newLayer={<br /> name: atDoc.name, //檔名<br /> width: atDoc.width,<br /> height: atDoc.height,<br /> top: height<br /> };<br /><br /> //累計高度<br /> height += app.documents[i].height.value;<br /> //最大寬度<br /> if(width < atDoc.width){ width=atDoc.width;}<br /> <br /> //新增圖層<br /> var aLayer = atDoc.activeLayer=atDoc.artLayers.add();<br /><br /> //複製背景底圖<br /> try {<br /> atDoc.backgroundLayer.duplicate(aLayer,ElementPlacement.PLACEAFTER);<br /> atDoc.backgroundLayer.remove();<br /> } catch (e){}<br /><br /> //將新圖層與下一層互換<br /> aLayer.move(atDoc.layers[1],ElementPlacement.PLACEAFTER);<br /><br /> //標註四周的定位點<br /> var w=atDoc.width.value, h=atDoc.height.value;<br /> atDoc.selection.select([[0,0],[1,0],[1,1],[0,1],[0,0]]);<br /> atDoc.selection.fill(app.foregroundColor)<br /> atDoc.selection.select([[0,h-1],[0,h],[1,h],[1,h-1],[0,h-1]]);<br /> atDoc.selection.fill(app.foregroundColor)<br /> atDoc.selection.select([[w-1,0],[w-1,1],[w,1],[w,0],[w-1,0]]);<br /> atDoc.selection.fill(app.foregroundColor)<br /> atDoc.selection.select([[w-1,h-1],[w-1,h],[w,h],[w,h-1],[w-1,h-1]]);<br /> atDoc.selection.fill(app.foregroundColor)<br /><br /> //設定透明度<br /> aLayer.fillOpacity=1;<br /> //合併可見圖層<br /> atDoc.mergeVisibleLayers();<br /> //複製圖層<br /> atDoc.selection.selectAll()<br /> atDoc.selection.copy()<br /><br /> //貼上圖層<br /> atDoc=app.activeDocument=newPic;<br /> newLayer.obj = atDoc.paste();<br /> list.push(newLayer);<br /> };<br /><br /> //變更圖片大小<br /> atDoc=app.activeDocument=newPic;<br /> atDoc.resizeCanvas(width,height,AnchorPosition.TOPLEFT);<br /><br /> //變更圖層定位<br /> for (var i=length-1; i>=0; i--){<br /> //關閉複製過的檔案<br /> app.documents[i].close(SaveOptions.DONOTSAVECHANGES);<br /><br /> //移動圖層<br /> list[i].obj.translate(0,list[i].top);<br /><br /> //建立參考線<br /> if(i>0){ makeGuide(list[i].top,"Hrzn"); }<br /> };<br /><br /> // 輸出 CSS 定位檔<br /> var mySavefile = File.saveDialog("輸出 CSS 定位檔","*.css");<br /> if(!mySavefile){return};<br /> if(mySavefile.exists && !confirm("你確定要覆蓋這個檔案?")){<br /> return false;<br /> }<br /> // 開啟檔案<br /> var fileRef = new File(mySavefile);<br /> if (!fileRef.open("w","","")){<br /> alert("無法開啟檔案!!");<br /> fileRef.close();<br /> return false;<br /> }<br /><br /> // 輸出 CSS 定位設定<br /> for (var i=0; i<list.length; i++){<br /> fileRef.writeln(<br /> list[i].name+'{ background-position: 0 -'+list[i].top+'px; }'<br /> );<br /> };<br /> fileRef.close();<br />}<br /><br /><br />//把Photoshop推到最上層<br />app.bringToFront();<br />//設定使用的單位為「像素(Pixel)」<br />app.preferences.rulerUnits = Units.PIXELS;<br /><br />main();<br /></pre><br /><br />檔案下載:<a href="https://sites.google.com/site/weskerjax/code-demo/css_sprite_ps-script.jsx">css_sprite_ps-script.jsx</a><br /><br /><br />有對這個興趣的朋友可以<strong style="color: rgb(255, 0, 0);">參考 PhotoShop 安裝目錄下的 "JavaScript Reference Guide.pdf" 的開發文件</strong>,雖然裡面全部都是英文的但還不置於看不懂。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-74886206330122615362010-05-22T14:50:00.004+08:002013-06-11T22:04:43.686+08:00CSS3 圓角<pre class="css" name="code">*{
/* Gecko browsers */
-moz-border-radius: 20px; /*all*/
-moz-border-radius: 20px 0; /*TL&BR, TR&BL*/
-moz-border-radius: 20px 0 20px; /*TL, TR&BL, BR*/
-moz-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
-moz-border-radius: 20px/ 10px; /*(X)/ (Y)*/
-moz-border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 0;
/* Webkit browsers */
-webkit-border-radius: 20px; /*all*/
-webkit-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 0;
/* Konqueror (KDE) */
-khtml-border-radius: 20px; /*all*/
-khtml-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
-khtml-border-bottom-left-radius: 20px;
-khtml-border-bottom-right-radius: 20px;
/* ??? browsers */
-goog-ms-border-radius: 20px; /*all*/
-goog-ms-border-radius: 20px 0 20px 0;/*TL, TR, BR, BL*/
-goog-ms-border-top-left-radius: 20px;
-goog-ms-border-top-right-radius: 0;
-goog-ms-border-bottom-right-radius: 20px;
-goog-ms-border-bottom-left-radius: 0;
/* W3C syntax */
border-radius: 20px; /*all*/
border-radius: 20px 0; /*TL&BR, TR&BL*/
border-radius: 20px 0 20px; /*TL, TR&BL, BR*/
border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
border-radius: 20px/ 10px; /*(X)/ (Y)*/
border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 20px;
}
</pre><br />
<br />
參考來源:<br />
<a target="_blank" href="http://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Module Level 3</a><br />
<a target="_blank" href="http://blog.nixternal.com/2009.06.19/css-border-radius/">CSS Border Radius :: Richard A. Johnson</a><br />
<a target="_blank" href="http://www.wowbox.com.tw/blog/article.asp?id=3148">border-radius與圓角 - wowbox blog (網頁設計知識庫)</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-6137803850185191792010-05-22T13:40:00.005+08:002013-06-11T22:04:55.356+08:00CSS 偽類 與 偽元素<dl><dt>:link</dt>
<dd>未被訪問過的連結</dd><dd style="font-style:italic;">IE6, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:visited</dt>
<dd>已被訪問過的連結</dd><dd style="font-style:italic;">IE6, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:hover</dt>
<dd>滑鼠重疊時(mouse over)</dd><dd style="font-style:italic;">IE7, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:active</dt>
<dd>元素被按下時(mouse down)</dd><dd style="font-style:italic;">IE6, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:focus</dt>
<dd>元素被選擇時</dd><dd style="font-style:italic;">IE8, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:first-line</dt>
<dd>區塊內的第一行</dd><dd style="font-style:italic;">IE7, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:first-letter</dt>
<dd>區塊內的第一個字</dd><dd style="font-style:italic;">IE7, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:first-child</dt>
<dd>元素為第一個項目時</dd><dd style="font-style:italic;">IE7, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:last-child</dt>
<dd>元素為最後一個項目時</dd><dd style="font-style:italic;">IE9, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:lang</dt>
<dd>指定元素中使用的語言</dd><dd style="font-style:italic;">IE6, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:before</dt>
<dd>區塊內最前面加入一個虛擬元素</dd><dd style="font-style:italic;">IE8, FF3, Safari3, Chrome5, Opera
</dd>
<dt>:after</dt>
<dd>區塊內最後面加入一個虛擬元素</dd><dd style="font-style:italic;">IE8, FF3, Safari3, Chrome5, Opera
</dd></dl><br />
<br />
參考來源:<br />
<a target="_blank" href="http://kimblim.dk/css-tests/selectors/">CSS Selectors and Pseudo Selectors and browser support</a><br />
<a target="_blank" href="http://www.webdevout.net/browser-support-css">Web Browser CSS Support</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-34281086924185544802009-12-22T14:40:00.001+08:002009-12-22T14:44:00.712+08:00CSS 部屬經驗-圖文列表樣式<span style="font-weight: bold;">樣式</span><br /><a href="http://picasaweb.google.com/lh/photo/3ga2aq1k_XSqxJCI-LynHg?authkey=Gv1sRgCOe857mZ2Yy0yQE&feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikgjhJf03YrF8fTOR1jZNu85PWwTIJFAWNIN9-quUIFNhfYjZiD6BksJCKkVAAoLX8Td78Mr13Abg3qp6YVfSFKuFCO1OOSUa8riKW8MiiB6I3OrWY9ecUA4QyYDohwL5TCofYmi6-r2W/s512/img_2_h_list.png" /></a><br /><br /><br /><span style="font-weight: bold;">HTML 結構</span><br /><pre class="xml" name="code"><br /><ul class="Img2HList ClearIt"><br /> <li class="List Odd"><br /> <div class="Container"><br /> <strong class="Title"><br /> <a><span class="Image"><img src="圖片網址" /></span>標題文字</a><br /> </strong><br /> <br /> <!--其他相關資訊--><br /> <p class="Info">描述文字</p><br /> <div class="Meta">文字</div><br /> <blockquote>文字</blockquote><br /> </div><br /> </li><br /> <li class="List"><br /> <div class="Container"><br /> <strong class="Title"><br /> <a><span class="Image"><img src="圖片網址" /></span>標題文字</a><br /> </strong><br /> <br /> <!--其他相關資訊--><br /> <p class="Info">描述文字</p><br /> <div class="Meta">文字</div><br /> <blockquote>文字</blockquote><br /> </div><br /> </li><br /></ul><br /></pre><br /><br /><br /><span style="font-weight: bold;">CSS 設定</span><br /><pre class="css" name="code"><br />ul.Img2HList {<br /> margin: 1em 0;<br /> overflow: hidden;<br />}<br />ul.Img2HList li.List {<br /> position:relative;<br /> display: block;<br /> float: left;<br /> width: 49%;<br /> margin: 0 0 30px 0;<br /> font-size: 11px;<br />}<br />ul.Img2HList .Container {<br /> padding: 0 0 0 79px;<br />}<br />ul.Img2HList li.Odd {<br /> clear: left;<br />}<br />ul.Img2HList li.Odd .Container{<br /> margin-right: 30px;<br />}<br />ul.Img2HList strong.Title {<br /> display: block;<br /> font-size:1.1em;<br /> border-bottom: 1px solid #ccc;<br />}<br />ul.Img2HList strong.Title span.Image {<br /> float: left;<br /> margin: 0 0 0 -79px;<br /> cursor: pointer;<br />}<br /></pre><br /><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com1tag:blogger.com,1999:blog-5946530704742130970.post-69546174472796183242009-12-22T09:12:00.003+08:002013-06-11T22:11:28.518+08:00HTML 與 CSS 觀念上的區別<strong><a target="_blank" href="http://zh.wikipedia.org/zh-tw/HTML">HTML</a></strong>:在定義網頁的 <em>結構</em> 跟 <em>語意</em><br />
<ul><li><code>h1</code>:第一標題<br />
</li>
<li><code>h2</code>:第二標題<br />
</li>
<li><code>p</code>:段落<br />
</li>
<li><code>li</code>:清單條目<br />
</li>
<li><code>em</code>:強調<br />
</li>
<li><code>strong</code>:更強調<br />
</li>
<li><code>blockquote</code>:引言<br />
</li>
</ul><br />
<strong><a target="_blank" href="http://zh.wikipedia.org/zh-tw/CSS">CSS</a></strong>:在定義網頁的呈現 <em>樣式</em><br />
<ul><li><code>color</code>:文字顏色<br />
</li>
<li><code>text</code>:文字<br />
</li>
<li><code>font</code>:字體<br />
</li>
<li><code>margin</code>:邊界距離<br />
</li>
<li><code>padding</code>:內緣距離<br />
</li>
<li><code>background</code>:背景底色<br />
</li>
</ul>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-26495876763860440122009-07-24T05:05:00.007+08:002010-05-27T00:22:57.991+08:00CSS 部屬經驗-表格樣式<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="font-weight: bold;"><li><a href="#2649587676386044012_how">如何規劃一個表格樣式</a></li><li><a href="#2649587676386044012_html">HTML 結構</a></li><li><a href="#2649587676386044012_css">CSS 設定</a></li></ol><br /><span style="font-weight: bold;" id="2649587676386044012_how">如何規劃一個表格樣式</span><br />網路上其實已經有很多表格樣式可以參考了,但除了表格樣式外,欄位的屬性很重要。<br /><br /><p style="color: rgb(255, 0, 0);">利用 class 去作欄位定義,讓每一欄都有不一樣的<span style="font-weight:bold;">成員名稱</span>,就算有些欄位根本不需要定義樣式,但建議最好還是保留名稱的設定,也許有一天會去用到,這樣之後要作欄位調整時才不用大興土木,去為每個樣版裡改表格樣式。<br /><br />在 HTML 的規劃上最好用一個 <div></div> 包起來,再處理邊界上的設定時才不會因為瀏覽器的差異造成問題。<br /></p><br /><br />這裡我用到 hover 的方式去處理滑鼠滑過的效果,對於 IE6 的處理方式請看<a href="/2008/09/javascript-ie6-css-20-hover.html">利用 JavaScript 讓 IE6 支援 CSS 2.0 hover 的方法</a>。<br /><br />對於表格在之前有遇過一個奇怪的狀況,就是在設有 white-space:nowrap; 的欄位上寬度只能用 % 去定義,在 <a href="/2008/10/ie6-white-space.html">(IE6) white-space 在表格中怪問題</a> 有說明。<br /><br /><a href="http://picasaweb.google.com/lh/photo/KpfFn5PPYid5afop73z2_g?feat=embedwebsite"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/SmjKUN91kJI/AAAAAAAAGDs/xGKytsVKzvU/s512/table.jpg" /></a><br /><br /><br /><span style="font-weight: bold;" id="2649587676386044012_html">HTML 結構</span><br /><pre class="xml" name="code"><br /><div class="TableList"><br /> <table cellspacing="0" cellpadding="0"><br /> <tr><br /> <th class="Image">Picture</th><br /> <th class="Title">Title</th><br /> <th class="Date">Date</th><br /> </tr><br /><br /> <tr class="Odd"><br /> <td class="Image"><!--圖片--></td><br /> <td class="Title"><!--文字--></td><br /> <td class="Date"><!--日期--></td><br /> </tr><br /> <tr class="Even"><br /> <td class="Image"><!--圖片--></td><br /> <td class="Title"><!--文字--></td><br /> <td class="Date"><!--日期--></td><br /> </tr><br /> <tr class="Odd"><br /> <td class="Image"><!--圖片--></td><br /> <td class="Title"><!--文字--></td><br /> <td class="Date"><!--日期--></td><br /> </tr><br /> <tr class="Even"><br /> <td class="Image"><!--圖片--></td><br /> <td class="Title"><!--文字--></td><br /> <td class="Date"><!--日期--></td><br /> </tr><br /> </table><br /></div><br /></pre><br /><br /><br /><span style="font-weight: bold;" id="2649587676386044012_css">CSS 設定</span><br /><pre class="css" name="code"><br />/*=( 表格列表樣式 )=*/<br />.TableList {<br /> text-align:center;<br /> padding:1em;<br />}<br />.TableList table{<br /> border-collapse:collapse;<br /> font-size:0.9em;<br /> width:100%;<br /> text-align:center;<br />}<br /><br /><br />/*欄位間距*/<br />.TableList th, <br />.TableList td{<br /> padding:.5em;<br />}<br /><br /><br />/*標題列*/<br />.TableList th{<br /> border:1px solid #fff;<br /> white-space:nowrap;<br /> background:#328aa4 url(tr_bg1.gif) repeat-x;<br /> color:#fff;<br />}<br />.TableList th a{color:#fff;}<br /><br /><br />/*單列底線樣式*/<br />.TableList tr{<br /> border-bottom:1px solid #fff;<br /> _behavior: url(ie_hover.htc);/*IE6 hover*/<br />}<br />/*奇數列底色樣式*/<br />.TableList tr.Odd {background:#FFF;}<br />/*偶數列底色樣式*/<br />.TableList tr.Even {background:#eee;}<br /><br /><br />/*hover 樣式*/<br />.TableList tr.hover td,<br />.TableList tr:hover td{<br /> background:#e5f1f4;<br />}<br /><br /><br />/*=( 欄位設定 )=*/<br />/*圖片*/<br />.TableList th.Image,<br />.TableList td.Image{<br /> width:50px;<br />}<br />.TableList td.Image img{<br /> width:30px;<br /> height:30px;<br />}<br /><br />/*標題*/<br />.TableList td.Title{<br /> text-align:left;<br /> font-size:14px;<br />}<br /><br />/*日期*/<br />.TableList td.Date{<br /> width:3%;<br /> white-space:nowrap;<br />}<br /></pre><br /><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-84123273737443201872009-07-24T04:00:00.010+08:002009-07-24T05:02:58.967+08:00CSS 部屬經驗-表單樣式<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="color: rgb(255, 0, 0); font-weight: bold;"><li>為什麼要用<table>作表單排版</li><li>HTML 結構</li><li>CSS 設定</li></ol><br /><br /><span style="font-weight: bold;">為什麼要用<table>作表單排版</span><br />下面是利用 <table> 的排版方式,雖在排版上我非常不喜歡用 <table>,但在使用很多種排版方式及撰寫 JavaScript 的使用者介面輔助後,將 <table> 用在表單上可以有比較好的樣式結構,而且在 JavaScript 的輔助開發上對版面的操作也比較不會造成跑版問題。<br /><br />如果有過在表單上做過很複雜的 JavaScript 介面輔助後,你一定會瞭解我在說什麼。<br /><br /><a href="http://picasaweb.google.com/lh/photo/b6lrA1DRgQ54ymNu9-Rovw?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih96yL2Y7yx1cnbP5QvVVIwps6oBhPlLC_WvRkDV8y36Ujpm2F_ZQ88OvxKiIXjKvfJ9VBFS-ZCWUssAWdav1-H3D65G_mUQw200ZwsDwWEb3FUtIfuXaWi9564o-__MgCM_SaVBK5eayt/s512/form.jpg" /></a><br /><a href="http://www.wacanai.com/preg.php?type=sign">實際頁面 Wacanai.com</a><br /><br /><br /><span style="font-weight: bold;">HTML 結構</span><br /><pre class="xml" name="code"><br /><table class="FormList" border="0" cellspacing="0" cellpadding="0"><br /> <tr class="NotNull"><br /> <th><label for="name">欄位名稱</label></th><br /> <td><br /> <input class="Full" type="text" value="" id="name" name="name"/><br /> <small class="Explain">欄位說明</small><br /> <div class="Error">錯誤訊息</div><br /> </td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="email">欄位名稱</label></th><br /> <td><br /> <input class="Full" type="text" value="" id="name" name="name"/><br /> <span class="Error">錯誤訊息</span><br /> <small class="Explain">欄位說明</small><br /> </td><br /> </tr><br /></table><br /></pre><br /><span style="color: rgb(255, 0, 0);">在結構我設置了 JavaScript 會用到的訊息樣式,在下面的 CSS 設定中會先將這些訊息隱藏,之後在用 JavaScript 去處理顯示的動作,這樣的好處是 JavaScript 可以用很簡單的方法做到很複雜的介面輔助。</span> <br /><br /><br /><span style="font-weight: bold;">CSS 設定</span><br /><pre class="css" name="code"><br />/*讓表格寬度撐開*/<br />table.FormList{<br /> width:100%;<br />}<br /><br />/*基本的間距設定*/<br />table.FormList th,<br />table.FormList td{<br /> padding:6px 10px 6px 4px;<br />}<br />table.FormList th{<br /> width:25%;<br /> text-align: right;<br /> vertical-align:top;<br /> font-weight:normal;<br /> white-space:nowrap;<br />}<br /><br />/* 必填項樣式 */<br />table.FormList tr.NotNull th label{<br /> padding-left:20px;<br />}<br /><br />/* 欄位寬度設定 */<br />table.FormList .Full{<br /> width:95%;<br />}<br />table.FormList .Verify{<br /> width:40px;<br />}<br /><br />/*標示說明文的樣式*/<br />table.FormList small.Explain {<br /> display: block;<br /> font-size: 0.8em;<br /> margin: 0 0 5px 0;<br /> padding: 1px 3px;<br />}<br /><br /> <br />/*錯誤訊息的樣式*/<br />table.FormList div.Error ,<br />table.FormList span.Error {<br /> color: #f00;<br /> display: none;<br /> font-size: 1.2em;<br /> font-weight: bold;<br />}<br />/*警示訊息的樣式*/<br />table.FormList div.Warning ,<br />table.FormList span.Warning {<br /> color: #00f;<br /> display: none;<br /> font-size: 1.2em;<br /> font-weight: bold;<br />}<br /><br />/*套用在整列的錯誤樣式*/<br />table.FormList tr.Error label{<br /> color: #F00;<br />}<br />table.FormList tr.Error textarea,<br />table.FormList tr.Error select,<br />table.FormList tr.Error input{<br /> border: 1px solid #F00;<br />} <br /></pre><br /><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-74742700487484597602009-07-24T02:43:00.004+08:002010-05-27T00:23:32.527+08:00CSS 部屬經驗-按鈕樣式<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="color: rgb(255, 0, 0); font-weight: bold;"><li>用 <a></a> 元素來作按鈕<br /></li><li>利用原有樣式建立延伸樣式</li><li>套用在 <input> 的樣式<br /></li></ol><br /><span style="font-weight: bold;">用 <a></a> 元素來作按鈕</span><br />連結元素的優點救是 IE6 有支援 hover 偽類,所以使用連結元素用在按鈕上可以用簡單的 CSS 做出點選效果。<br /><br />當然在 CSS2 上面還有很多樣式上的選擇器,對於美工或使用者介面都有很方便的 CSS 設定,不用為了一點小東西去寫 JavaScript,總結就是 IE6 趕快消失吧!<br /><br /><br /><span style="font-weight: bold;">利用原有樣式建立延伸樣式</span><br /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSqpjHEK0515dZaGt0JtC8BHKVUrEWAgy-OVAkneA-MXxCG6lk04QfPfHQvt33eUS99cqiU04V-ZYr7bkw7TWzSl2eWxiQr0lhx4TTWo-BcJ1QztMvlBOqnQj93Hl-mIN-VeVm6fqi92V/s800/button.png" /><br /><br />在上面的三個按鈕樣式中可以發現只有底圖上的差異,所以在樣式上的規劃可以利用延伸複寫的方式去建立樣式。<br /><br />首先我先看看這三個按鈕的 HTML 結構:<br /><pre class="xml" name="code"><br /><a class="Button"><br /> <span>按鈕文字</span><br /></a><br /><br /><a class="Button AddButton"><br /> <span>按鈕文字</span><br /></a><br /><br /><a class="Button TagButton"><br /> <span>按鈕文字</span><br /></a><br /></pre><br />可以發現在 class 上的套用上是有層級的,藉由樣式複寫的方式去延伸原有的樣式。<br /><br /><br />現在我們來看看 CSS 的設定:<br /><pre class="css" name="code"><br />/* 按鈕樣式 */<br />a.Button {<br /> /*針對 Mozilla 系列瀏覽器的 inline-block*/<br /> display: -moz-inline-box;<br /> <br /> display: inline-block;<br /> color: #fff;<br /> text-decoration: none;<br /> text-align: right;<br /> vertical-align: middle;<br /> cursor: pointer;<br /> text-shadow: #163551 0 -1px 1px;<br /><br /> height: 23px;<br /> background: #163551 url(button_right.png) no-repeat right top;<br /> font-size: 11px;<br /> padding: 0 3px 0 0;<br />}<br />a.Button strong,<br />a.Button span{<br /> /*針對 Mozilla 系列瀏覽器的 inline-block*/<br /> display: -moz-inline-box;<br /> <br /> display: inline-block;<br /> vertical-align: top;<br /><br /> height: 19px;<br /> padding: 2px 5px 2px 8px;<br /> background: #16517d url(button_left.png) no-repeat left top;<br /> line-height: 19px;<br />}<br /><br /><br />/* 按鈕的 hover 效果設定,變換底圖定位及文字顏色 */<br />a.Button:hover,<br />a.Button:hover {<br /> background-position: right bottom;<br /> color: #fff;<br /> text-decoration: none;<br />}<br />a.Button:hover span,<br />a.Button:hover strong {<br /> background-position: left bottom;<br /> color: #fff;<br /> text-decoration: none;<br />}<br /><br /><br />/* 延伸的按鈕樣式 (AddButton)*/<br />a.AddButton span,<br />a.AddButton strong {<br /> padding-left:25px;<br /> color:#003366;<br /> background: #2a2a2a url(button_add_left.png) no-repeat left top;<br />}<br /></pre><br />基礎樣式所用到的圖片:<br /><br />botton_left.png<br /><img src="http://lh3.ggpht.com/_b8lN_UbLoEc/Smix-jyw1II/AAAAAAAAGCo/7xc8NfmNA_Q/s800/botton_left.png" /><br /><br />button_right.png<br /><img src="http://lh5.ggpht.com/_b8lN_UbLoEc/Smix-m0O_0I/AAAAAAAAGC0/PG2cue1LK94/s800/button_right.png" /><br /><br />接著是延伸樣式所用到的圖片:<br /><br />button_add_left.png<br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6bU_f6c_3uqkAhl58Nrc-9W-_qCUZ-gNwjsZ9KzBaOmTUELgMPN4TTB-Hr7d0wR9kwsw-J1ehUzQAc8GktmE7QoAUXp6wxBYB3HsMBVZT0lvQtTyBm2xDllydtItbVDKJZM3EsGrioCYj/s800/button_add_left.png" /><br /><br />如果還要延伸其他樣式只要改改顏色或圖示就可以了。<br /><span style="color: rgb(255, 0, 0);">上面的 CSS 有用到在</span> <a href="/2009/07/css.html">CSS 部屬經驗-樣式命名</a> 提到的<span style="font-weight: bold;color: rgb(255, 0, 0);">限制樣式對象</span><span style="color: rgb(255, 0, 0);">的使用方式,這樣的選擇器設定只能讓樣式套用在連結元素上,這樣的好處是讓樣式與元素有一個關連性。</span><br /><br /><span style="font-weight: bold;">套用在 <input/> 的樣式</span><br />已經為連結元素建立美美的按鈕了,總不能讓 <input/> 這樣醜醜的見人吧!<br />CSS 樣式:<br /><pre class="css" name="code"><br />input.Button {<br /> background: #9b9b9b url(button_bg.png) left top repeat-x;<br /> border: 1px solid #ccc;<br /> border-color: #999 #858585 #666 #858585;<br /> color: #fff;<br /> cursor: pointer;<br /> cursor:hand;<br /> font-size: 11px;<br /> font-weight: bold;<br /> line-height: 16px;<br /> padding: 0 4px;<br /> text-decoration: none;<br /> text-shadow: #9b9b9b 0 -1px 1px;<br /> vertical-align: middle;<br /> vertical-align: baseline;<br /> <br /> /*各瀏覽器的圓角設定,這裡捨棄對 IE6 的支援*/ <br /> border-radius: 2px;<br /> -moz-border-radius: 2px;<br /> -webkit-border-radius: 2px;<br /> -khtml-border-radius: 2px;<br />}<br /></pre><br />所用到的圖片:<br /><br />button_bg.png<br /><img src="http://lh5.ggpht.com/_b8lN_UbLoEc/Smix-iwmfAI/AAAAAAAAGCw/hdRC6azA0kk/s800/button_bg.png" /><br /><br /><span style="color: rgb(255, 0, 0);">這裡我也使用相同的 class 名稱,但在</span><span style="font-weight: bold;color: rgb(255, 0, 0);">限制樣式對象</span><span style="color: rgb(255, 0, 0);">的作用下這兩個樣式是不會互相衝突的。</span><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-17854215115074277672009-07-23T23:46:00.006+08:002010-05-27T00:24:00.959+08:00CSS 部屬經驗-容器樣式<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="color: rgb(255, 0, 0); font-weight: bold;"><li>容器樣式的概念</li><li>容器樣式定義</li><li>建構一個容器<br /></li></ol><br /><br /><span style="font-weight: bold;">容器樣式的概念</span><br /><br /><a href="http://picasaweb.google.com/lh/photo/FTOhX1eQ-yqj7gsJ45BAbw?feat=embedwebsite"><img src="http://lh5.ggpht.com/_b8lN_UbLoEc/SmdIKBiJF3I/AAAAAAAAGA0/vnIILo_MyxM/s512/area_1.jpg" /></a><br />我們會發現在上面這三個樣式裡外匡是一樣的,除了顏色上的差異,而這些外匡的 HTML 結構也是一樣的,我稱這樣的外匡為容器,主要只提供樣式的框架,不處理資料的呈現。<br /><br />將容器與樣式分離的好處是版面的呈現變靈活了,讓排版就像堆積木一樣,而樣式的重複利用性也會變高,樣式定義的複雜度也會降低。<br /><br /><a href="http://picasaweb.google.com/lh/photo/8MMi2goLENT0ak_tqgK3wA?feat=embedwebsite"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/SmdIKcB1SAI/AAAAAAAAGA4/5lllJY7EMrk/s512/area_2.jpg" /></a><br />上面這張圖就是容器的架構概念,在容器裡放入資料呈現的樣式,再將容器加入頁面排版裡。<br /><br /><br /><span style="font-weight: bold;">容器樣式定義</span><br />如果已經瞭解什麼是容器了,接著要開始為容器的定義作一些規範:<br /><ol style="color: rgb(51, 51, 255);"><li>不處理資料的呈現,例如資料的列表。</li><li>容器裡不可以在包含容器,過份的疊加套用會讓整體的架構變的很亂,所以讓容器間的關係保持平等是比較好的。</li><li>不要設定太多會繼承的樣式屬性,這樣會讓包在裡面的樣式要額外設定一些複寫的樣式屬性,例如字體顏色、對齊方式等。</li><li>不要為容器設定高度與寬度的屬性,高度應該要隨著內容而變動,寬度則應該適應版面的大小,這樣才不容易出現跑版的異常問題。<br /></li></ol><br /><br /><span style="font-weight: bold;">建構一個容器</span><br />針對上面的樣式來建構容器的 HTML,當然不一定照著一樣的方式建立,依照容器樣式的需求去建立就行了。<br /><br /><span style="color: rgb(255, 0, 0);">這裡會發現我之前在 </span><a href="/2009/07/css.html">CSS 部屬經驗-樣式命名</a><span style="color: rgb(255, 0, 0);"> 中提到的</span><span style="font-weight: bold; color: rgb(255, 0, 0);">樣式成員名稱</span><span style="color: rgb(255, 0, 0);">,這裡我還為每個樣式成員都加上了 "Area" 這個名稱前綴,以避免選擇意外套用到不該套用的元素上。</span><br /><pre class="xml" name="code"><br /><div class="AreaBox_1"><br /> <h3 class="AreaTitle">標題文字</h3><br /> <div class="AreaContent"><br /> <!-- <br /> 其他樣式元素... <br /> --><br /> </div><br /> <div class="AreaBottom"><br /> <div></div><br /> </div><br /></div><br /></pre><br /><br /><span style="color: rgb(255, 0, 0);">這裡可以看出 CSS 的選擇器的層級最多只有三層,如果樣式的層級太深以後要接手的人會很難進入狀況,層級太淺樣式又會很沒結構感,造成樣式很零散,兩層到三層之間的選擇器設定是比較好維護的。</span><br /><br />關於容器的樣式設定我並沒有設定的很完整,請自由發揮吧!<br /><pre class="css" name="code"><br />.AreaBox_1 {<br /> /*右上角的底圖*/<br /> background:transparent url(../images/xxxx.gif) no-repeat right top;<br /> /*上下的間距*/<br /> margin:5px auto;<br />}<br />.AreaBox_1 .AreaTitle{<br /> /*左上角的底圖*/<br /> background:transparent url(../images/xxxx.gif) no-repeat left top;<br /> /*標題設定*/<br /> color:#585E1A;<br /> font-size:16px;<br /> padding:10px 0 14px 35px;<br />}<br />.AreaBox_1 .AreaContent{<br /> /*中間的底圖*/<br /> background:transparent url(../images/xxxx.gif) repeat-y left center;<br /> padding:0 12px;<br />}<br />.AreaBox_1 .AreaBottom{<br /> /*右下角的底圖*/<br /> background:transparent url(../images/xxxx.gif) repeat-y right top;<br />}<br />.AreaBox_1 .AreaBottom div{<br /> /*左下角的底圖*/<br /> background:transparent url(../images/xxxx.gif) repeat-y left top;<br /> height:10px;<br />}<br /></pre><br /><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0