大概大家讀知道`id`,`class`以及`descendant`選擇器,并且整體都在使用它們,那么你正在錯(cuò)誤擁有更大級(jí)別的靈活性的選擇方式。這篇文章里面提到的大部分選擇器都是在CSS3標(biāo)準(zhǔn)下的,所以它們只能在相應(yīng)最新版本的瀏覽器中才能生效,你完全應(yīng)該把這些都記在你聰明的腦袋里面。1.*Css代碼*{margin:0;padding:0;}在我們看比較高級(jí)的選擇器之前,應(yīng)該認(rèn)識(shí)下這個(gè)眾所周知的清空選擇器。星號(hào)呢會(huì)將頁(yè)面上所有每一個(gè)元素都選到。許多開發(fā)者都用
系統(tǒng) 2019-08-29 22:13:06 2815
大家都知道現(xiàn)在各個(gè)瀏覽器都支持CSS3的自定義字體(@font-face),包括IE6都支持,只是各自對(duì)字體文件格式的支持不太一樣。那么對(duì)于網(wǎng)站中用到的各種icon,我們就可以嘗試使用font來(lái)實(shí)現(xiàn),本文將詳細(xì)講解這種用法。為什么要將icon做成字體?在很多網(wǎng)站項(xiàng)目中,我們常常會(huì)用到各種透明小圖標(biāo),然后網(wǎng)站要兼容各個(gè)瀏覽器,也可能會(huì)有多個(gè)尺寸,甚至還要考慮換膚等需求。那么我們就要將這些小圖標(biāo)輸出為多種尺寸、顏色和文件格式,比如png8alpha透明或者pn
系統(tǒng) 2019-08-12 09:29:28 2812
byzhangxinxufromhttp://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1147關(guān)于瀏覽器文字選中顏色以我的系統(tǒng)舉例(xp默認(rèn)主題),瀏覽器上頁(yè)面文字選中后默認(rèn)的背景色是一種藍(lán)色,不同瀏覽器的顏色有些許差異,但大致相同,文字顏色也近乎白色,如下圖所示,截自Firefox3.6瀏覽器:在CSS3的爸爸媽媽還沒有相親認(rèn)識(shí)的時(shí)候,要改變頁(yè)面上文字選中后的背景色以及文
系統(tǒng) 2019-08-29 23:45:39 2811
這個(gè)問(wèn)題說(shuō)起來(lái)有點(diǎn)慚愧,搞了很久才搞定。本人并不擅長(zhǎng)CSS,至少在布局這塊到現(xiàn)在還是一片糊涂。不知道是不是對(duì)android布局太了解了,還是其他什么原因,我總是在html+css中想著采用android中的線性布局啊,相對(duì)布局啊什么的。可是,一個(gè)很簡(jiǎn)單的布局都搞不定。具體看圖:很簡(jiǎn)單的一個(gè)布局,看出問(wèn)題了嗎?文字需要垂直居中怎么辦?這個(gè)圖對(duì)應(yīng)的基本html如下:
系統(tǒng) 2019-08-29 22:17:48 2811
十步學(xué)習(xí)css定位知識(shí)http://www.barelyfitz.com/screencast/html-training/css/positioning/這個(gè)教程解釋了css布局中的以下問(wèn)題:position:static,position:relative,position:absolute,float作為例子的div的代碼:id=div-before
<
系統(tǒng) 2019-08-29 23:51:58 2810
1.:first-line偽元素"first-line"偽元素用于向文本的首行設(shè)置特殊樣式。2.:first-letter偽元素"first-letter"偽元素用于向文本的首字母設(shè)置特殊樣式:3.:before偽元素":before"偽元素可以在元素的內(nèi)容前面插入新內(nèi)容。4.:after偽元素":after"偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。CSS設(shè)計(jì)指南之偽元素
系統(tǒng) 2019-08-12 01:32:04 2809
文章參考http://blog.csdn.net/cangkukuaimanle/article/details/6798509http://www.jb51.net/css/16650.html說(shuō)說(shuō)畫三角形的原理1、設(shè)置一個(gè)DIV的高度和寬度全部為0,2、然后設(shè)置border-width為適當(dāng)?shù)闹?、設(shè)置border-style為實(shí)線4、設(shè)置border-color的顏色,然后將上、右、下、左不需要顯示的邊框設(shè)置為透明即可例子
系統(tǒng) 2019-08-29 22:10:13 2804
CSS3扁平化風(fēng)格聯(lián)系表單是一款CSS3簡(jiǎn)易聯(lián)系表單非常清新,整體外觀不是那么華麗,但是表單扁平化的風(fēng)格讓人看了非常舒服,同時(shí)利用了HTML5元素的特性,表單的驗(yàn)證功能變得也相當(dāng)簡(jiǎn)單。經(jīng)測(cè)試效果相當(dāng)不錯(cuò),huiyi8素材推薦下載。css3按鈕:http://www.huiyi8.com/css3/anniu/一款簡(jiǎn)易的CSS3扁平化風(fēng)格聯(lián)系表單
系統(tǒng) 2019-08-12 01:33:19 2789
body{cursor:hand;margin:0;padding:0;position:absolute;overflow:hidden;left:0;top:0;width:100%;height:100%;}.link{position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden;visibi
系統(tǒng) 2019-08-29 23:41:34 2778
如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大顯示器),變化范圍極大。除了使用傳統(tǒng)的臺(tái)式機(jī),用戶會(huì)越來(lái)越多的通過(guò)手機(jī)、上網(wǎng)本、iPad一類的平板設(shè)備來(lái)瀏覽頁(yè)面。這種情況下,固定寬度的設(shè)計(jì)方案將會(huì)顯得越發(fā)不合理。頁(yè)面需要有更好的適應(yīng)性,其布局結(jié)構(gòu)要做到根據(jù)不同的設(shè)備及屏幕分辨率進(jìn)行響應(yīng)調(diào)整。接下來(lái),我們將了解一下怎樣通過(guò)HTML5和CSS3MediaQueries(媒介查詢)相關(guān)技術(shù)來(lái)實(shí)現(xiàn)跨設(shè)備跨瀏覽器的響應(yīng)式Web設(shè)計(jì)方案。
系統(tǒng) 2019-08-29 22:22:37 2769
近兩年來(lái),程序員有一句話很流行,“不要重復(fù)制造輪子”,所以出現(xiàn)了許許多多讓我們非常受用的各種框架。Framework在開發(fā)的各個(gè)領(lǐng)域給我們減少了很多工作量。而對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō),一直以來(lái),缺少這樣的Framework來(lái)幫助設(shè)計(jì)師們減輕工作量。今天給大家推薦一些不錯(cuò)的CSSFramework:首先是本文的主角:這是一個(gè)非常輕量級(jí)而且很少侵入性的框架(這話怎么看都不是網(wǎng)頁(yè)設(shè)計(jì)師能熟悉的,:-)),換句話來(lái)說(shuō),這是一個(gè)很底層的CSSFramework,并沒有替你
系統(tǒng) 2019-08-29 23:39:49 2768
你學(xué)會(huì)了基本的id,class類選擇器和descendant后代選擇器,然后就覺得完事了嗎?如果這樣,你就會(huì)錯(cuò)過(guò)許多靈活運(yùn)用CSS的機(jī)會(huì)。雖然本文提到的許多選擇器都屬于CSS3,并且只能在現(xiàn)代的瀏覽器中使用,但學(xué)會(huì)這些是大有好處的。1.*1234*{margin:0;padding:0;}首先我們來(lái)認(rèn)識(shí)一些簡(jiǎn)單的選擇器,尤其針對(duì)初學(xué)者,然后再看其他高級(jí)的選擇器。星號(hào)可以用來(lái)定義頁(yè)面的所有元素。許多開發(fā)者會(huì)使用這個(gè)技巧來(lái)把margin和padding都設(shè)為0
系統(tǒng) 2019-08-29 22:12:58 2754
css可以處理16,777,216顏色,可以使用名字、rgb值或十六進(jìn)制代碼。程序代碼red紅色等同于rgb(255,0,0)等同于rgb(100%,0%,0%)等同于#ff0000等同于#f00有17個(gè)預(yù)先確定的顏色,它們是:aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,orange,purple,red,silver,teal,white,andyellow.transparent也
系統(tǒng) 2019-08-29 23:17:16 2749
一、定位的基本概念一般我們定位元素都使用絕對(duì)定位,因?yàn)榻^對(duì)定位是最容易掌握的定位方式。但結(jié)合其他定位方式,我們可以設(shè)計(jì)更加靈活的頁(yè)面。CSS控制定位的屬性為:PositionCSS中關(guān)于定位(position)是這樣定義的:定位(position):允許用戶精確定義元素框出現(xiàn)的相對(duì)位置,可以相對(duì)于它通常出現(xiàn)的位置,相對(duì)于其上級(jí)元素,相對(duì)于另一個(gè)元素,或者相對(duì)于瀏覽器視窗本身。每個(gè)顯示元素都可以用定位的方法來(lái)描述,而其位置由此元素的包含塊來(lái)決定的。他的允許值
系統(tǒng) 2019-08-29 23:02:24 2737
剛剛看到一篇國(guó)外討論CSSsprites利弊的文章,作者認(rèn)為那是潛在的危險(xiǎn),在文中也指出了他的很多觀點(diǎn),這個(gè)技術(shù)我用的時(shí)間不長(zhǎng),不過(guò)到也還是有一些體會(huì)的,在這里也說(shuō)一說(shuō)自己的理解吧。所謂CSSsprites就是把很多張小的背景圖集中在一張大圖上,然后通過(guò)定義background-position來(lái)調(diào)用不同位置的背景圖。這個(gè)技術(shù)最大的優(yōu)點(diǎn)就是減少了HTTP請(qǐng)求,另外就是減小了圖片的大小,節(jié)省帶寬。這就是google的一張CSSsprites:googlecs
系統(tǒng) 2019-08-12 09:29:54 2729