Time of Update: 2017-02-28
css 段落前面空兩個字的距離,不要再使用空格了。應該使用首行縮排text-indent。 text-indent可以使得容器內首行縮排一定單位。比如中文段落一般每段前空兩個漢字。 在這裡我們需要瞭解一種長度單位em。em是相對長度單位。相對於當前對象內文本的字型尺寸。 我們中文段落一般每段前空兩個漢字。實際上,就是首行縮排了2em。 看下面的例子:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
Time of Update: 2017-02-28
css|設計 用CSS定義一條水平的虛線呢? 我們首先需要瞭解,關於線條的CSS的兩個樣式: dotted : 在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為點線。否則為實線 dashed : 在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為虛線。否則為實線 水平線條,我們可以用hr來實現,也可以定義一個div,將它的高度設為1px或其它你想要的高度。 CSS定義一條水平虛線hr的方法:&
Time of Update: 2017-02-28
css|菜單 這是一個完全用CSS實現的中英文雙語導覽功能表,無指令碼和圖片,初始時,菜單語言是英文,當滑鼠移至上方在菜單上時,其變成中文,當然你也可以反過來做。實現原理:XHTML<ul id="nav"><li><a class="bi"
Time of Update: 2017-02-28
本文執行個體講述了DIV+CSS實現的綠色水平一級菜單代碼。分享給大家供大家參考。具體如下:這是一款基於DIV+CSS實現的綠色水平網站菜單,相信是你喜歡的一種CSS菜單,綠色風格,用到了幾張背景圖片,大家順著路徑把圖片下載下來吧。這款菜單整體感覺效果不錯,相容性又好,不管是用在你的網站或是學習研究CSS,都是不錯的選擇。運行效果截圖如下:代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Time of Update: 2017-02-28
RGB顏色模型解釋 RGB顏色模型就是一種描述某個顏色裡面有多少紅、綠、藍三原色的量的方法,就像把水彩顏料或油彩顏料混合起來得到某種我們想要的真實色彩一樣。 想象下如果你要配出一個純藍色,為了實現這個,你就不能把紅色和綠色放進這個顏色裡。所以我們就把紅、綠設定為0%,把綠設定為100%: CSS Code複製內容到剪貼簿 rgb(0%, 0%,
Time of Update: 2017-02-28
1.盒模型 盒模型,就是 瀏覽器為頁面中的每個 HTML 元素產生的矩形盒子。 這些盒子們都要按照 可見版式模型(visual formatting model)在頁面上排布。可見的頁面版式主要由三個屬性控制: position 屬性、 display 屬性和 float 屬性。其中,position 屬性控制頁面上元素間的位置關係, display 屬性控制元素是堆疊、並排,還是根本不在頁面上出現, float
Time of Update: 2017-02-28
很多初學者在剛學完CSS基礎要去實際操作進行網頁切圖的時候,總感覺無從下手。在這裡我為大家簡單總結一下,一些網頁切圖的經驗與要點。 第一點:一般我們網站LOGO部分通常使用H1+a連結的方式,在CSS上採用以圖換字技術,指定對象的寬與高,把A元素設為塊狀元素。這樣有利於後期的網站最佳化。 代碼如下: background:url(../images/logo.jpg) left top
Time of Update: 2017-02-28
meta源資訊功能之頁面定時跳轉與重新整理幾乎所有的網頁頭部都有<meta>源資訊。除了我們常用的定義編碼、關鍵字(name=”keywords”)、描述(name=”description”)(for SEO),還可以定義視區大小、縮放比例等(for 移動端),如下:CSS Code複製內容到剪貼簿 <meta name="viewport"
Time of Update: 2017-02-28
說到下拉式功能表大家就會想到js指令碼,一般的下拉式功能表都需要基於javascript指令碼才能實現,而本次提供給大家的則一個純css+幾個簡單圖片完成的清爽、綠色、大氣的下拉式功能表,適於任意網站使用PS:圖片就用了三個,有的同學不會把代碼弄到自己網站上,您只要把圖片另存,然後上傳到自己網站,再把路徑改就對了,如果連這個也看不懂...我真是醉了。關於菜單的顏色,預設是綠色的,如果您稍微懂一點PS,可以修改圖片為其他顏色,css中也需要改一下顏色代碼即可,如果不知道顏色代碼,可以用
Time of Update: 2017-02-28
有關CSS段落縮排的文法如下: 文法: text-indent: 〈值〉 允許值: 〈長度〉 | 〈百分比〉 初始值: 0 文本縮排屬性可以應用於區塊層級元素(P,H1,等.),以定義該元素第一行可以接受的縮排的數量。該值必須是一個長度或一個百分比。若百分比則視上階項目的寬度而定。通用的文本縮排用法是用於段的縮排: P { text-indent: 2em }
Time of Update: 2017-02-28
CSS為一些特殊效果準備了特定的工具,我們稱之為“偽類”。其中有幾項是我們經常用到的,下面我們就詳細介紹一下經常用於定義連結樣式的四個偽類,它們分別是: 代碼如下::link:visited:hover:active因為我們要定義連結樣式,所以其中必不可少的就是超級連結中的錨標籤--a,錨標籤和偽類連結起來書寫的方法就是定義連結樣式的基礎方法,它們的寫法如下: 代碼如下:a:link,定義正常連結的樣式;a:visited,定義已訪問過連結的樣式;a:
Time of Update: 2017-02-28
於是稍作研究下,在此記錄下: 當然,達到透明,很多一般使用三種方式: 1、直接使用透明圖片,這個確實比較直接省事,不過往往需要再製作圖片,個人認為,可維護性不好 2、使用如下代碼設定透明度,可是你會發現這種方式不能對其子節點的元素設定不透明 代碼如下: filter: alpha(opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity:
Time of Update: 2017-02-28
CSS Wave濾鏡可能很多朋友並不喜歡用,其實用的好了,可以有不少奇異效果。CSS Wave濾鏡可把對象按垂直方向疊加波形樣式,使對象年上去像波浪一樣。文法樣本:filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)。以下是Wave 濾鏡各個參數說明: wave 把對象按垂直的波形樣式打亂。 預設是 TRUE(非0) ADD 是否要把對象按照波形樣式打亂
Time of Update: 2017-02-28
用CSS實現靠右對齊,這似乎是一個太過基礎的例子啊,不過越基礎越容易出錯,有時候甚至找不到頭緒了,這也是我本人在剛開始寫CsS的時候所遇到的問題,今天才次向CSS初學者示範一款極其簡單的CSS靠右對齊代碼,希望對你的前端設計開發有所協助。代碼如下: 其實這裡最主要的一個CSS屬性就是float:right,也就是浮動屬性:靠右對齊,也可以改成float:left,改成這樣後,想一想,你可以擴充出許多的網頁布局,比如最基礎的網站導覽功能表、友情連結清單、一行兩列的文字列表等。
Time of Update: 2017-02-28
水平置中,如果知道元素的寬度,則可以使用代碼如下.cell{width:300px; margin:0 auto;
Time of Update: 2017-02-28
在百度音樂 http://music.baidu.com/ 看到這麼一個圖片效果,當滑鼠移上去的時候,會有一道閃光在圖片上划過,效果挺酷炫的。於是把這個效果再實現一下: 大體思想是,設計一個透明層i,skewx在X軸上做了負25度的變形,背景顏色用的是CSS3的線性漸層linear-gradient,然後hover的時候,設定0.5s的動畫時間。 同時在 i 層使用 cursor:pointer,如果不設定這個的話,需要等透明層動畫之後才能看得到 pointer 指標。 開啟
Time of Update: 2017-02-28
這篇文章主要介紹了JQuery結合CSS操作列印樣式的方法,有需要的朋友可以參考一下本節內容:JQuery、CSS操作列印樣式。 一、添加列印樣式 1,為螢幕顯示和列印分別準備一個css檔案,如下所示: 用於螢幕顯示的css: 代碼如下:<link rel="stylesheet" href="css/mainstylesheet.css"
Time of Update: 2017-02-28
在講解CSS定位前,首先要搞清楚以下幾個屬性的真正含義和區別,如下: 【 position:relative | absolute | static | fixed 】 A:相對定位(position:
Time of Update: 2017-03-04
我先說如何製作三角形吧,相信大家在平時逛網站的時候都會看到一些導覽列中的三角形吧,比如說: 網易首頁的頭部功能表列中,也會有這樣的三角形當滑鼠經過時,三角形會垂直翻轉,如下現在我分享製作三角形的做法,主要是利用邊框做成的首先,四個三角形合并在一起的正方形,也就是正方形的四條邊框形成的四個三角形原始碼:<!DOCTYPE html><html lang="en"><head> <meta
Time of Update: 2017-03-01
css之hover改變子項目和其他元素樣式+表示下一級元素,>表示子項目<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><style> #a {color : #FFFF00;} #a:hover + #c{color : #00FF00;} #a: