程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 數據庫知識 >> MYSQL數據庫 >> MySQL綜合教程 >> MySql 備忘錄

MySql 備忘錄

編輯:MySQL綜合教程

MySql 備忘錄。本站提示廣大學習愛好者:(MySql 備忘錄)文章只能為提供參考,不一定能成為您想要的結果。以下是MySql 備忘錄正文


已兼容IE!之前不克不及兼容IE,給您的浏覽帶來未便非常負疚,Sorry
一.這篇博客的初志   比來在預備一個下學期加入競賽的概念網站,願望能用到CSS3的新特征,好比background的background-clip或background-origin或border-image。但僅僅是依附w3schools上的文檔和解釋發明許多臆想中的後果都完成不了。因而測驗考試在百度中搜素,成果材料也是少的不幸,重復轉載的只要一篇來自怿飛博客的《 background-clip與background-origin 的一則應用》 ,但究竟是幾年前的文章,個中的部門內容曾經不實用於如今的尺度了,其他的搜刮成果也不是很幻想因而乎只好本身著手人給家足。花了一至了兩天把這個內容消化。同時把要點和精總結在這篇博客中,給本身和年夜家做一個參考。 二.從傳統的多圖象配景技巧談起 在CSS3之前,2.0也好,2.1也罷。要想給一個塊級元素添加圓角或是暗影,又或是一個比擬龐雜的配景圖象(好比多邊形,多紋路)都是相當艱苦的一件事。在這裡先羅列兩個例子,有關若何組織龐雜的配景和暗影後果。一方面是為了照料一些入門web的同伙,另外一方面也為了和前面這兩個技巧的運用做一個比較,做一個承先啟後的感化。闇練的同伙可以跳過這一節,直接從下一節開端浏覽   1.請年夜家先看如許一個後果:留意文字的配景,年夜家有無主張若何完成?一個最通俗不外的設法主意是,我就按我須要的文字的長度,用photoshop做一個包括閣下半圓外形的完全一體圖片。但成績是,假如我文字的長度須要更改,變得更長或許更短時應當怎樣辦?為了不影響雅觀,我們又不能不把圖片放回photoshop中返工?固然不消除這是一種方法。但如果有異常多的頁面和框配景須要用到這個圖片,那任務量會長短常偉大的。很顯著這是得失相當的。因而我們會想,手動的讓圖片順應文字費事,如果能讓圖片主動能順應文字,是相對的事半功倍。那畢竟有無如許一種辦法呢?   謎底是確定的(在這裡我們簡單的談一下症結思緒,詳細代碼的完成就不深究了),為了完成這個後果,平日我們只須要三幅圖:。詳細道理如圖所示:   信任看到圖以後有同伙應當有很多曾經心照不宣了:我們在本來獨一一個用來寄存文字的div中,又拔出了三個 div:div#left,div#center,div#right。個中#left和#right分離用來寄存半圓形的閣下邊沿且固定寬度,而中央的#center用來寄存文字,配景采取repeat-x定位,且不定位寬度,再經由過程其它css設置讓它能壓縮緊貼內容區域(content),如許就可以跟著文字的長短而自若伸縮了。最初經由過程position或display屬性讓#lef,#center,#right完成無裂縫的拼接,同時讓最外層的 div#content也壓縮緊貼它包裹的三個div,然後——年夜功樂成。 這個技巧的症結在於若何讓寄存文字的div#center的伸縮惹起內部全部div#content的的伸縮,且堅持#left,#center和#right的結構不被損壞(要無縫能力讓人感到一體,感到真是)……固然這不屬於我們明天的評論辯論規模,有興致的同伙可以參考我之前的一篇《深刻懂得css盒子模子》。如許就完成了主動伸縮功效。精簡的代碼以下:


<div class=”content” style=”height:32px;”> /*這個是伸縮的*/
<div class=”left” style”width:15px; height:32px;”></div>
   <div class=”center” style=”height:32px;”>這裡寄存文字內容</div>/*這個也是可以伸縮的*/
<div class=”right” style=”width:15px; height:32px;”></div>
</div>

