2012-2014 度比度_(高興Happy): css

顯示具有 css 標籤的文章。顯示所有文章

2013年6月27日星期四

以往可以用加上 -webkit-text-size-adjust : none 解決，但新版 Chrome 已經將 -webkit-text-size-adjust 支援移除。所以必須改以 -webkit-transform : scale( ... ) 處理， scale 中的數字為要設定的字型大小除以 12px ，例如 9px 就是 9 / 12 = 0.75 。請注意 display : inline 無法 transform ，請視情況加上 display : inline-block ，且目前看來 transform 會破壞字的間距：

-webkit-transform : scale(0.75);

from http://blog.xuite.net/vexed/tech/59449347-Chrome+font-size+%E5%B0%8F%E6%96%BC+12px

2012年9月19日星期三

用margin:0 auto 置中要指定該寬度

margin:0 auto;
width:27px;

//用margin:0 auto 置中要指定該寬度而不是指定父層

2012年8月8日星期三

CSS 上下置中

2012年8月2日星期四

IE8 png 外框會黑色

2012年7月17日星期二

滑鼠偵測不到可能是z-index沒設好

HTML JQUERY CSS
若滑鼠偵測不到可能是z-index沒設好
z-index:100;//試看看

2012年6月23日星期六

圖跟字同一行讓字不要置底

img{vertical-align:middle;}

2012年5月30日星期三

jquery取子項目的方式

$(this).find("img");

CSS選取最後一個物件

CSS 最後一個通常不想margin怎麼辦又不想JQUERY，如果是CSS的話，可以唷!
<html>
<head>
<style type="text/css">
ul li:last-child
{
font-weight:bold
}
</style>
</head>
<body>
<ul>
<li>IE</li>
<li>Firefox</li>
<li>Safari</li>
</ul>
</body>
</html>

2012年5月23日星期三

字左邊線 border-left 要跟字差不多高

字左邊框線 border-left 要跟字差不多高
可以使用line-height去調整

筆記

2012年5月15日星期二

float排版造成高低落差請使用jquery.masonry

float排版造成高低落差，目前我這裡無解，
只能使用jquery.masonry拉
http://masonry.desandro.com/index.html

2012年4月30日星期一

less 加減法注意

@width - @sqWidth;
減號前後一定要空格!!!!

內容有float時外框適應高度

當內容有float時外框就不會自動感知高度了
此時請服用clearfix
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

在外框的class加上clearfix唷!

2012年4月11日星期三

讓Dreamweaver也能看懂LESS

不好意思，小弟從以前中毒阿杜比很久了，因此總是逃不脫dreamweaver這IDE，如果有人能跟我說哪一款CSS IDE好用的話在下感激不盡。

跟大家分享，假如你也跟我一樣，是想要用Dreamweaver但又想用less的話，我們一起來讓讓Dreamweaver也能看懂LESS吧

只有兩個步驟

step1
win7示範 CS5示範
C:\Users\你的名稱\AppData\Roaming\Adobe\Dreamweaver CS5\zh_TW\Configuration
例如我是
C:\Users\happy\AppData\Roaming\Adobe\Dreamweaver CS5\zh_TW\Configuration

找到Extensions.txt打開後
看到
CSS:Style Sheets改成CSS,LESS:Style Sheets

step2
找到你安裝Dreamweaver的路徑
範例我安裝在D:
D:\Program Files\Adobe\Adobe Dreamweaver CS5\configuration\DocumentTypes
這個文件MMDocumentTypes.xml打開
約142行
找到
documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css"
改成
documenttype id="CSS" internaltype="Text" winfileextension="css,less" macfileextension="css,less" file="Default.css" writebyteordermark="false" mimetype="text/css"

重新啟動Dreamweaver就可以打開.less檔案後編輯儲存拉

CS6多一步
C:\Users\happy\AppData\Roaming\Adobe\Dreamweaver CS6\zh_TW\Configuration\DocumentTypes

