一些瀏覽器的兼容和雪碧圖的使用
當用li標簽包裹住a標簽,鼠標經過,讓其它元素顯示時。要寫li:hover div{各種樣式}而不能寫ul li a:hover div{各種樣式}
事件代理:為後來添加的元素添加上事件,優化引擎
— Gecko內核 css前綴為"-moz-" 火狐瀏覽器
— Presto內核 css前綴為"-o-" Opera(歐朋)
— Trident內核 css前綴為"-ms-" IE
— WebKit內核 css前綴為“-webkit- safari chrome
用軟件生成一張圖片,會自動告訴你坐標,自己量的時候,是整張雪碧圖的左上角是坐標00 到想用的圖標的左上角 寫XY 但是都是負值寫到background:url(./img/icon.jpg) norepate -X px -Ypx; 然後讓這個小圖標在裏面居中就是加上距離邊的正值,比方說x是55 y是55 取到的圖片是-55px -55px 然後居中比方說在想放的盒子裏距離左邊是8距離上面是10 才會居中,所以X軸坐標變為-55+8=-47px 而Y軸坐標變為-55+10=-45px;註意的一點就是在大圖標定位到這個想要小圖標時候都是負值,然後加上需要顯示位置的正值得到最終位置坐標
PC端的布局形式:
固定寬度且居中
自適應寬度(浮動 、定位)
如果左中右三個浮動的div(也叫雙飛翼布局) 然後把center寫在div的最前面便於顯示;
center:float:left , height:400px;width:100%; padding:0 200px; box-sizing:border-box;
left:float:left; width:200px; position:relative; margin-left:-100%;
right: left:float:left; width:200px; position:relative; margin-left:-200px;
一些瀏覽器的兼容和雪碧圖的使用