前端（三）

CSS續

1、CSS3新特性：

注意：在使用CSS3新屬性時，能夠給CSS3樣式加上各大廠商的前綴，來兼容不一樣瀏覽器（「瀏覽器內核」負責對網頁語法的解析，內核分爲渲染引擎和Js引擎）

 

       　　　　瀏覽器內核                    　　　　　　　　 前綴                   　　　　 瀏覽器

　　　　　a、Gecko                  　　　　　　　　　　 -moz-                  　　　　  火狐

　　　　   b、Webkit（谷歌目前已經棄用）                 -webkit-                        谷歌、蘋果

　　　　　c、Trident                                                 -ms-                                IE                        

　　　　　d、Presto（歐朋目前已經棄用）                    -o-                              opera（歐朋）

　　　　　e、blink                                                                                       目前谷歌和歐朋）　　　

　　

 

　　一、CSS3選擇器（屬性選擇器、兄弟選擇器、僞對象選擇器);（詳見上一篇）

　　二、彈性盒 display:flex;（詳見上一篇）

　   三、圓角 border-radius:;

   　1) border-radius : value ; 四個角（value中填像素或百分比，當盒子爲正方形時若是填50%，則變成圓，當盒子爲矩形時填50%，爲橢圓）

　   2)border-radius : value  value ; 左上角  右下角

      3)border-radius : value  value  value  value ; 左上角  右上角  右下角  左下角

 

 

注意：若是隻要兩邊變圓，則value取高的通常像素 

　　　　     

　　

　　 四、陰影  

　　　　　　盒陰影：

　　　　　　　　box-shadow :     水平方向的位置              垂直方向的位置            模糊度                         擴展值                  顏色                 陰影位置;

                                                 (正右偏，負左偏)                 (正下，負上)                 (正值，值越大越模糊)　　   (正變大，負變小)                                   (默認值是外陰影outset ，也能夠設置爲內陰影);

 　　　　　 字陰影：

　　　　　　　　text-shadow :     水平方向的位置             垂直方向的位置            模糊度                         顏色;  

　　　　　　　　　　　　　　　　 (正右偏，負左偏)                 (正下，負上)                (正值，值越大越模糊）  

 

　注意：a、若是要左右和下邊有陰影，則,如：box-shadow:0  15px  30px ;(下邊有陰影，左右淡色陰影經過模糊度撐開)

　　　　　　　　　　　　　　　　　　

　　  

　　　   b、若是box-shadow:0 0 30px rgba(0,0,0,.2); ，則水平和垂直都沒有，四周淡色陰影由模糊度撐開

　　　　　　                                                

 

       五、2D轉換（transform）:使元素在形狀上或者位置上發生必定的改變

　　　　(有時若是須要動畫的元素須要進行變換，建議把該元素進行脫離文檔流)

　　  

　　　　位移

　　　　（1）Transform:translate(x,y)         x取正值朝右邊移動，y取正值朝下移動（當translate中只取一個值，表明水平方向,正右，負左）

            （2）Transform:translateX(30px)   向右移動30px

            （3）Transform:translateY(30px)   向下移動30px

 

　　　　旋轉

　　 （1）transform:rotate(60deg);裏面填度數，單位是deg，取正值順時針旋轉，取負值逆時針旋轉

　　　　（注意：旋轉會旋轉整個座標軸，默認旋轉的中心點是整個形狀的中心，即寬高的一半。能夠修改默認的旋轉中心點，經過transform-origin:left top;修改中心點）

　　　　（2）transform:translate(20px,20px)   rotate(60deg); 先位移再旋轉

　　　　　　　　

　　　　　　transform:translate(20px,20px)  rotate(60deg); 先旋轉在位移

　　　　　　　　

　　　　　　上述區別總結：旋轉會旋轉整個座標軸（通常狀況，若是要旋轉，把旋轉寫在位移的後面）

　　　　　　　　

　　　　

　　　　（3）transform:rotateX(60deg) 指繞着水平X軸旋轉

　　　　（4）transform:rotateY(60deg) 指繞着垂直Y軸旋轉

 

　　　　縮放 　　

　　　　（1）transform : scale(x,y) ;             取值0~1縮小，>1放大，當其中放一個值時等比例縮放

            （2）transform : scaleX() ;              水平方向上的縮放

            （3）transform : scaleY() ;              垂直方向上的縮放

 

 　　　　傾斜

　　　　（1）transform : skewX(30deg) ;

　　　　（2）transform : skewY(30deg) ;

　　　　（3）transform : skew(xdeg,ydeg) ;      取一個值表明水平方向，兩個值表明水平盒垂直

 

  　　六、背景漸變

　　　　（1）線性漸變

　　　　　　background: linear-gradient(to top,red,yellow);

          如：

　　　　　background:linear-gradient(red , pink , palegreen , paleturquoise);  默認由上向下

               background:linear-gradient(to right , red , pink , palegreen , paleturquoise ); 朝右

               background:linear-gradient(to right bottom , red , pink , palegreen , paleturquoise); 朝右下

　　　　　　

　　　　 （2）徑向漸變

　　　　　　background: radial-gradient(top,circle,red,yellow);

　　　如：

　　　　  background: radial-gradient(red,pink,palegreen,paleturquoise);  默認由中心向周圍

         　  background:-webkit-radial-gradient(top,red,pink,palegreen,paleturquoise);由上向周圍

　　　　　　

　　　　background:-webkit-radial-gradient(top left,red,pink,palegreen,paleturquoise);由左上向周圍

　　　　　　

　　　　background:-webkit-radial-gradient(top left, circle，red,pink,palegreen,paleturquoise); 由左上向周圍，漸變形狀爲圓

 

　　   七、過渡

          特色：一、指經過觸發事件從一種樣式平滑的過渡到另一種樣式（觸發事件，如：點擊，懸浮等）

　　　　　　 二、只能作點到點的簡單動畫

　　　

　　　 語法：

　　　 　　簡寫：transition : 過渡的屬性   過渡的持續時間   過渡的速度變換類型   過渡延遲 ；

            　　                            顏色                     ms/s                     linear (勻速)                             ms/s

　　　　　　　　　　　　　　　 數值（寬高....）                                  ease（默認值，先加速後減速）

　　　　　　　　　　　　　　　 陰影                                                 ease-in（加速效果）

                    　　                    轉換（transform）                              ease-out（減速效果）

                         　　               背景漸變                                            ease-in-out（先加速後減速）

　　

　　　　        　　  如：transition : all 1s   (這裏的all指全部須要變換後的屬性)                 這句寫在須要調用過渡的CSS樣式中

 

　　　　　　屬性單寫：

　　　　　　　　　　transition-property:;

　　　　　　　　　　transition-duration:;

 　　　　　　　　　  transition-timing-function:;

　　　　　　　　　　transition-delay:;

 

　　　　八、animation動畫：經過控制每一幀，能夠製做複雜動畫

 

 

　　　　（1）設置動畫

　　　　語法：

            　　@keyframes name（自定義）{

              　　                    from/ 0%{

          　　　　　　　　　　　　 Css樣式

　　　　　　　　　　　　　}

  

　　　　　　　　　　　　　percent{

              　　                          Css樣式

 　　　　　　　　　　　　　}

 

　　　　　　　　　　　　　to/100%{

           　　　　　　　　　　　　Css樣式

 　　　　　　　　　　　　　}

　　　　　　　　}

 

　　　　　 (2）調用動畫           （在想調用動畫的樣式中添加）

　　　　  語法：

 

 　　　　　　簡寫：animation  : 動畫名字       　　 動畫持續時間        速度變化類型　　          播放次數       　　  播放方向        forward ；

 　　　　　　　　　　　　　　　name           　　 s/m                    linear            　　         number                alternate        動畫停在最後一幀,否則默認值停回初始狀態

                                                                                         　　  ease                　　      infinite(無限)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ease-in

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ease-out

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ease-in-out

　　　　　　屬性單寫：

　　　　　　　　　　

 

2、CSS Hack（主要針對IE版本瀏覽器）

　　優勢：解決CSS樣式兼容IE低版本問題，低版本的IE瀏覽器，如IE六、IE七、IE8

　　缺點：大規模使用CSS Hack會帶來維護成本的提升以及瀏覽器版本變化而帶來相似Hack失效等系列問題，即對當前版本起做用的hack，也許升級一下，界面又亂了

　　　　（即儘可能找通用方法，減小使用CSS Hack）

 

　　一、條件註釋：

（1）<!--[if IE 9]>

　　　　<style>

　　　　　　div{ color : blue }               //在IE9下，字體顏色爲藍色

　　　　</style>        

　　<![endif]-->

 

（2）<!--[if IE]>

　　　　<p>只能在IE瀏覽器上看見這段文字</p>           //只能在IE瀏覽器上看見這段文字

　　 <![endif]-->

 

（3）<!--[if gt IE 6]>

　　　　<style>

　　　　　　<span>這段文字只能在大於IE6版本上出現</span>         //<span>這段文字只能在大於IE6版本上出現</span>

　　　　</style>

　　<![endif]-->

 

 

總結上述：

　　條件註釋的語法：<!--[if  條件]>               

　　　　　　　　　　　　　　代碼塊；

　　　　　　　　　　<![endif]-->　　

 

其中「條件符號」有：

大於    gt  

大於等於    gte

小於    lt

小於等於    lte

非指定版本    ！

 

　　二、屬性先後綴：

(1)」_」減號是IE6專有的hack

(2)」\9」IE6/IE7/IE8/IE9/IE10都生效

(3)」\0」IE8/IE9/IE10都生效，是IE8/9/10的hack

(4)」\9\0」只對IE9/IE10生效，IE9/10的hack

 

 

設定優先級最高 , 在後面加上!important：如background-color:red !important;

 

 

3、媒體查詢（以原生代碼寫響應式佈局，編寫一次代碼適應於多屏幕尺寸終端）

　　　　

 

　　　　實例：

　　　　　　注意：在頭部加入<meta name=」viewport」 content=」device-width , initial-scale=1」>

　　　　　　　　(爲了使電腦上的Chrome或者其餘瀏覽器可以支持手機模式，否則只支持pad端)

 

　　　　<head>

　　　　　　<style>

  　　　　         /*PC端開始*/

     　　　　      @media screen and (min-width:992px){

               　　      body{

　　　　　　　　　　　　　　background-color:pink;　　          　　                                

　　　　　　　　　　　　}

　　　　　　　　　　 }

           　　　　/*PC端結束*/

 

          　　　　 /*iPad端開始*/

          　　　　 @media screen and (min-width:769px) and (max-width:992px){

                    　　 body{

                                    　　background-color:purple;      

　　　　　　　　　　　　}

 　　　　　　　　　　}

           　　　　/*iPad端結束*/

 

          　　　　 /*移動端開始*/

         　　　　  @media screen and (max-width:768px){

                  　　   body{

                          　　　　    background-color:blue;　　                

　　　　　　　　　　　  }

　　　　　　　　　　}

           　　　　/*移動端結束*/

　　　　　　</style>

　　　　</head>

 

書寫規則：

    在書寫響應式佈局中，寬度儘可能用百分比表示（以方便各類屏幕大小的比例），高度視狀況而定。在開始書寫響應式佈局時，首先按照PC頁面的比例開始編寫，書寫完PC端佈局以後，將移動端，pad端和PC端顯示中有區別部分的代碼段，分別放入各自的@media中，通過各自需求的更改，就完成了。

 　　　

 

 

4、其餘

一、懸浮圖標顯示

　　cursor : pointer ;      把鼠標箭頭圖標顯示轉換成小手圖標顯示

　　cursor : wait ;          把鼠標箭頭圖標顯示轉換成等待的圓圈圖標顯示

 

二、字體圖標

（1）藉助阿里巴巴矢量圖庫

           第一步：將須要的圖標加入購物車；

           第二步：對購物車中的圖標點擊「下載代碼」，得到壓縮包；

           第三步：打開壓縮包以後，選取「iconfont.css , iconfont.eot , iconfont.svg , iconfont.ttf

iconfont.woff , demo_unicode.html」放入項目的css文件夾（其中以.woff .ttf .svg . eot爲後綴的文件，是爲了兼容各個瀏覽器的）

           第四步：引入時在head中加入<link rel=」stylesheet」 href=」url」>

           如：<i class=」iconfont」>十六進制</i>