但至於若何能力使最外層的容器內壓縮緊貼外部div,使div#center主動伸縮,就不在本課的規模以內,年夜家可以百度,也能夠參照我上一篇文字《深刻懂得box盒子模子》。   例子2.我們先看一個jQuery插件fancybox的暗影後果: 這是模擬MacOS的後果的一個插件,因為整張圖片太年夜,我只是截取了一個角上去。年夜家須要留意的重點是白色邊框的外邊沿的暗影後果(能夠不是很顯著)——參照下面的例子,您認為暗影後果是若何完成的?   對,照樣用九個盒子拼成的(能夠這裡有同伙會想到滑動門技巧,切實其實這也是完成暗影的辦法之一,但為了承上,這裡暫且不引見),一個盒子裝的是中央的照片,別的八個盒子分離裝東,西,南,北,西北,東北,西南,西八個偏向的暗影。這個不消繪圖,年夜家應當可以想象出來吧。但這個例子又有分歧——這一次有九個盒子,如果按上一個例子一樣,在一容中放九個盒子,再經由過程浮動,定位屬性等來完成他們無縫拼接,也會是相當繁瑣的一事。由於要斟酌每個盒子四周的盒子在本身伸縮時也能恰當的做一些調劑,不至於湧現錯位和裂縫。所以的此次的做法是將放暗影的八個盒子用相對定位固定在中央的盒子的八個偏向上,如許以中間盒子為中間,不管它怎樣縮小照樣減少,四周八個盒子都逝世逝世的從屬著它,就不再用斟酌本身四周的盒子有錯位之類的成績。圖例以下: 再看看現實的定位是否是如許定位的呢,看看從firebug下的截圖:

再看看個中一個fancybox-bg-n的詳細css: 三,background-clip,background-origin入門   我想說的是,下面的兩個例子總結起來只要兩個字:費事。配景明明只關一個div的事,成果硬是要n多個不相干的div來幫助完成後果——background-clip,backgrou nd-origin就是我們的救星。要曉得CSS3的任何新屬性不是W3C人吃飽了撐的沒事謀事想出來來的,它的湧現必定性一定是經由具體驗證的且有它需要的價值。信任當您浏覽完這一節的內容後,你就會開端學會若何用新技巧解脫那些陳腐繁瑣的步有三個屬性來就不龐雜的後果了。 在開端之前,先做幾點解釋,請看:
    起首我們要引入幾個概念(呃,這是我本身翻譯的,不曉得對纰謬,能夠目光如豆了,請同伙們見諒):內容邊沿(content edge),內邊距邊沿(padding edge),邊框邊沿(border edge),外邊距邊沿(margin edge)。為了懂得,我們可以把內邊距,邊框,外邊距算作一個環形的容器,而且每一個環描述器都只要兩條邊,一條沖內,一條沖外(內和外也是絕對的,比如外邊距的外邊就是邊框的內邊),因而我們把沖外(outer)的那條邊稱為這個環形的邊沿(edge)。固然由於內容區域是“實心”的,所以不存在表裡的成績。     origin的翻譯過去時原始的意思。望文生義,所以background-origin是用來決議圖片的原始肇端地位。它有三個可選值content-box,padding- box,border-box(background-origin假如寫在css中只要Opera閱讀器可以辨認,假如願望在火狐或許chrome或 Safari中應用,要應用它們閱讀器的公有屬性-moz-background-origin(Firefox),-webkit-background-origin(chrome,safari),而且對應的值是content,padding,border,省略了-box),即你可以選擇配景圖片是從內容區域開端顯示,照樣內邊距,照樣邊框。   舉個例子,我們有一個div,症結在定位它的配景圖片,為了讓演示的後果更顯著,我們讓它從左上角開端定位,position:left top而且no-repeat。而且內容區於圖片年夜小分歧,邊框和內邊距都設置為30像素寬。OK, 在沒有參加background-origin之前的代碼為:


.border
{
background:url("images/qwqw_s.jpg");
background-repeat:no-repeat;
background-position:left top;
border-width:30px;
border-style:dashed;
border-color:red;
width:180px;
height:254px;
padding:30px;
margin:0 auto;
}