這個文件MMDocumentTypes.xml打開
約142行
找到
documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css"
改成
documenttype id="CSS" internaltype="Text" winfileextension="css,less" macfileextension="css,less" file="Default.css" writebyteordermark="false" mimetype="text/css"

原文請參考
http://helpx.adobe.com/dreamweaver/kb/change-add-recognized-file-extensions.html

2011年10月27日星期四

鎖圖拖曳以及右鍵

ONDRAGSTART="window.event.returnValue=false"//是鎖住滑鼠拖曳功能
ONCONTEXTMENU="window.event.returnValue=false"//是鎖住右鍵選單功能
onSelectStart="event.returnValue=false"//是鎖住滑鼠選取(反白)功能

//對付firefox拖曳取圖招式

$(".post-body p img").mousedown(function(e) {
e.preventDefault();
})
//方法將通知Web 瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）。例如，如果type 屬性是"submit"，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。注意，如果Event 對象的cancelable 屬性是fasle，那麼就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調用該方法都沒有作用。

2011年10月26日星期三

內層跟隨外層外移，外層用relative 內層用absolute

2011年10月13日星期四

取消物件滑鼠行為(蓋在上面的物件取消滑鼠偵測)

CSS設定
pointer-events:none;
IE很SUCK不行用
就跟AS3的
mouseEnabled=false;
mouseChildren=false;
的效果依樣

2011年10月11日星期二

上中下框中間放入內容要relative

<上>
<中>
這裡的第一個控制框使用 relative即可

<下>

z-index要設定position才有效

z-index要設定position:absolute或relative才有效
要記住阿

2011年8月4日星期四

圖片置換滑鼠移入

要有兩張圖片
STEP1 HTML
<a href="#"><div id="fbicon"><img src="img/fb.png" width="25" height="24" /></div></a>
STEP2 CSS
#fbicon {
float:right;
width:25px;
height:24px;
background-image: url(../../../img/fb_over.png);
}
STEP3 JQUERY
//圖片置換滑鼠移入
function picover(hit_area){
$(hit_area).hover(function() {
$(hit_area+' img').hide();
},
function(){
$(hit_area+' img').show();
})
}
picover('#fbicon ');//這裡就只要用到的地方就加一行

2011年8月3日星期三

li子層寬度比父層寬時不要設定overflow: hidden;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<style>
* {
    margin:0px;
    padding:0px;
    list-style-position:none;
    list-style-type:none;
    float:none;
}
#content {
    width:500px;
}
#content ul{
    width:500px;
}
.level1{
    width:80px;
    float:left;
    list-style-type: none;
}
.bg{
    width:50px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.level1 {
    background-color: #FC0;
}
.level2 li {
    width:150px;
    background-color: #000;
    color:#fff;
}
</style>
</head>
<body>
<div id="content">
<ul class="menu">
        <li class="level1"><div class="bg"><a href="">work</a></div>
            <ul class="level2">
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
        </li>
         <li class="level1"><div class="bg"><a href="">news</a></div>
            <ul class="level2">
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script language="javascript">
$(document).ready(function(){
$('.level1').hover(function() {
    //$('#work ul').slideDown('slow');
    $(this).children('.level2').show();
},
function(){
//$('#work ul').slideUp('slow');
    $(this).children('.level2').hide();
}
)
/*
); */
})
</script>
</html>

///overflow: hidden; 取消這個即可

訂閱：文章 (Atom)

追蹤者	關於我自己高興檢視我的完整簡介

2013年6月27日 星期四

2012年9月19日 星期三

2012年8月8日 星期三

2012年8月2日 星期四

2012年7月17日 星期二

2012年6月23日 星期六

2012年5月30日 星期三

2012年5月23日 星期三

2012年5月15日 星期二

2012年4月30日 星期一

2012年4月11日 星期三

2011年10月27日 星期四

2011年10月26日 星期三

2011年10月13日 星期四

2011年10月11日 星期二

2011年8月4日 星期四

2011年8月3日 星期三