css實(shí)現(xiàn)網(wǎng)站通用頭部

行效果

通用網(wǎng)站頭部

技術(shù)要點(diǎn)

浮動(dòng) float: left;浮動(dòng)是不占用原有位置的，俗稱脫標(biāo)，還有浮動(dòng)的盒子，一浮全浮
浮動(dòng)會(huì)造盒子的塌陷，解決方案有以下方法：

（1）使用clear:both清除浮動(dòng)

在代碼中在放一個(gè)空的div標(biāo)簽，然后給這個(gè)標(biāo)簽設(shè)置clear:both來清除浮動(dòng)對(duì)頁(yè)面的影響。它的優(yōu)點(diǎn)是簡(jiǎn)單，方便兼容性好，但是一般情況下不建議使用該方法，因?yàn)闀?huì)造成結(jié)構(gòu)混亂，不利于后期維護(hù)

（2）利用偽元素clearfix來清除浮動(dòng)

給父級(jí)元素添加了一個(gè):after偽元素，通過清除偽元素的浮動(dòng)，達(dá)到撐起父元素高度的目的

.clearfix:after{

content:"";

display:block;

visibility:hidden;

clear:both;

}

gt;>>通用hack方法篇<<<

最近看到淘寶已經(jīng)放棄IE8了，瞬間樂了，但是轉(zhuǎn)瞬一想，自己還在苦逼的兼容著IE6，頓時(shí)心灰意冷，生無可戀啊！沒有IE就沒有傷害！在此衷心起到IE6/7/8早日被拋棄，還世界一片安寧！

言歸正傳，這次是想把自己整理的一些瀏覽器兼容方案post上來，希望可以幫到一些和我一樣苦逼兼容著IE6的伙伴。

一些通用的hack方法

這邊主要簡(jiǎn)單的講述一些瀏覽器的hack方法，至于具體的兼容問題，后面再一一講解。

CSS hack和filter原理

利用瀏覽器自身的bug來實(shí)現(xiàn)特定瀏覽器的樣式
利用瀏覽器對(duì)CSS的完善度來實(shí)現(xiàn)，例如某些CSS規(guī)則或語(yǔ)法的支持程度，原理類似目前我們經(jīng)常使用的 -wekit-　之類的屬性；

IE條件注釋

IE的條件注釋僅僅針對(duì)IE瀏覽器，對(duì)其他瀏覽器無效；例如下面的語(yǔ)法：

!important 關(guān)鍵字

!important 在css中是聲明擁有最高優(yōu)先級(jí)，也就是說，不管css的其他優(yōu)先級(jí)，只要!important出現(xiàn)，他的優(yōu)先級(jí)就最高！遨游1.6及更低版本、IE6及更低版本瀏覽器不能識(shí)別它。盡管這個(gè)!important 很實(shí)用，但是非到必要的時(shí)刻，不要使用它！

屬性過濾器（較為常用的hack方法）

針對(duì)不同的IE瀏覽器，可以使用不同的字符來讓特定的版本的IE瀏覽器進(jìn)行樣式控制。

至于一些的關(guān)于屬性選擇器的過濾的方法這邊就不再介紹了，因?yàn)檫@些都沒有必要了，我想不到還有哪些喪心病狂的項(xiàng)目會(huì)要求兼容到IE6以下或者更低的了！

IE hack寫法一覽

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>CSS兼容方案篇<<<

上一篇文章介紹了一些常用hack方法，這次來講一些之前遇到過或者嘗試過的一些CSS兼容問題與解決問題，這些是自己的一些收集整理，肯定不可能大而全，只是一些比較常見的問題，等我整理下，下次來寫篇JS的兼容問題。

另外，如果你是一位幸運(yùn)的朋友（不用兼容低版本IE），那么你也沒有必要看這篇文章了。

a標(biāo)簽CSS順序

很多新人在寫a標(biāo)簽的樣式，會(huì)疑惑為什么寫的樣式?jīng)]有效果，其實(shí)只是寫的樣式被覆蓋了，正確的a標(biāo)簽順序應(yīng)該：