設置background-origin以後的後果圖:   由於是在火狐下做的測試,所以-moz-background-origin取代background-origin,響應的屬性所以也去失落了-box     後果和感化曾經了如指掌了:我們看到,當background-origin的值為content-box時,起首會讓配景圖片的左上角和內容邊沿左上角對齊,padding-box時,則會讓配景圖片的左上角和內邊距的左上角對齊。以此類推。可見background-origin的值切實其實是決議配景圖片開端從哪一個區域開端顯示。但話說回來,假如我沒有設置任何的background-origin屬性的話,它默許的肇端地位在哪呢?這裡就不演示了,但有需要記住——padding。   有一點要非常的留意:假如配景不是no-repeat的話,這個屬性是有效的。它會從border-box區域開端顯示,這一點很主要。
  background-origin屬性就先引見到這裡。應當不難吧。上面持續引見background-clip。之所以沒有把這兩個屬性分為兩節分離引見,由於實戰的經歷告知我這兩個屬性應當是互相搭配能力相得益彰。   clip原意為裁剪,截取。異樣望文生義,background-origin的感化為將配景圖片做恰當的裁剪,以順應須要。固然這裡其實不是真正意義上的把圖片給裁剪了,而是依據屬性值。把圖片的某些部位做恰當的隱藏。background-clip與origin的可選擇一樣,也是有content- box,padding-box,border-box(要留意在火狐和Chrome和Safari中,須要應用公有屬性,加上-mox-和 -webkit-,這裡就不贅述了,參考說明background-clip的內容)。如何個剪裁法呢。依據你設置的盒子部位,那末圖片在這個部位的外邊沿之外的部門都邑弗成見。舉個詳細例子,圖片肇端地位和下面的例子一樣,好比是從border-box開端,但我background-clip設置的值是content-box,在content以外,也就是border-box內,padding-box內的圖片內容一切弗成見。雖然你是讓圖片從邊框開端顯示。實例以下


.border
{
background:url("images/qwqw_s.jpg") black;
background-repeat:no-repeat;
background-position:left top;
border-width:30px;
border-style:dashed;
border-color:red;
background-clip: content-box;
background-origin: border-box;
-moz-background-clip: content;
-moz-background-origin: border;
-webkit-background-clip: content;
-webkit-background-origin: border;
width:180px;
height:254px;
padding:30px;
margin:0 auto;
}


  正如以上所說,我們可以看見固然圖片是從頂著邊框的左上角停止定位,然則裁剪屬性background-clip的屬性是設置為content-box,所以只要content區域的內容看得見,也就是只需是在content以外的圖片內容都被隱藏失落了。

  我之所以要在分歧閱讀器下停止測試( Firefox/3.6.3,Google:7.0.517.24, Opera/9.80, Safari:5.0.1),謎底也在圖上,我們看到在火狐下的成果和其他閱讀器成果居然紛歧樣。明明background-clip設置的屬性是content-box,但卻沒有圖片的任何部位被屏障。我想說的是:在火狐下-moz-background-clip屬性是沒有content這一值的(然則padding和border照樣有的),在firebug中可以看到,-moz-background-clip的值直接是border,當你強行改成content時,這條屬性會直接從bug中消逝。固然這只是在 3.6.3版本下的成果,至於在4.0版本中表示若何(固然只是beta版)。可以自行測試

四.實戰

  在進修了根本background-clip和background-origin用法和道理以後,我們將經由過程操作一個現實的例子,來加深我們的進修:

                  

這個圓角配景是由三部門構成:(呃,實際上是從Webqq2.0網站上撬上去的,就是下面的對象條……然則作為教授教養用,應當無傷年夜雅吧……),思緒和開篇的誰人黑配景制造進程是一樣的,閣下固定,中央窄的repeat-x。然則這會不消拔出三個div,又要設置float,又要設置display斟酌結構那末費事。

步調一:

先搭建一個框架出來,給一個結構。不焦急把圖片拔出出來。主張看以下代碼,有幾點須要解釋的:由於僅需在盒子閣下兩側拔出配景,且正好為閣下要拔出圖片的寬度(假如不正好為那末寬呢?那末不會勝利的,由於css3中還沒有屬機能掌握圖片在邊框中的定位,你會想不是有background- position屬性嗎?要留意誰人是掌握圖片在全部盒子中的定位。照樣不信的話你可以親身嘗嘗);還有就是padding的值也是可以不消設置的,是為了與下面的例子努力堅持分歧,便利年夜家比較進修 margin也是為了讓盒子居中罷了,可以疏忽;最初border-style和border-color也是便利年夜家懂得結構才添加上去的。


.border
{
background:black;
border-width:0 11px; /*為了要順應閣下兩個圖片的寬度,且只要閣下須要,高低的寬度就不須要了*/
border-style:dashed;
border-color:Red;

width:180px;
height:90px; /*由於要順應圖片,所以寬度改小一點*/
padding:30px; /*其實Padding也是可以不須要的,為了便利解釋一些成績,照樣保存*/
margin:0 auto;
}

步調二:

這一步很簡略,就是把中央須要x軸反復的圖片添加上去,而且把黑色配景去失落


