CSS

　　如今，CSS不再只是用來邊邊角角的修飾頁面內容，網頁設計師們通過合理的運用，可以把CSS的潛能發揮得淋漓盡致，一個很普通的頁面在CSS的作用下能夠脫胎換骨，呈現出讓人驚訝的效果。今天這篇文章就收集了30個讓人印象深刻的CSS網站布局作品，一起欣賞。PigspotterRangusNiksoneFrontend2011Sawyer HollensheadWebfoo-LondonPeHaa’s PatternsStudio FoundryAlaWeb-ExpertThe

通常的web頁面中，我們要求列印結果和顯示結果一樣，但在一些報表或業務系統中，我們可能只需要列印頁面中的一部分內容，例如我只要列印資料，但按鈕和背景不需要列印，這是由業務需求決定的，我們可以想象一下，如果一張列印出來的發票中出現一個按鈕，你會怎麼想，估計要昏過去的，呵呵~~好了，說完需求，我來說說如何?，一種方法是為螢幕顯示和列印分別準備一個css檔案，如下所示：用於螢幕顯示的css：<link rel="stylesheet" href="css/mainstylesheet.css" 

收集在不同瀏覽器（主要是IE6、IE7和Firefox）下，CSS Hacks。歡迎大家踴躍發言，多提寶貴意見。區別IE6與FF：       background:orange;*background:blue;區別IE6與IE7：       background:green !important;background:blue;區別IE7與FF：       background:orange; *background:green;區別FF，IE7，IE6：     

以下是由http://www.cnblogs.com/suiqirui整理CSS網頁布局入門教程1：一列固定寬度CSS網頁布局入門教程2：一列自適應寬度CSS網頁布局入門教程3：一列固定寬度置中CSS網頁布局入門教程4：二列固定寬度CSS網頁布局入門教程5：二列寬度自適應CSS網頁布局入門教程6：左列固定，右列寬度自適應CSS網頁布局入門教程7：二列固定寬度置中CSS網頁布局入門教程8：三列浮動中間列寬度自適應CSS網頁布局入門教程9：用CSS設計網站導航——橫嚮導航CSS網頁布局入門教程10：

雖然對Web應用已經有3年的開發經曆，但是我還是CSS處於一知半解的狀態。主要是因為對xhtml恐懼，除了剛工作那陣子逼不得已，在後來的項目中我都選擇編寫資料、通訊或架構的代碼，最接近UI的僅限到編寫WebControl，UI的開發我會交給信任的並且擅長Web-End的partner去做。從2010開始我定位轉向互連網開發的工作，看現在每一個網站都在注重UI體驗，相關的RIA技術也是火爆異常，部落格園的首頁經常會有Ajax/JQuery/Silverlight的內容，沒辦法，我只有補課了，於是最

上篇部落格說的是將div設定為置中顯示，今天來分享一下如何將表格置中的顯示。至於置中的原理就不說了，可以看一下我的上篇部落格，這次沒有使用window的兩個事件，而是使用一個叫expression的函數。現在多數的瀏覽器都支援這個函數。在寫上一篇部落格的時候，我腦裡想能不能把計算後的值賦給css的left和top屬性呢？後來查閱資料找到了這個函數。這個函數用來把CSS屬性和JavaScript運算式關聯起來，這裡的CSS屬性可以是元素固有的屬性，也可以是自訂的屬性。就是說CSS屬性後面可以是一段

使用jQuery擷取樣式中的background-color的值時發現在擷取到的顏色值在IE10以下版本中是以HEX格式顯示【#ffff00】，而IE10,、Chrome、Firefox中則是以GRB格式顯示【rgb(255,0,0)】，由於需要對顏色值進行判斷處理，所以需要得到統一的顏色格式，最好是HEX格式的，方便處理點。搜尋了一下，從國外的一個網站上得到一段代碼：複製代碼 代碼如下:$.fn.getHexBackgroundColor = function() { var rgb =

用JavaScript修改CSS屬性 只有寫原生的javascript了。 1.用JS修改標籤的 class 屬性值： class 屬性是在標籤上引用樣式表的方法之一，它的值是一個樣式表的選擇符，如果改變了 class 屬性的值，標籤所引用的樣式表也就更換了，所以這屬於第一種修改方法。 更改一個標籤的 class 屬性的代碼是： document.getElementById( id ).className = 字串; document.getElementById( id )

css中能個添加背景圖片background:url(“”);但是這裡只能指定no-repeat或者repeat-x,repeat-y這些平鋪的方式. 如果我們想要圖片是展開的,我們該怎麼辦呢?方法有兩個:style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')";但是這個濾鏡只對IE有效.

