前段時間做一個小項目碰到了一個導航製作的方式然後突然想到曾經很久以前看到的梯形狀的不規則導航,就嘗試做了一下。結果碰到了幾個問題,後來在同事的提醒下總算完成了,記錄一下也跟大家分享分享。 網頁教學網 先看圖(圖片只是大致做了一下) 效果展示: 運行代碼框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
所謂的CSS進階技巧...其實是一些對基本技巧的創意組合, 任何手段和技巧都是解決問題的方法. 只要學會這種思考問題的方法, 你也能擁有屬於自己的CSS秘籍. CSS2 還沒有辦法創造出曲線邊框, 明顯的, 僅僅方框是沒辦法滿足我們設計師的. 所以CSS圓角技術到現在還是那麼的火. 1. 固定寬度的純色圓角矩形 在眾多圓角技術中, 固定寬度的圓角矩形應該是最容易實現的, 只需要2個圖片以及一段簡單的html代碼. html代碼如下: Webjx.Com 標題 內容
在css檔案中使用中文字型時,如果書寫中文,在IE6下,可能會導致部分樣式無法識別,所以最好在CSS檔案中不要出現中文,包括注釋。 一下是中文字型對應的英文寫法: 華文細黑:STHeiti Light [STXihei] 華文黑體:STHeiti 華文楷體:STKaiti 華文宋體:STSong 華文仿宋:STFangsong 儷黑 Pro:LiHei Pro Medium 儷宋 Pro:LiSong Pro
對於新手或入門者來說,往往會有這幾方面的疑問: 什麼是DIV+CSS?實質是什麼? DIV+CSS的優勢何在? 新手學習div+css,該如何入門? 使用什麼軟體來布局頁面和編輯css呢? 能不能提供幾個執行個體具體講解一下怎麼來實現? 諸如此類的問題,是新手們最常問的。回答這些問題,也是仁者見仁,智者見智了。不過從嚴格的角度來講,div+css的叫法是不對,只不過像我們這些菜鳥級的都這樣叫,習慣了而已。 1、那麼DIV+CSS是什麼意思呢?實質是什麼? 要弄懂這個意思,首先
在預設的情況下,我們的CSS將Table的邊框清除掉了,下面與大家分享下CSS控制Table內外邊框、顏色、大小的樣式,想學習的朋友可以參考下 其實按照常理來說,現在的網站應該早已經拋棄什麼表格了,現在肯定是DIV+CSS當道嘛!不過客戶的網站在新增內容的時候始終不滿意那些邊框效果:要麼沒有,要麼很粗。看得出來,這位客戶是位完美主義者。在預設的情況下,我們的CSS將Table的邊框清除掉了,是沒有的,看到的效果是這樣的。無邊框Table為了給,表格加一個邊框,我在CSS裡面寫了這樣一句
一直感覺這兩個偽類對象不是很重要,並且IE對它兩兄弟並不支援,所以也沒有怎麼靜下心來研究,只有在清楚浮動clearfix的時候會用到哈,其 他都很 少用!不過最近在研究css3的時候覺得它兩個的搭配不僅能夠減少代碼量並且能整出很巴適的效果,所以就來研究研究哈! 一、先來看哈他們的定義哈!1、selector:before( sRules ) 它要和content屬性一起使用,設定在對象前(依據對象樹的邏輯結構)發生的內容;2、selector:after( sRules )
使用css
80px和0起到的作用就是來告訴你圖片放在什麼位置的。預設情況下,如果您不設定後面的數字,那麼圖片是放置在頁面左上方的,如下圖的位置 以左上方為(0,0)的座標做一個位移 第一個數字是X軸上的位移量,也就是橫向的位移量,正表示向右,負表示向左! 第二個數字是Y軸上的位移量,也就是橫向的位移量,正表示向下,負表示向上! 如果把代碼改為 那麼圖片會向右向下移動80個像素,效果如下: 如果您的設定參數超出了,那麼會不顯示。如果我將代碼中y軸上的數值80改成-80,那麼頁面上
當我們定義了Div width後,裡面的內容有可能比較多,會超出來,將div或表格撐的大大的,變形了影響網頁美觀,介紹一種方法,用CSS強制隱藏掉多餘的內容並自動顯示省略符號,比如下面這段HTML的定義方法: 在上面的CSS代碼中,text-overflow:ellipsis指當對象文本溢出時顯示省略符號標記(...),text-overflow:clip是預設取值,不會顯示省略標記(...),而是裁切掉多餘內容。不過還要注意,在CSS代碼中: overflow:
這似乎是一個沒有必要的功能,不過對於一向喜歡個性的人來說,這是個有益的嘗試,喜歡挑戰,才能收藏創新。網頁上的文本選擇時,一般會出現藍色的背景,這貌似是微軟預設的,如果想改變這個顏色,似乎可以用下面的代碼來定義CSS: ::selection{background: #A8141B; color: white; /* Safari */} ::-moz-selection{background: #A8141B; color: white; /* Firefox */
CSS font似乎在CSS中簡單的不能再簡單的,幾乎每個CSS的開始位置都會見到地font網頁字型的定義,如果你剛接觸CSS,那和你更應該看一下本篇教程,將對CSS的Font設定做詳細講解。 一、CSS使用“font-size”屬性來控制字型大小。 對font-size的取值單位是:points, pixels等單位,即pt/px;14px字型大小相當於10.5pt,9pt相當於12px,你可以換算下這個關係。 CSS定義網頁上所有地方都顯示9
如果您是一個站長,一定希望自己網站可移植性增強,並且代碼簡單,潔淨,現在所有的網站,80%都是採用div+css來構架的。 也許大家都會寫,或是使用css,但是很多時候我們也許沒有考慮到,造成了代碼重複。 今天我們一起來探討一下,怎麼寫完美的css代碼。 一、關於 CSS重設 首先,很認真的告訴你,總是要重設某些分類。無
如果外部有一個div容器,其內部div容器設定了float樣式,則外部的容器div因為內部沒有clear,導致不能撐開。解決方案: CSS代碼: 複製代碼代碼如下:.clearfix:after { content: "." ; display: block ;height: 0 ;clear: both ;visibility: hidden ;}.clearfix{ display:
在寫一個網站的樣式表的時候,都會不可避免地用到一些中文字型,比如說微軟雅黑、黑體等,除非是做英文站,或者說你樂意整站都用瀏覽器預設的字型,那我也算服了U。在 CSS 中寫入中文字型的方法一般採用 font-family:"微軟雅黑","黑體";這樣類似的表達方式,但是對於像 WordPress 這樣需要 UTF8 編碼平台來說,一個不注意沒有轉換編碼就會導致中文字型無法按照希望的字型表形出來。所以我們可以通過英文、unicode
隨著智能手機的增多,手機網站也可以做的更加個人化,最近在改版自己的手機網站這其中,遇到了網站圖片尺寸問題,手機螢幕都比較小,怎麼讓上傳的規則不一的圖片在手機上顯示的更加美觀呢?那就利用css的強大功能吧。先附上代碼:img {max-width:500px;myimg:expression(onload=function(){this.style.width=(this.offsetWidth >
clear的值有四個 1.none:允許兩邊都可以有浮動物件; 2.both:不允許有浮動物件; 3.left:不允許左邊有浮動物件; 4.right:不允許右邊有浮動物件。 老實說,我沒真正理解字面上的意思,因為這幾段話是有歧義的,例如clear:right的解釋是“不允許右邊有浮動物件”,我一直以為是清除自身右方(下方)容器的浮動。但其實不是。下面一個一個DEMO的看,希望你能懂left和right到底是清除哪裡的浮動。 一、普通浮動,無清
在多數情況下我們不需要判斷css檔案是否載入成功了,但有些時間這個功能還是需要的,今天我來整理了相容各種瀏覽器的判斷CSS檔案載入完畢實現方法與各位分享要判斷這個 CSS 檔案是否載入完畢,各個瀏覽器的做法差異比較大,這次要說IE瀏覽器做的不錯,我們可以直接通過onload方法來處理CSS載入完成以後的處理: 代碼如下:// 代碼節選至seajsfunction styleOnload(node, callback) { // for IE6-9
說明:目前Frontpage的最新版本是FrontpageXP(Frontpage
標籤:tag html following hang ret access app script find I need to find a way to change CSS :hover