link
visited
hover
active

24位的png圖片

IE6不支持透明咋辦？使用png透明圖片唄，但是需要注意的是24位的PNG圖片在IE6是不支持的，解決方案有兩種：

使用8位的PNG圖片
為IE6準(zhǔn)備一套特殊的圖片

透明度

opacity: 0.8; //通用
filter: alpha(opacity=80); //IE
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80); //IE6的寫法

如果你不需要兼容IE6，那么你可以甩掉那又臭又長(zhǎng)的裹腳布了，反正我是記不住IE6的透明度寫法，別懷疑，剛網(wǎng)上找的.

IE6雙邊距

行內(nèi)屬性設(shè)置了塊級(jí)屬性（display: block;）后，會(huì)產(chǎn)生雙倍邊距。

解決方案是在添加一個(gè) display: inline; 或者 display: table;

雙倍margin

浮動(dòng)元素設(shè)置了margin在IE6下會(huì)產(chǎn)生雙倍margin。

只要給浮動(dòng)元素設(shè)置 display: inline;就可以了。或者說使用IE6的hack：_margin；

min-height的兼容寫法

.divBox{min-height:200px;height:auto!important;height:200px;overflow:visible;}

IE6最小寬度（反正我沒實(shí)踐過？！）

.divBox{min-width:600px;_width:expression(document.body.clientWidth<600?"600px":"auto");}

盒模型差異

IE盒模型：margin 、 content（包含border、padding）

W3C盒模型： margin 、border、 padding、 content

CSS3中的box-sizing的屬性就是為了這兩種模式，border-box（IE盒明星）和content-box（W3C）

img標(biāo)簽-圖片存在邊距

使用 vertical-align 屬性可以清楚這種邊距

順便說下a標(biāo)簽同樣會(huì)存在邊距，具體的解決方法可以看看去除inline-block元素間間距的N種方法;

IE6 高度無法小于10px

添加overflow的屬性
設(shè)置font-size的屬性為高度的大小

雙倍float