在開發網頁展現層的css時，有時會發現樣式沒有被應用的情況，這是需要藉助Firefox下的Firebug外掛程式來協助問題解決。通常有三種情況會表現出定義的樣式沒有被應用。1. 樣式檔案沒有被載入成功（低級錯誤，但在複雜的環境下，時有發生）2. css檔案並沒有被引用（低級錯誤，但在負責的情況下，是有發送）3.

“網頁重構”的春風吹遍大江南北，互連網一時間風聲鶴唳，“DIV+CSS”儼然已成為一種製作網頁的“時尚”，難以盡數的網站都不約而同地開始了自己的“網頁重構”。　下面將談一談順應標準的思維方式，其中有不少是我曾經走過的彎路，希望對剛剛接觸WEB標準的兄弟姐妹們有些協助：　　1、“節省代碼”是營銷手段，不是宗旨　　“使用div布局可以比table布局節省更多的代碼”，我在很多書籍和網站上見到過這句話。這句話本身是沒錯的，可以“節省代碼”的確是網頁標準化所帶來的好處之一。然而切記，它只是“好處之一”，

Tab能算的上是網頁裡最為常見的組件，不論是作為內容切換，還是直接作為導航，形形色色的Tab扮演著各種互動角色。既然是重要的互動角色，那麼無論其顏色還是形狀都關乎整個互動過程——圓角是有意義的，在視覺上把Tab和其他分隔元素區別開來是必要的，就如同圓角按鈕一樣——可能很多時候圓角按鈕都與整個設計風格格格不入，但卻是必須的，因為互動元素的凸顯比整個設計渾然一體更為重要。在IE67日漸邊緣的如今，2012可能是前端重心轉移最為明顯的一年。於此也就不去考慮過時瀏覽器的相容性了，對於它們，能看看內容就已

1．很普通的一個導航條，不同之處是只採用了一張背景圖片，如左圖。2．初始狀態：背景為上半部分，翻轉為下半部分，預覽最終效果>>，代碼如下。#nav{width: 400px;text-align: center;font-size: 11px;font-family: Arial, Helvetica, sans-serif;}#nav ul{margin: 0px;padding: 0px;list-style-type: none;}#nav li{float:

完全用DIV+CSS做的菜單，相比傳統用圖片做的開啟速度更快。預覽最終效果>>#nav{height: 44px;width: 425px;background: #FFFFFF;}.vline{background: #999999;width: 1px;height: 20px;}#nav ul{margin: 0px;padding: 0px;list-style-type: none;}#nav li{float: left;font-family:

預覽最終效果>>form{margin: 0px;padding: 4px;}#member{width: 170px;background: #F1F1F1;text-align: center;}label{width: 40px;float: left;text-align: right;padding: 3px 0px 1px;color: #666666;}input{border: 1px solid #CCCCCC;margin: 1px;padding:

日前在http://www.dynamicdrive.com 看到一例Image Thumbnail Viewer的指令碼，效果還不錯，支援FF1+ IE5+ Opr7+，能通過W3C的檢驗，在IE5.5+中有圖片談出擦除過場效果。重寫了DIV+CSS部分。預覽最終效果。CSS:#main{background: #F1F1F1;width: 400px;margin: 0 auto;padding: 10px;}#dynloadarea{width: 400px;height: 300px;}

　　這不是一個新東西，但它確實是個好東西。只能說我OUT了，這小外掛程式還是在別人部落格上一年前的日誌裡看到的，先來個連結吧，寫的已經很詳細了，我這裡只是給自己做個記錄，留給自己看的。（Zen Coding: 一種快速編寫HTML/CSS代碼的方法）　　那Zen Coding到底是什麼，又是如何使用的呢？我們看一下官方舉的例子吧，如果你輸入：div#page>div.logo+ul#navigation>li*5>a　　就會看到這樣的輸出：<div

Div+CSS布局入門教程 (1.頁面配置與規劃) 第 1 頁 頁面配置與規劃所有的設計第一步就是構思，構思好了，一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟體將需要製作的介面布局簡單的構畫出來，以下是我構思好的介面布局圖。下面，我們需要根據構思圖來規劃一下頁面的布局，仔細分析一下該圖，我們不難發現，圖片大致分為以下幾個部分：　　1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；　　2、內容部分又可分為側邊欄、主體內容；　　3、底部，

<style>ul { margin: 0px; padding: 0px;}ul li { float: left; display: inline; font: 0.9em Arial, Helvetica, sans-serif; height: 30px; width: 100px; list-style: none;}ul li a { color: #FFF; text-decoration: none;

 大家都知道連續的英文或數字能是容器被撐大，不能根據容器的大小自動換行，下面是 CSS如何將他們換行的方法！ 對於div 1.（IE瀏覽器）white-space:normal; word-break:break-all;這裡前者是遵循標準。#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}<div id="wrap">ddd11111111111111111111111