
E1>E2選擇父元素為E元素的所有E2元素(子類選擇器)
E1+E2選擇元素為E1之后的所有E2元素(兄弟選擇器)
E[attr]只使用屬性名,但沒有確定任何屬性值
E[attr="value"]指定屬性名,並指定了該屬性的屬性值
E[attr~="value"]指定屬性名,並且具有屬性值,此屬性值是一個詞列表,並且以空格隔開,其中詞列表中包含了一個value詞,而且等號前面的“〜”不能不寫
E[attr^="value"]指定了屬性名,並且有屬性值,屬性值是以value開頭的
E[attr$="value"]指定了屬性名,並且有屬性值,而且屬性值是以value結束的
E[attr*="value"]指定了屬性名,並且有屬性值,而且屬值中包含了value(字符串查找的方式)
E[attr|=“value”]指定了屬性名,並且屬性值是value或者以“value-”開頭的值(比如說zh-cn) 不能是詞列表(如:dd b-leo或者dd b)

E:nth-child(n) 表示找到E的父級中的第n個子節點E E:nth-child(odd){background:red}/*匹配奇數行*/ E:nth-child(even){background:red}/*匹配偶數行*/ 標簽 *:nth-child(n);/*找標簽下第N個元素*/ E:nth-child(2n){background:red} /*n為0-無窮大 E:nth-last-child(n) 表示找到E父級中的第n個字節點,從后向前計算 E:nth-of-type(n) 表示找到E父級中的第n個字節點,且類型為E. E為這類集合,然后在集合中找第n的元素 E:nth-last-of-type(n)表示找到E父級中的第n個字節點,且類型為E,從后向前計算 E:empty 表示找到E元素中沒有子節點。注意:子節點包含文本節點 E:first-child 表示找到E父級中的第一個子節點 =>nth-child(1) E:last-child 表示找到E父級中的最后一個子節點 =>nth-last-child(1) E:first-of-type 表示找到E父級中的第一個子節點且節點類型是E的 =>nth-of-type(1) E:last-of-type 表示找到E父級中的最后一個子節點且節點類型是E的 =>nth-last-of-type(1) E:only-child表示找到E元素中只有一個子節點。注意:子節點不包含文本節點 E:only-of-type 表示找到E的父級中只有一個子節點,且這個唯一的子節點的類型必須是E。注意:子節點不包含文本節點

E:target 表示當前的URL片段的元素類型,這個元素必須是E (如:div:target{ display:block;}) E:target 表示當前的URL的Hash,這個元素必須是E (如:div:target{ display:block;}) E:disabled 表示不可點擊的表單控件 E:enabled 表示可點擊、編輯的表單控件 E:checked 表示已選中的checkbox或radio E:first-line 表示E元素中的第一行 E:first-letter 表示E元素中的第一個字符 E::selection表示E元素在用戶選中文字時觸發 E::before 生成內容在E元素前 E::after 生成內容在E元素后 E:not(s) 表示E元素不被匹配s元素; 通常是.類名如:(p:not(.cc)) E~F表示E元素毗鄰的F元素 Content 屬性,其常結合after、before使用。

direction:rtl;unicode-bidi:bidi-override; 文字排版(rtl右至左)
-webkit-text-stroke:3px red; 文字描邊
white-space:nowrap; 文字超出不換行

1、彈性盒模型:
注意在使用彈性盒模型的時候 父元素必須要加display:box 或 display:inline-box
Box-orient 定義盒模型的布局方向
Horizontal 水平顯示
vertical 垂直方向
box-direction 元素排列順序
Normal 正序
Reverse 反序
box-ordinal-group 設置元素的具體位置(如1、2...)
Box-flex 定義盒子的彈性空間大小
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和
box-pack 對盒子富余的空間進行管理
Start 所有子元素在盒子左側顯示,富余空間在右側
End 所有子元素在盒子右側顯示,富余空間在左側
Center 所有子元素居中
Justify 富余空間在子元素之間平均分布
box-align 在垂直方向上對元素的位置進行管理
Star 所有子元素在據頂
End 所有子元素在據底
Center 所有子元素居中
2、盒模型陰影:
box-shadow:[inset] x y blur [spread] color
參數
inset:內投影
不給:外投影
x、y:陰影偏移
blur:模糊半徑
spread:擴展陰影半徑(先擴展原有形狀,再開始陰影)
color
3、其他盒模型新增屬性:
box-reflect 倒影
方向 above(頂)|below(底)|left|right;
距離(可選)
漸變(可選)-webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%)
resize 自由縮放
Both 水平垂直都可以縮放
Horizontal 只有水平方向可以縮放
Vertical 只有垂直方向可以縮放
注意:一定要配合overflow:auto 一塊使用才可以縮放
box-sizing 盒模型解析模式
Content-box 標准盒模型
盒模型的寬高=border+padding+content(width|height)
Border-box 怪異盒模型 width/height=content
盒模型的寬高=width/height
Content的寬高=width/height-border-padding
4、Css3分欄布局:
column-width 欄目寬度
column-count 欄目列數
column-gap 欄目距離
column-rule 欄目間隔線
寬度、內容都是平均分配

響應式布局:
1、媒體類型
all 所有媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection 打印預覽
screen 彩屏設備(常用)
speech '聽覺'類似的媒體類型
tty 不適用像素的設備
tv 電視
2、關鍵字
And 條件同時成立
not not關鍵字是用來排除某種制定的媒體類型
only only用來指定某種特定的媒體類型
3、媒體特性
(max-width:600px)
(max-device-width: 480px) 設備輸出寬度
(orientation:portrait) 豎屏
(orientation:landscape) 橫屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 設備像素比 window.devicePixelRatio = 物理像素 / dips
4、樣式引入方式(三種)
(1)、<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 800px)">
(2)、@import url("css/reset.css") screen;
(3)、@media screen [and 條件]{ 選擇器{ 屬性:屬性值; } } 5、樣式引入舉例 <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”> @media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}} ----------------------------------------------------------------------------------- <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 800px)"> <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> <link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (max-width: 600px)"> ----------------------------------------------------------------------------------- 6、移動端meta <meta name="viewport" content="" /> width [pixel_value | device-height] height [pixel_value | device-height] user-scalable 是否允許縮放 (no||yes) initial-scale 初始比例 minimum-scale 允許縮放的最小比例 maximum-scale 允許縮放的最大比例 target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

indexa.css代碼如下:
@charset "utf-8";
/* CSS Document */ .wrap{border:1px solid #000; font:14px/28px "宋體";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;} indexb.css代碼如下: @charset "utf-8"; /* CSS Document */ .wrap{border:1px solid #000; font:16px/28px "宋體";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;} indexc.css代碼如下: @charset "utf-8"; /* CSS Document */ .wrap{border:1px solid #000; font:16px/28px "宋體";color:#000; text-indent:2em;} 具體實例1: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <!--重要部分--> <link rel="stylesheet" type="text/css" href="indexa.css" media="screen and (min-width:800px)"> <link rel="stylesheet" type="text/css" href="indexb.css" media="screen and (min-width:400px) and (max-width: 800px)"> <link rel="stylesheet" type="text/css" href="indexc.css" media="screen and (max-width: 400px)"> </head> <body> <div class="wrap"> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> </div> </body> </html> 具體實例2: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <link rel="stylesheet" media="all and (orientation:portrait)" href="indexb.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="indexa.css"> </head> <body> <div class="wrap"> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> </div> </body> </html> 具體實例3: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <style> @media screen and (min-width:800px) { .wrap{border:1px solid #000; font:14px/28px "宋體";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;} } @import url("indexc.css") screen and (min-width:400px) and (max-width:800px); @media screen and (max-width:400px) { .wrap{border:1px solid #000; font:16px/28px "宋體";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;} } </style> </head> <body> <div class="wrap"> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> <p>按照淘寶首頁的無縫圖片切換做:第一張和最后一張復制,打開瀏覽器時ul的left是-520,然后走完最后一張,ul的left是-1040。這樣實現無縫切換,我就是卡在這里了,它這么樣實現到最后一個還是順着到-1040,保證不是倒 ...</p> </div> </body> </html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
@font-face { font-family: 'ff'; src: url('1-webfont.eot'); src: url('1-webfont.eot?#iefix') format('embedded-opentype'), url('1-webfont.woff') format('woff'), url('1-webfont.ttf') format('truetype'), url('1-webfont.svg#untitledregular') format('svg'); font-weight: normal; font-style: normal; } #wrap{width:600px;margin:0 auto; position:relative;} #wrap label{float:left;margin:0 5px;} #wrap label span:nth-of-type(1){float:left;height:30px;background:#f60; font:14px/30px "宋體"; color:#fff;padding:0 10px; transition:.3s;} #wrap label span:nth-of-type(1):hover{ background:green;} #wrap label i{ font:30px "ff"; padding:0 5px; vertical-align:middle;} #wrap label span:nth-of-type(2){ position:absolute;left:0;top:30px;border:1px solid #000;height:300px; opacity:0;z-index:1;padding:10px; font:12px/24px "宋體";color:rgba(0,0,0,1);transition:2s;text-shadow:0 0 30px rgba(0,0,0,1); color:rgba(0,0,0,0);} #wrap input{ position:absolute;top:-50px;} #wrap input:checked~span:nth-of-type(1){background:green;} #wrap input:checked~span:nth-of-type(2){ z-index:2;opacity:1; text-shadow:0 0 0 rgba(0,0,0,0); color:rgba(0,0,0,1);} </style> </head> <body> <div id="wrap"> <label> <input id="btn1" type="radio" name="btns" checked /> <span><i>0</i>dddd簡介</span> <span>ddddddddddd3423432432432542532ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br /> 目前主要針對的更多驚喜。</span> </label> <label> <input id="btn1" type="radio" name="btns" /> <span><i>1</i>dddffd</span> <span>sfsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsdfsfsf</span> </label> <label> <input id="btn1" type="radio" name="btns" /> <span><i>2</i>fdgfd</span> <span>sfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsf</span> </label> <label> <input id="btn1" type="radio" name="btns" /> <span><i>3</i>sfdsf</span> <span>sfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsf</span> </label> </div> </body> </html>

.overimg{
position: relative;
display: block;
/* overflow: hidden; */
box-shadow: 0 0 10px #000;
width:1083px; height:335px;
overflow:hidden;
}
.light{
cursor:pointer;
position: absolute;
left: -1083px;
top: 0;
width: 1083px;
height: 335px;
background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));
background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
/**************此位置可變****************/
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}
.overimg:hover .light{
left:1083px;
}

#lightbox { background: white;border: 20px solid rgba(0,0,0,0.5); width:200px; height:100px; margin:300px auto; position:absolute; top:50%; left:30%; border-radius:20px; box-shadow:0 0 3px 3px rgba(0,0,0,0.5);}
#lightbox { -moz-background-clip: border; /* Firefox 3.6 */
-webkit-background-clip: border; /* Safari 4? Chrome 6? */
background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: content-box; /* Firefox 3.6 */
-webkit-background-clip: content-box; /* Safari 4? Chrome 6? */
background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}