.divBox{float:left;width:100px;margin:000100px;//這種情況之下IE會(huì)產(chǎn)生200px的距離display:inline;//使浮動(dòng)忽略}

ul列表邊距屬性不統(tǒng)一

IE下 ul的邊距是使用margin
firefox下ul的邊距是使用padding
重置CSS基本樣式，統(tǒng)一使用margin或者padding

IE6下select元素顯示bug

select元素在IE6下是以窗口的形式展現(xiàn)的，所以在你需要彈出一個(gè)提示框（modal）的時(shí)候，你會(huì)發(fā)現(xiàn)select在modal的上面，無論你設(shè)置多大z-index都無效。解決的方法也很簡(jiǎn)單，利用一個(gè)透明的iframe蓋住select就可以了

<divclass=””wrapper>//TODO;</div>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

js兼容方案篇

js兼容性方案如期而至，雖然現(xiàn)在有了前端框架和各種庫(kù)已經(jīng)幫我們解決了各種兼容問題，或是現(xiàn)代瀏覽器已經(jīng)不需要考慮這些繁瑣的兼容性，但是我們還是有必要了解下這些兼容問題,畢竟有些時(shí)候我們還是需要原生JavaScript來實(shí)現(xiàn)我們的功能，或是需要兼容至萬(wàn)惡的IE6（例如苦逼的我）。

以下的所說的瀏覽器都是特指低版本瀏覽器，畢竟現(xiàn)代瀏覽器已經(jīng)很少有兼容性問題了

document.formName.item()

document.formName.item(”itemName”);//IE支持document.formName.elements["elementName"];//均支持

獲取屬性

根據(jù)很多的人的反饋來看，無論是常規(guī)的獲取自定義屬性，或是jq的attr()在不同的環(huán)境下都是存在著些許兼容性問題，所以為了保險(xiǎn)起見，最好是使用原生的getAttribute()來獲取屬性；

在IE下，我們是可以通過document.idName來獲取元素，但是Firefox是不允許的。

而且Firefox中我們使用與html對(duì)象ID相同的變量名，所以，獲取元素最好使用document.getElementById(”idName”) 代替 document.idName，避免不必要的bug

input.type

IE下不允許修改input的類型，F(xiàn)irefox可以修改。盡量避免修改input的類型。

setattribute

object.setAttribute("class","style");//在IE8、Chrome、火狐、Opera10中都能設(shè)置成功；但是在IE7下無法設(shè)置。object.setAttribute("className","className");//只有IE7能設(shè)置成功，但是其他瀏覽器均無法設(shè)置。

統(tǒng)一使用 object.className=”content”

style與cssText

object.setAttribute("style","width:100px;height:200px");//在IE8、Chrome、火狐、Opera10中都能設(shè)置成功；但是在IE7下無法設(shè)置。object.setAttribute("cssText","width:100px;height:200px");//所有瀏覽器均不支持。object.style.cssText="width:100px;height:200px";//統(tǒng)一使用如上方法

indexof()

IE8以下不兼容indexof()方法, 添加indexof的原型方法即可；

if(!Array.prototype.indexOf){Array.prototype.indexOf=function(elt){varlen=this.length>>>0;varfrom=Number(arguments[1])||0;from=(from<0)?Math.ceil(from):Math.floor(from);if(from<0){from+=len;}for(;from<len;from++){if(frominthis&&this[from]===elt){returnfrom;}}return-1;};}

event.srcElement

IE下，even不存在target屬性

srcObj=event.srcElement?event.srcElement:event.target;

父節(jié)點(diǎn)parentElement

ele.parentElement//firebox不支持ele.parentNode//通用

table使用innerHtml

在IE中使用innerHtml和appendChild無效，解決方法是將內(nèi)容插入到tbody中

varrow=document.createElement("tr");varcell=document.createElement("td");varcell_text=document.createTextNode("插入的內(nèi)容");cell.appendChild(cell_text);row.appendChild(cell);document.getElementsByTagName("tbody")[0].appendChild(row);

移除節(jié)點(diǎn)

removeNode();//firebox不支持removeChild();//通用，取上一層父節(jié)點(diǎn)再移除子節(jié)點(diǎn)

坐標(biāo)

varpage={};page.x=event.x?event.x:event.pageX;page.y=event.y?event.y:event.pageY;//event的x,y在IE中支持，pageX和pageY在Firefox中支持

事件監(jiān)聽

functionaddEvent(elem,eventName,handler){　　if(elem.attachEvent){　　　　elem.attachEvent("on"+eventName,function(){　　　　　　handler.call(elem)});　//此處使用回調(diào)函數(shù)call()，讓this指向elem　　}elseif(elem.addEventListener){　　elem.addEventListener(eventName,handler,false);　　}}functionremoveEvent(elem,eventName,handler){if(elem.detachEvent){　　elem.detachEvent("on"+eventName,function(){　　　handler.call(elem)});　　　　//此處使用回調(diào)函數(shù)call()，讓this指向elem　　}elseif(elem.removeEventListener){　　elem.removeEventListener(eventName,handler,false);　　}}//IE提供了attachEvent和detachEvent兩個(gè)接口，而Firefox提供的是addEventListener和removeEventListener。

鍵盤事件 keyCode

functiongetKeyCode(e){//兼容IE和Firefox獲得keyBoardEvent對(duì)象e=e?e:(window.event?window.event:"")//兼容IE和Firefox獲得keyBoardEvent對(duì)象的鍵值returne.keyCode?e.keyCode:e.which;}//IE：e.keyCode//fireFox:e.which

家好，今天給大家介紹一款，簡(jiǎn)單的教育網(wǎng)站通用登錄頁(yè)面html前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

加入了輸入驗(yàn)證（圖2）

圖2

響應(yīng)式設(shè)計(jì)，適合各種分辨率（圖3）

圖3

代碼完整，需要的朋友可以下載學(xué)習(xí)（圖4）

圖4

本源碼編碼：10171，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10171，即可獲取。

就愛UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴

在線咨詢

上一篇：JavaScript中DOM：document（網(wǎng)頁(yè)
下一篇：硬盤溫度過高怎么辦

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商