.border
{
background:url("images/tool-bar/bg_b_c.png");/*添加配景*/
background-repeat:repeat-x;
background-position:center;
border-width:0 11px; /*為了要順應閣下兩個圖片的寬度,且只要閣下須要,高低的寬度就不須要了*/
border-style:dashed;
border-color:Red;

width:180px;
height:90px; /*由於要順應圖片,所以寬度改小一點*/
padding:30px; /*其實Padding也是可以不須要的,為了便利解釋一些成績,照樣保存*/
margin:0 auto;
}

 

步調三:

這步也很簡略,就是把中央反復的配景的閣下兩頭去失落,為了便利我們下一步在閣下邊框中拔出須要的圖片。留意這裡的

 -moz-background-origin的content屬性是有效的,現實上這裡的值是padding。正如在上一節的最初說道,在火狐中是沒有content這個屬性的。假如有同伙想要copy這段代碼,記得依據閱讀器版本做響應的修正,把origin的值content改成 padding,或許把盒子的padding去失落。


.border
{
background:url("images/tool-bar/bg_b_c.png");
background-repeat:repeat-x;
background-position:center;
-moz-background-clip: padding;
-moz-background-origin: content; /*firefox中background-origin沒有content這個屬性,其完成在的值是padding。在其他閱讀器中是有用的*/
border-width:0 11px; /*為了要順應閣下兩個圖片的寬度,且只要閣下須要,高低的寬度就不須要了*/
border-style:dashed;
border-color:Red;

width:180px;
height:90px; /*由於要順應圖片,所以寬度改小一點*/
padding:30px; /*其實Padding也是可以不須要的,為了便利解釋一些成績,照樣保存*/
margin:0 auto;
}

  步調四: 這一步照樣很簡略,拔出邊框的閣下兩張圖片,並設置好position,repeat,clip等值。留意當存在多個圖片時,設置值的格局,用逗號離隔。


.border
{
background:url("images/tool-bar/bg_b_c.png"),
              url("images/tool-bar/bg_b_l.png"),
              url("images/tool-bar/bg_b_r.png");
background-repeat:repeat-x,no-repeat,no-repeat;
background-position:center,left center, right center;
-moz-background-clip: padding,border,border;
-moz-background-origin: content,border,border;
border-width:0 11px; /*為了要順應閣下兩個圖片的寬度,且只要閣下須要,高低的寬度就不須要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*由於要順應圖片,所以寬度改小一點*/
padding:30px; /*其實Padding也是可以不須要的,為了便利解釋一些成績,照樣保存*/
margin:0 auto;
}

主要提醒!寫到這一步,可以從上圖看到曾經快年夜功樂成了。把閣下的白色邊框去失落便可以了——那末把 border-color改成none或是直接去失落這句話?不可的。假如不設置色彩的話邊框就會釀成黑色,由於邊框有款式,並且款式還有11px寬啊,所以會用默許的黑色來填充。如今你能夠又會認為是邊框款式border-style的成績,那我們把款式去失落,把寬度保存?也不可,由於假如沒有款式寬度是有效的,成果會以下圖(我們可以從firebug中看到邊框的寬度是0,固然依然保存border-width)。所以border- style,border-color,border-width缺一弗成!這一點要非常留意!

 

步調五:

綜上所述,你能夠會認為既不克不及改border-style又不克不及改border-color豈不是沒轍了?准確謎底是——照樣修正border-color,別忘了,color還有一個值transparent,通明。色彩還讓它在,但只需人們看不見就好了。我們完成它:


.button
{
background:url("images/Fancybox/fancy_title_main.png"),
              url("images/Fancybox/fancy_title_left.png"),
              url("images/Fancybox/fancy_title_right.png");
background-repeat:repeat-x,no-repeat,no-repeat;
background-position:center,left,right;
background-clip: padding-box,border-box,border-box;
background-origin:padding-box,border-box,border-box;
-moz-background-clip: padding,border,border;
-moz-background-origin: content,border,border;
border-width:0 15px;
border-style:dashed;
border-color:transparent;
width:80px;
height:32px;
}


