目前分類:CSS (20)

瀏覽方式: 標題列表 簡短摘要

現在新版的瀏覽器FF/Chrome/IE9都已經不會有嵌入iframe有白框邊的問題了

唯獨IE8/IE7還是會有

解決方法如下:

<iframe name="container" frameborder="0" allowtransparency="true" id="container" src="{$func_url}" width="100%"
height="auto" marginwidth="100%" marginheight="100%" border="0" scrolling="no" onload="Javascript:SetCwinHeight()">

, ,

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

/**
* html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
* Richard Clark (http://richclarkdesign.com)
* http://cssreset.com
*/

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

table {
   border: 1px solid #ccc;
   border-collapse: collapse;
}
tr, td {

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

三角形可以不用做圖就可以畫出來瞜

只要用一個div就可呈現出來  寫法如下: 

css三角形2   

 

預覽:

, , , ,

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

filter:alpa(opacity=80); /* Old IE */
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80,FinishOpacity=15, Style=3, StartX=0, FinishX=100, StartY=0,FinishY=16);  /*Supported by current IE*/
-moz-opacity:0.7;        /* Moz + FF */
opacity:0.7;                 /* 許多新版瀏覽器皆支援 */


cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

利用css裁剪圖片有兩種方法,如下:

【方法一】

可以利用overflow: hidden;屬性,把多出來的圖片隱藏起來

在最裡面那層img,利用margin去調整圖片要顯示出來的位置  

div.field-content {

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

由於各瀏覽器不同公司各自為政,沒有依照W3C的規定標準作,

所以才會有同一個語法,但在不同瀏覽器呈現的卻不同的問題

因此才會有reset.css這支成是去幫你做統一的動作!很方便唷!

 

下面是目前最多人使用的Eric Meyer v2.0版本

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

當你的圖片是用<img src=''>置入div時可以利用此方法

來裁切掉你的圖片

(ps 所以當你是用background的方式用css置入圖片的話

就可以利用css指令background-position與設定width操控你要顯示的位置瞜)

 

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

CSS Hank

來源:http://www.blog.e-creative.tw/archives/531

 

[if IE] IE判斷條件式寫法

來源:http://boohover.pixnet.net/blog/post/12309095-ie-%E6%A2%9D%E4%BB%B6%E5%BC%8F%E8%A8%BB%E8%A7%A3,conditional-comments-%5Bif-ie%5D

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

現在CSS3仍不支援IE8以下(包含IE8)

所以在設定圓角、陰影、漸層(Gradient Background)等,在IE都沒有效果

所以都要另外做圖片來滿足

 

使用CSS3-PIE 裡面的PIE.htc可以滿足你喲!步驟如下:

,

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

Solutions-3-Applications.jpg 

 

.ntw-n .article-title{/*標題樣式*/
    font-weight: 600;
    border-bottom:1px solid #CCCCCC;

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

外部連結

<link rel="stylesheet" type="text/css" href="../main.css" />  

<style>
    @import url("../main.css");
</style>

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

CSS分類字典: http://yudans.net/css/index.php?action=class

 

【字體font】

font-weight:bold; 粗體

letter-spacing:10px; 字元間格

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

接指定相同的參數
執行結果會因為 有加 !important 而變成優先執行

 

<style type="text/css">
p:first-letter{

, ,

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

<style type="text/css">
.mid{
    vertical-align:middle;
}

</style>

cabuchi 發表在 痞客邦 PIXNET 留言(1) 人氣()

.justify{ text-align:justify; text-justify: inter-ideograph;}

每當我想要對齊文字時我只要利用它一次就可以。

<div>
Content
<div>Sub Content</div>

cabuchi 發表在 痞客邦 PIXNET 留言(1) 人氣()

好久沒有用都忘光光了是怎麼回事....

我只是要把文字放在同一行 然後標題靠左 時間靠右

 

(只要選一邊設定)

我選時間(靠右)來設定:

cabuchi 發表在 痞客邦 PIXNET 留言(1) 人氣()

這年頭為什麼越出越多的瀏覽器-_-|||

拜託大家行行好 請愛用firefox好不好!!!!!

 

以下是修改CSS時

我們先以FF還有IE來做的不同的設定:

,

cabuchi 發表在 痞客邦 PIXNET 留言(1) 人氣()

#main{
margin: 0px auto; /* firefox */
*margin: 0px auto; /* ie7 */
_margin: 0px auto; /* ie6 */
width:860px;

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()

table{
   margin: 0 auto;
   border-width:thick;
   border-color:#fff;
}  

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()