CSS

最近翻閱網上資料，查到了一些自己從未用過的CSS，於是記錄下來，在有些時候興許能用得上。1、CSS中簡單的運算我們通常用css指定的是靜態結果，而動態結果，如高度，位置等等則需要js來動態進行計算賦值，而其實css自己也能夠進行簡單的運算，主要是用到了calc這個函數。.div{ width: calc(100% - 50px); }2、使用CSS實現文字模糊效果在PS中我們可以使用濾鏡讓面前的文字看起來很模糊，這和透明度還不一樣，在css中我們也可以實現。p{ color:

層疊優先順序是:瀏覽器預設 < 外部樣式表 < 內部樣式表 < 內聯樣式 其中樣式表又有:類別選取器 < 類派生選取器 < ID選取器 < ID派生選取器 派生選取器以前叫上下文選取器，所以完整的層疊優先順序是:瀏覽器預設 < 外部樣式表 < 外部樣式表類別選取器 < 外部樣式表類派生選取器 < 外部樣式表ID選取器 < 外部樣式表ID派生選取器 < 內部樣式表 < 內部樣式表類別選取器 <

認識Photoshop(PS)CSS切圖必用工具Adobe PHOTOSHOP平時我們又被稱為PS。 div

滑鼠滑過元素，使得元素的樣式發生改變我們定義一個按鈕標籤代碼如下: <button class="px-button">BUTTON</button> 我們首先設定按鈕的背景顏色為灰色： 代碼如下: .px-button{background-color: grey;} 我們要使得滑鼠滑過按鈕的時候，讓其變為藍色，我們只需要增加hover選取器： 代碼如下:

今天分享一個用純CSS實現的3D按鈕。css巧妙利用了box-shadow來實現3D物體的立體感，當按鈕按下的時候再去修改box-shadow和top值。讓人感覺有一種按鈕被按下的感覺。css代碼非常少，如下所示： a.css-3d-btn{  position:relative;  color: rgba(255,255,255,1);

1 2 3 4 5 .opacity{  filter:alpha(opacity=50);       /* IE

可能大家看過關於 Retina 螢幕的一像素邊框問題，注意這裡是邊框寬度而不是移動元素。什嗎？border 小於 1px ？對，因為前面有人給出相關方案而且好多種方案，這裡不重複描述實現原理，給大家兩個連結，感興趣的自己跳轉。Retina 屏的行動裝置如何?真正 1px 的線？移動 web 點 5 像素的秘密看完大徹大悟，佩服佩服，思路很多，回到本文重點想一下能實現移動的方法 position(top,right,bottom,left), margin, padding,

大家可能會經常用到hover這屬性，用hover實現滑鼠經過的顏色改變等等之類，其實hover非常強大。分享一個滑鼠經過，彈出下拉式功能表的小技巧；當我們建好一個列表：<ul><li class=”home”><a href=”javascript:;” target=”_blank”

JavaScript有一個preventDefault方法, 他可用以來取消事件的預設動作。比如取消開啟連結，選擇文本或拖放等。event.preventDefault()該方法將通知 網頁瀏覽器不要執行與事件關聯的預設動作（如果存在這樣的動作）。例如，如果 type 屬性是 “submit”，在事件傳播的任意階段可以調用任意的事件控制代碼，通過調用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是

對於用 css 實現一個輪播圖的緣由，是那時候剛開始接觸前端，完全還不懂 js。但是有一個項目(就是一個用來應付面試的作品)需要做一個輪播的效果，當時第一反應就是用 css3 自訂動畫 -webkit-animation。做出來的效果自己覺得還可以，唯一的不足就是滑鼠點擊切換 banner 圖和指定到某個圖。如果項目中不需要切換變換圖片的需求，用 css3 做，何嘗不是一種辦法。不多說，先上代碼： html 代碼如下：<div class="test">

我們大多數的小箭頭都是用小圖片來做的，這裡分享一款用純CSS寫的小箭頭，大家可以看看，以後會放出更多的CSS小箭頭來供大家參考。<div class="pre-wrap">    <div class="pre">        <div class="pre1"></div> &

css中能把cursor變成抓手樣的形狀，注意不是超連結的那種手，是抓手css:{cursor:url('絕對路徑的圖片(格式：cur,ico)'),-moz-zoom-out;}//FF下面css:{cursor:url('絕對路徑'),auto;}//IE,FF,chrome瀏覽器都可以例子  代碼如下複製代碼 .style1{ cursor: url('http://你地網站/手抓.jpg'); } 補充:問題一 瀏覽器不相容問題： 

首先當然是一個任意的空標籤來當小三角，下邊的 CSS 丟進去即可：  代碼如下複製代碼

做開發幾年了，在前端開發中，竟然沒有留意position:fixed的用法。我們都知道CSS中定位屬性position的值，除了預設的值外，還有absolute,relative和fixed。我平時比較常用absolute和relative，而position:fixed卻沒多關注。或許是因為當初在CSS中文手冊中看到position:fixed旁邊有說明“IE5.5及NS6尚不支援此屬性”吧。昨天，在做一個項目時需要使一個層相對於瀏覽器邊框固定，那時用position:

定義連結樣式的四個偽類    1 :link             2 :visited             3 :hover             4

字型font:font-style | font-variant | font-weight | font-size | line-height | font-family ;Margin & Paddingmagin: magin-top | margin-right | margin-bottom | margin-left;P {magin:20px;}P {magin:20px 10px;}P {magin:20px 10px 100px;}

 代碼如下複製代碼 $(document).ready(function() {   $ (".about_main li").hover(function(){       $(this).addClass('hover');  },function(){      $(this).removeClass('hover'

css()方法在使用上具有多樣性，我們先來瞭解css()方法基本知識。css() 方法設定或返回被選元素的一個或多個樣式屬性。返回 CSS 屬性如需返回指定的 CSS 屬性的值，請使用如下文法：css("propertyname");下面的例子將返回首個匹配元素的 background-color 值：執行個體$("p").css("background-color");設定 CSS 屬性如需設定指定的 CSS

CSS操作有一個重要的方法：CSS（）CSS()有三個不同的文法，來完成各自的工作：■$(selector).css(name,value)■$(selector).css({properties})■$(selector).css(name)返回CSS屬性使用CSS（name）返回指定的第一個匹配元素的CSS屬性值：樣本  代碼如下複製代碼 $(this).css("background-color"); 試一試 » 設定 CSS

jquery的css格式為("屬性","參數")如果要擷取width的百分比輸入以下代碼就可以了math.round(($("#js_top_ment").width()/$(document).width())*100)方法二var cssrules=document.stylesheets[0].cssrules||document.stylesheets[0].rules;