1、Vim開啟Nginx設定檔vim /usr/local/nginx/conf/nginx.conf2、找到如下一段,進行修改gzip on;gzip_min_length 1k;gzip_buffers 4 16k;#gzip_http_version 1.0;gzip_comp_level 2;gzip_types text/plain application/x-javascript te
CSS布局與傳統表格(table)布局最大的區別在於:原來的定位都是採用表格,通過表格的間距或者用無色透明的GIF圖片來控制文布局版塊的間距;而現在則採用層(div)來定位,通過層的margin,padding,border等屬性來控製版塊的間距。1.定義DIV分析一個典型的定義div例子:#sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20px; BORDER-RIGHT: #CCC 2px
在講挑選者的特性之前,要提一下的是CSS繼承的特性。所謂的繼承的特性是指被包在內部的標籤將擁有外部標籤的樣式性質。繼承的特性最典型的應用通常發揮在預設整份網頁的樣式,而要指定為其它樣式的部份再依要設定在個別元素裡即可。這項特性可以提供網頁設計者更理想的發揮空間。 接下來就要講挑選者特性的應用!其實這部份應該算是聲明的一種方式,但是在您看過第二章的基本的聲明與應用後,到這邊再講挑選者您會比較有概念點。在CSS應用或設計的時候,有幾種依據元素的關係或性質來設定顯示特定性質的方法,就是挑選者特性
這章節將開始為您介紹CSS的應用。當然一開始要介紹的是如何去建立個樣式表 (Style Sheets),包括了聲明的方式和應用在網頁上的方法,最後還會為您概述一下CSS的一些特性。概略來說,CSS的聲明有三種方式:一、基本聲明:最典型的CSS聲明方式。element {property: value} 用中文來表示的話,也就是元件(標籤) {性質(屬性)名稱: 設定值}例如: H3 {COLOR: BLUE} 即為一組聲明。二、集體聲明:同時聲明某個或數個元件(標籤)(各元件(標
一個熱門技術,CSS的發展的確有些緩慢。CSS最早被提議在1994年,最早被瀏覽器支援在1996年,CSS一直被力捧為傳統的以HTML為基礎的web代碼的繼承者。CSS使用樣式表來控制整個網站字型和布局的能力,使它看起來非常有效率、易於設計和有遠見。然而,也一直有荒誕的說法圍繞著CSS,阻礙了網頁設計師學習和掌握這種語言。一定要學CSS嗎?有什麼理由? 下面是我的十大理由,不分排名先後:
請看下面的案例。這組代碼可能並不具有觀賞性,但是它改變了傳統捲軸的樣式。你可以通過改變其中的代碼來建立你所喜歡的捲軸樣式。事實上,這些代碼都極具自我描述性。不管怎樣,還是讓我們好好看看吧! 代碼如下複製代碼 <STYLE TYPE="text/css"> BODY { scrollbar-face-color: green; scrollbar-shadow-color: blue; scrollbar-highlight-color:
我們在網頁設計中,會遇到許多意想不到的情況,不規則文字的排版就是其中之一了,我們該如何面對這樣的排版要求呢?CSS代碼又該如何編寫呢? 遇到這樣的情況,通常情況下我們有兩種選擇: 1、用圖片來製作,並應用熱區製作連結,這樣的方式可以很方便的解決問題,但對搜尋引擎很不友好,它不知道你這裡到底有什麼。 2、用Flash來完成,還可以加上動感的特效,除了同樣對搜尋引擎不友好之外,還存在著使用者是不是安裝有flash播放外掛程式的風險,以及瀏覽器對flash檔案的屏蔽的問題。 這兩種方法都不
我們瀏覽網頁的時候,經常會遇到一些互動的效果。例如容器在滑鼠移上去的時候,會發生一些變化。這些效果,可以用多種方法來實現。現在我們要解決的是如何在CSS中寫指令碼實現互動效果。 CSS代碼如下: 代碼如下複製代碼 .show {width:600px;height:58px;margin:50px auto 0 auto;line-height:58px;border:1px solid
文字屬性 標識符 作用 屬性值 font-family: 定義文字類型,順序尋找,先找到的為選定值,若都找不到則用預設值 宋體,黑體等 font-style: 定義字型風格。 normal(標準)italic(斜體)oblique(傾斜) font-variant: 改變英文字母的顯示 normal,small-caps(小型大寫字母) font-weight: 使字型加粗 normal(相當於400),bold,lighter,bolder或100~900的九個數
原創教程,轉載請註明出處:網頁教學網 我們現在設計網頁都要使用CSS了,今天在這個教程中給大家以執行個體的形式教給大家如何使用CSS,通過四個例子來說明CSS的使用!通過這個教程中的四個執行個體讓大家理解在HTML中加入CSS之後,CSS在什麼時候起作用?以及不加CSS會如何顯示。激起你學習CSS的興趣。 首先我們先建立一個CSS檔案,開啟我們的記事本,然後輸入下面的內容: p { color: #ff0000; background: transparent;
原創教程,轉載請註明出處:網頁教學網用CSS建立導覽功能表的兩個例子 現在使用CSS+XHTML製作網頁,通常網頁需要導航,導航通常有兩種:水平和垂直。 1.垂直導航的例子:(單擊此處瀏覽示範效果) (1)CSS檔案:(儲存為vertical.css) 代碼如下 複製代碼 h1, h2 {
代碼如下複製代碼 <style type="text/css"><!--tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}--></style></HEAD><table><tr><td>第1行</td><td>第1
用慣了Windows的人對各種各樣的滑鼠樣式一定不會陌生。當滑鼠移動到不同的地方時,當滑鼠執行不同的功能時,當系統處於不同的狀態時,都會使滑鼠的形狀發生變化。而在網頁上往往只有當滑鼠在超級連結上時才出現一個手形,在其它地方似乎沒有什麼變化。這同充滿動感的網頁顯得不怎麼和諧。實際上,用CSS可以方便地定義許多種滑鼠形狀。用本文介紹的方法,可以在網頁的作何地方設定滑鼠的不同樣式。 在Dreamweaver3中設定手形滑鼠樣式效果的製作步驟:
..:: 巧用CSS製作藝術字 ::..如果靈活應用CSS各種濾鏡的特點並加以組合,我們可以得到許多意想不到的效果。這是一些效果示範,供各位參考。西部電子用blur濾鏡做出的效果,代碼如下:FILTER: blur(direction=135,strength=8)西部電子用dropshadow濾鏡做出的效果,代碼如下:FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)西部電子用glow濾鏡做出的效果,代碼如下:FILTER:
當前瀏覽器普遍支援的前提下,css被我們賦予了前所未有的使命。然而依賴css越多,樣式表檔案就會變得越大越複雜。與此同時,檔案維護和組織的考驗也隨之而來。(曾幾何時)只要一個css檔案就夠了——所有規則(rule)匯聚一堂,增刪改都很方便——可這種日子早已遠去。(現在)建立新網站時,必須花點時間好好籌劃怎麼組織和架構css。檔案的組織 構建css系統的第一步是大綱的擬定。(我認為)css組織規劃的重要性堪比網站目錄結構。(htmlor注:
CSS布局與傳統表格(table)布局最大的區別在於:原來的定位都是採用表格,通過表格的間距或者用無色透明的GIF圖片來控制文布局版塊的間距;而現在則採用層(div)來定位,通過層的margin,padding,border等屬性來控製版塊的間距。1.定義DIV分析一個典型的定義div例子: 代碼如下複製代碼
CSS布局與傳統表格(table)布局最大的區別在於:原來的定位都是採用表格,通過表格的間距或者用無色透明的GIF圖片來控制文布局版塊的間距;而現在則採用層(div)來定位,通過層的margin,padding,border等屬性來控製版塊的間距。1.定義DIV分析一個典型的定義div例子: 代碼如下複製代碼
css: 相容性很差。 代碼如下複製代碼 a:focus,input:focus {outline:none;} 在 Firefox 裡可以用 -moz-outline:none; 或者 outline:none; 來將其去掉。所以我們可以這樣寫: 代碼如下複製代碼 a:focus { outline:none; -moz-outline:none;}
1.常規css方法——可以實現IE,Safari,chrome,opera瀏覽器下文字溢出省略符號表示這是一段測試文字,主要是用來測試文字溢出後是否會用省略符號顯示。 代碼如下複製代碼 .zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}
CSS文法高亮及代碼格式化的Regex匹配prototype擴充已有的Javascript對象:String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");} Getter唯讀屬性器: get EndlineMatcher() { &