OK,完全年夜功樂成,很簡略不是嗎。
 四.border-image   寫到這裡我發明文章的陣線貌似拉的有點長了。所以我盤算border-image在這裡只是作為附加內容解釋,其實不會深究,盡量簡扼一些。開端(所以空話也簡扼一些……):   border-image是定位在邊框上的圖片——那不是和把background-origin屬性設為border差不多一個意思?是的,切實其實有這層寄義。但在接上去的解釋和例子中,你將看到它的方便的地方。   這個屬性說究竟照樣在搗鼓一張圖片。先直接看一張解釋圖片:          草圖右邊是舉例border-image所應用的圖片,左邊的草圖是比方一個盒子。border- image有兩個值須要設定,頭一個是切割屬性(border-image-slice),最多有四個值可以設置,定名規矩和margin、 padding都是分歧的,次序上右下左。四個值對應右邊草圖的分歧區域的寬度,異樣上右下左的次序,也就是2,6,8,4區域的寬度(4、6區域為橫向長度,2,8區域為叢向長度)。從圖中可知,由於是交集的原因,只需界說好這四塊的寬度,1、3、9、7區域的長寬也就隨之肯定。在映照到盒子模子上,從 1到9(除5)正好連成盒子的邊框區域,如許盒子的邊框圖片就有下落了。   但還有一個疑問。假如現實圖片真如右邊草圖那末小,而現實盒子真有左邊草圖的那末年夜,那2、6、8、4區域的圖片能夠就不敷用呀?問得好,所以border-image還供給一種機制來處置這個成績——圖片反復屬性(border-image- repeat),也叫拉伸值(stretch value)。有四個值可以選擇:stretch(拉伸且默許)、repeat(反復)、round(平鋪)。是否是聽著很耳熟,對,和電腦壁紙的地位屬性是一樣的。對每張border-image最多可以設置兩個拉伸屬性如round round。前一個針對圖片側邊(除5區域之外),後一個針對中央部門,即5區域。假如只要一個值的話,則以為所以區域都依照此值安排。若無設置此屬性,則按默許值拉伸(stretch)來安排image。 所以對應上圖,我們再來一個例子,就了如指掌了:   回到上節的誰人例子,這回我們只須要兩張圖片:   可以看出前面那種圖就是閣下兩側拼接而成的,這回我們用border-image屬性完成下面的異樣後果,很簡略,直接看CSS代碼:


.border
{
background:url("images/tool-bar/bg_b_c.png");
background-repeat:repeat-x;
background-position:center;
-moz-background-clip: padding;
-moz-background-origin: padding;
-moz-border-image:url("images/bg_b_l_r.png") 0 11;
border-width:0 11px; /*為了要順應閣下兩個圖片的寬度,且只要閣下須要,高低的寬度就不須要了*/
width:180px;
height:90px; /*由於要順應圖片,所以寬度改小一點*/
padding:0 30px; /*其實Padding也是可以不須要的,為了便利解釋一些成績,照樣保存*/
margin:0 auto;
}

照樣要做幾點解釋。由於在這個例子中我們只須要閣下側有圖片,所以切割屬性只需將圖片閣下切割開去可以了:0 11。在上一節最初一步的主要提醒中,我重復強調border-style,border-color,border-width缺一弗成。但在這裡只須要一個border-width就足夠了!這就是它的方便的地方。但在應用時要記得分歧閱讀器之間的差別,斷定能否要應用-moz-或-webkit-或 -o-前綴。   再給年夜家看幾個冷艷的例子: -----> 還有小的:-------> 至於詳細CSS代碼嘛,其實很簡略,這裡就給年夜家賣個關子吧。當作思慮題咯  五.再絮聒幾句    假如年夜家在浏覽進程中有甚麼困惑,或發明甚麼毛病,甚者是錯別字,都可以留言給我。我將盡快給年夜家答復,修改。很願意與年夜家交換。    一向認為博客園永久是.net,c#,MVC之類的後台世界。有關web前真個文章很多,但含金量遠遠不如那些多。固然我學的是.net偏向,但前端一直是摯愛。由於博客園這裡前真個材料的匮乏。所以本身一旦碰到了許多前真個成績都只能谷歌國外的文章,或是去stack overflow(但真的很有用果,答復的速度快,群策群力,並且句句锱铢。不像國際全都是“頂”啊,“標志”之類的空話,向年夜家激烈推舉)。   前真個蕭條是否是真的由於前端是開源,好比html代碼,只需把想要網站的圖片和款式copy一下改一改就是了。毫無技巧可言?照樣JavaScript和jQuery這類器械和C#、Java比起來真的簡略許多 ?呵,願望有興致的同伙能和我留言交換交換。   迎接轉載,轉載請注明出處 http://www.cnblogs.com/hh54188
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved