1. web前端工程師工作中遇到難以解決的問題
1).margin-top,margin-bottom不能正常顯示時
一.有時會遇到外層中的子層使用margin-top不管用的情況;這里我們需要在子層的前後加上一個
div{height:0;overflow:hidden;}
例
CSS樣式表中:
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解決方法:在P標簽前後各加2個空的div:<divstyle="height:0;overflow:hidden"></div>
二.網頁中頭部,中部,底部的居底部有時給個margin-bottom:10px;不管用也是要給個清除屬性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加個<div></div>
2).div層中高度自適應問題
網頁前端科技人員在設計網頁時不可能知道客戶在要他們自己的網站內容頁里加多少文字或圖片內容
這時我們就不能規定div層的高度,為此應寫成min-height:200px;height:auto!important;height:
200px;overflow:visible;這樣ie7,ff,ie6瀏覽器的高度自適應問題就解決了,這些在
http://www.xueshengshu.com/網站中用到最多了。
3).div層中子層的居底部對齊問題
div中的定位問題有很多也很麻煩,但弄懂了就OK了,在一個大的div層中如何讓子層的內容居底部
對齊就涉及到了position定位問題;
例
div層#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子層#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近寫的網站中http://www.msgc.net.cn/就用到了
4).div層中清除clear屬性的一小部分應用
在div中一個大的層裡面有很多子層,若是加上邊框在ie7、ie6中或許會正常顯示,但是在ff中可能
只會成一條線了,此時在最外層的後面加上<div style="clear:both"></div>或者設 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}後在每個浮動外框調用wrapfix;http://www.xueshengshu.com學生書網里用到最多了。
5).解決IE8下div移位、錯位等兼容性問題
在<head>標簽後面的第一句話加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6).單行文字居中與字體樣式問題
在div中一個層中只有一行文字,要讓這層中的文字居中,可設line-height的高度和層的高度一樣,注意這一層中的文字不能換行,此外,設了line-height時再給定字體樣式font:bold 14px "宋體";這時要把font:bold 14px "宋體";放在line-height的前面,否則字體樣式不顯示文字也不居中;或者將font:bold 14px "宋體";改成font-size:16px;font-weight:bold;font-family:"宋體";就OK了。
7).滑鼠滑上去的特殊效果
往往為了達到顯眼的效果,我們會寫到一些好看的效果,方法一在樣式表中寫:ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul標簽中調用即可方法二:在樣式表中寫上:.hover img{filter:alpha(opacity=40);}在div中調用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8).IE6中高度不對問題
今天在div中給定了高度為1px,其它瀏覽器顯示正常,可是ie6中顯示的高度就不對了,這時我給樣式表中加了個font-size:0px;line-height:0px;就好了
9).ul在外框里margin-top不起作用的問題
在div大框子里用了ul作導航的時候為了合ul層居中顯示,設ul的樣式表為margin-top:-15px不起作用了,此時應該將div大框設定高度後給個line-height與height一樣的高度,ul層就自動居中了。
例如http://www.hopes-home.cn/main.aspx
10).ff中margin-top有時不起作用的問題
今天頭暈腦漲的把這問題給解決了,這幾天寫標網都有累似問題,可是一直都是換個寫法解決的,今天的這個辦法也不只可行試試還是可以的,在一個div外框層中給個寬度例如,#div_wrap{width:280px;height:100%;}
其次在這個框子里設一個.div_top{widh:100%;font:bold12px "宋體";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最後在這個div_center里套個ul li時經常會在ff中出問題,也就是在div_top與div_center中莫名的多了幾個像素的空格,這時給ul樣式表設個display:inline-table即可;
11).list-style-image的用法
div中經常用到新聞列表前面有圖標的樣式,有兩種簡單的方法
一.可以寫成ul.menu{width:100%;} ul.menuli{background:url(em_img/small_icon.jpg) 5px center no-repeat;list-style-position:inside;padding-left:18px;}即可在各瀏覽器正常顯示
二. 可以設ul.menu{width:80%;} ul.menuli{list-style-image:url(em_img/small_icon.jpg); }
此時新聞列表前的小圖標即可在ie6,ie7,ie8,ff中都正常顯示但,ie6需要不斷的刷新才能正常顯示小圖標;
12).
IE6 li:hover兼容問題
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName_r("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]>
</script>
13).ie6下支持position:absolute;
最近寫一個簡訊平台的頁面用到的底部固定的層,在ff和ie7,ie8下都是好的,可到ie6下就不行了,轉了整個地球終於出來了:
background-attachment:fixed; }
#bottomNav {background-color:#096; z-index:999; position:fixed; bottom:0; left:0;width:100%; _position:absolute;
_top: expression_r(documentElement.scrollTop+ documentElement.clientHeight-this.offsetHeight); overflow:visible; }
樣式表中調用即可!詳細請見「高度自適應屏幕尺寸!」
14).border:none;與border:0;的區別
1.性能差異
【border:0;】把border設為「0」像素雖然在頁面上看不見,但按border默認值理解,瀏覽器依然對border-width/border-color進行了渲染,即已經佔用了內存值。
【border:none;】把border設為「none」即沒有,瀏覽器解析「none」時將不作出渲染動作,即不會消耗內存值。
2.兼容性差異
兼容性差異只針對瀏覽器IE6、IE7與標簽button、input而言,在win、win7、vista 的XP主題下均會出現此情況。
【border:none;】當border為「none」時似乎對IE6/7無效邊框依然存在
【border:0;】當border為「0」時,感覺比「none」更有效,所有瀏覽器都一致把邊框隱藏
總結:
1. 對比border:0;與border:none;之間的區別在於有渲染和沒渲染,感覺他們和display:none;與visibility:hidden;的關系類似,而對於border屬性的渲染性能對比暫時沒找測試的方法,雖然認為他們存在渲染性能上的差異但也只能說是理論上。
2. 如何讓border:none;實現全兼容?只需要在同一選擇符上添加背景屬性即可
對於border:0;與border:none;個人更向於使用,border:none;,因為border:none;畢竟在性能消耗沒有爭議,而且兼容性可用背景屬性解決不足以成為障礙。
15).ie下。png的圖片不會有灰色背景出現
註:首推PNG8,即使在IE6中它的透明背景也能被正確顯示。PNG8使用的技巧是,輸出時把「雜邊」設置為和背景接近的顏色
1.幾經周折終於把ie6下.png有色圖問題解決了,原來IE6.0原本支持png8的索引色透明度,但不支持png或8位以上的alpha 透明度,在IE6.0下,非PNG8格式的透明圖片部分,會顯示為淡淡的灰綠色。在網頁中頭部加個代碼<!--[if IE 6]>
<script type="text/javascript" src="http://zmingcx.com/wp-content/themes/HotNewspro/js/pngfix.js"></script>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->即可!
2. web前端工程師需要掌握哪些技術
1、開發語言
HTML發展歷史有二十多年,歷經多次版本更新,HTML5和CSS3的出現又是一次革新。有些人認為前端開發要掌握的技能簡單,不就是網頁製作嘛。其實不然,web前端需要掌握的核心語言HTML+CSS+JavaScript,JavaScript作為最難的語言之一,許多編程高手也不敢妄自菲薄自封精通。由於JavaScript與html的差異性,以及靜態分開處理的一些好處。在大公司編寫靜態效果和動態效果往往是分開由不同的人完成的。小公司因為需要壓縮成本,就需要每個人會的越多越好,如果你嚮往項目經理發展,能懂一兩門後端語言,絕對是錦上添花。
2、瀏覽器兼容性
互聯網目前主流瀏覽器有IE6/7/8/9,Firefox,Chrome,Opera,Safari,遨遊,包括國內主流的搜狗,騰訊TT,360,the word等等;從內河上講主要有IE的,遨遊版IE,Safari,Firefox以及opera的,這些都是大家常見的,如果你身邊有老網蟲喜歡收藏瀏覽器,你翻翻他的硬碟,相信十幾款肯定是有的。每種內核對代碼的解析是不完全一樣的,即使同樣內核也可能存在很大差異,如IE和遨遊版IE。不說非主流的瀏覽器,就主流的瀏覽器,要做到完全兼容,也並非易事,需要長時間的積累和測試,需要前端開發工程師對前端端開發的熱愛和激情。
目前移動互聯網的發展趨勢也不容小覷,將慢慢占據互聯網的主要份額。移動互聯網最突出的好處是方便和及時,試想一下,走在某地風景很好,拍下來後自 動分享給各路好友,因此手機上的瀏覽器兼容也看刻不容緩,現在手機上的瀏覽器也是紛繁復雜,主流的UCWEB,safari,IE,3G門戶的,以及 symbian低端機的「殘缺兒童」,包括國外流行手機我們不知道的一些瀏覽器,更糟糕的是這些瀏覽器解析因為手機硬體的不同,每個瀏覽器得到的結果都是 完全不同的。
3.hack技術
由於不同的瀏覽器對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,這個時候就需要針對不同的瀏覽器寫不同的CSS,這個過程叫CSS hack。雖然我們寫代碼都要求按照標准,不寫hack代碼,但實際工作中為了兼容主流瀏覽器,hack代碼是免不了的,所以這也應該是每個前端開發人員 必備的技能。
4.業內標准
目前Web前端開發中提到最多的就是W3C標准,這是一系列標準的集合,代表了互聯網發展的方向,也代表了前端開發的一種信仰。寫的代碼都要100%通過標准驗證,為通過標准驗證而感到自豪,會有效推動互聯網的快速發展。
5.開發工具
目前比較流行的是Dreamweaver, 其曾經風靡一時,到現在也沒有退出歷史舞台,證明DW還是有很大優勢的,尤其是針對初學者,其強大的提示功能可以幫助我們很快的熟悉並掌握網頁布局,但現 在更提倡的是純手寫代碼,既體現技能方面的卓越,也可有效避免使用DW等工具產生的冗餘代碼。此外再掌握一些photoshop技能,即使沒有美工,也能 簡單處理一些圖像。
小結,掌握以上技能,可以說你是一個合格的前端開發人員,能夠參與到一個大的項目中,或者自己獨立寫出一個網頁。雖然這看起來和網頁製作設計差不多,從效果上來看,都是製作網頁的,但實際上,技術上所超出的已經是好幾個檔次的東西了。
3. web前端工程師的工作內容怎麼寫
H5e前端html5開發工程師內容
1、 html + css;
2、JavaScript。不是所有的網頁都必須有js,但是要想實現一些超酷的功能和界面的時候,就需要涉及到js。如果沒有其他編程語言的基礎的話,學起來可能要費些力;
3、Photoshop、flash。熟悉會一點兒就行了,沒必要全部都學得精通,當然如果你在學習的過程中,發現你ps或者flash比較感興趣的話,也可以嘗試做美工這一行;
4、html5和css3。可以先了解一下,然後再入手。畢竟IE的瀏覽器大多還不支持;
5、瀏覽器兼容。懂web標准,熟練手寫 xhtml css3 並符合 符合w3c標准。代碼能兼容主流瀏覽器Firfox,Chrome、Safari、IE、Opera。雖然IE6很多都不兼容,但現在還使用的人還是有的;
6、熟悉一門後台編程語言 asp、php、jsp等
4. 前端開發工程師試用期工作總結報告怎麼寫
工作情況概述,工作目標完成情況
工作態度,工作紀律
不足,努力方向
5. web前端工作的主要內容
前端前景是很不錯的,像前端這樣的專業還是一線城市比較好,師資力量跟得上、就業的薪資也是可觀的,學習前端可以按照路線圖的順序,
0基礎學習前端是沒有問題的,關鍵是找到靠譜的前端培訓機構,你可以深度了解機構的口碑情況,問問周圍知道這家機構的人,除了口碑再了解機構的以下幾方面:
1. 師資力量雄厚
要想有1+1>2的實際效果,很關鍵的一點是師資隊伍,你接下來無論是找個工作還是工作中出任哪些的人物角色,都越來越愛你本身的技術專業前端技術性,也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師,一個好的前端培訓機構必須具備雄厚的師資力量。
2. 就業保障完善
實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台,即能夠為你提供良好的就業保障,讓學員能夠學到實在實在的知識,並向前端學員提供一對一的就業指導,確保學員找到自己的心理工作。
3. 學費性價比高
一個好的前端培訓機構肯定能給你帶來1+1>2的效果,如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作,你將獲得比以往更多的投資。
希望你早日學有所成。
6. web前端開發年終總結怎麼寫呀請高手指點。
網上大把的啊,改一改就可以啊
7. web前端工程師的優點和缺點
優點:HTML5APP可以在PC和移動、iOS和Android上運行。
缺點:在對性能要求較高的情況下,或選擇使用本機開發知識。
實現此目的的最佳方法是混合方法,大型框架使用本機、基本功能等,一些模塊使用HTML。Web前端工程師:使用(X)HTML/CSS/JavaScript/Flash等各種Web技術開發的客戶端產品。
Web前端工程師:完成客戶端程序(即瀏覽器端)的開發,開發JavaScript和Flash模塊,結合後台開發技術模擬整體效果,富InternetWeb開發,致力於通過技術提升用戶體驗。
Web前端工程師:對Web2.0、HTML+CSS和瀏覽器兼容性有深刻的理解。了解其他IT編程語言,如PHP、Java、.net和vue。
(7)web前端工程師工作總結擴展閱讀:
掌握以下技術:
1.掌握基本的web前端開發技術:HTML、CSS、JavaScript、DOM、BOM、AJAX等,了解其與不同瀏覽器的兼容性、渲染原理及bug
2.必須具備網站性能優化、SEO和伺服器端開發的基本知識
3.必須學會使用各種web前端開發和測試工具來輔助開發嗎
4.除了技術知識之外,還需要理論知識,包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分層支持
5.未來的web前端開發工程師還將學習HTML5、web視覺設計、網站色彩搭配、網站交互設計模式等相關技術
網路--web前端工程師
8. web前端工程師主要是做什麼
前端開發工程師是互聯網時代軟體產品研發中不可或缺的一種專業研發角色。
從狹義上講,前端工程師使用HTML、CSS、JavaScript等專業技能和工具講產品UI設計稿實現成網站產品,涵蓋用戶PC端,移動端,處理視覺和交互問題。
從廣義上講,所有用戶終端產品與視覺交互有關的部分,都是前端工程師的專業領域。
前端是一個相對較新的行業,互聯網發展早期是沒有專業的前端工程師的。隨著互聯網的發展,大約從2005年開始,正式的前端工程師角色被行業認可,到了2010年,互聯網開始全面進入移動時代,前段工會城市的地位越來越重要,前端領域的技術發展也越來越快,各種新的思想、設計模式、工具和品平台都快速度發展,對前端工程師的技能要求也越來越高。
隨著技術的不斷更新,框架幾乎在很短的時間內就會變換,企業對於前端人才的要求也越來越高,那麼如何才能不被行業所淘汰呢?如何才能立於不敗之地呢?最關鍵的還是要不斷學習,分享一些學習前端的方法,可以參考一下:
1.可以聯系一些有共同目標的人在一起學習,互相分享學習經驗,學習方法。通過總結他人的經驗教訓,摸索出屬於自己的學習方法。
2.可以找一名和自己志趣相投的小夥伴,互相監督,以防止因為自己的懶散導致學習斷斷續續,沒有效果,兩個人可以在監督中互相進步,共同成長。
3.一定要形成每天總結學習內容的習慣,總結自己學到的知識點和需要改進的不足之處,制定適合自己的學習計劃,按時完成計劃。
4.在學習積累到一定程度是,要及時進行實踐。可以多人一起研發項目,在實踐的過程中總結經驗教訓,找到自己的不足之處,加以改進。
5.最後,一定要找到一套適合自己,並且體系完整的學習資料,不要盲目追求數量,要注重質量。
我建立了一個前端的自學團,在自學團里會嚴格監督大家學習打卡,定期分享學習資料,定期組織項目實踐,給大家匹配適合的學習夥伴。想要加入或者了解的話,可以私聊我或是給我留言。
9. web前端工程師是做什麼的前景和薪資待遇如何
1、Web前端工程師,相信大家都不陌生,主要是完成客戶端程序(也就是瀏覽器端)的開發,開發JavaScript以及Flash模塊,同時結合後台開發技術模擬整體效果,進行豐富互聯網的Web開發,致力於通過技術改善用戶體驗。現如今也叫前端工程師。
2、web前端開發常用的軟體有:Sublime Text、Dreamweaver、Visual Studio Code、HBuilder、WebStorm
3、全國
Web前端工程師
全國前端工程師平均工資:¥ 13130/月,取自 154596 份樣本。
全國Web前端開發平均工資:¥ 9390/月,取自 71213 份樣本。
在全國的數據調查中,Web前端工程師與前端工程師的平均薪資相差4000左右。在前端工程師中,20k-30k之間佔比23.1%,10k-15k佔比16.5%,6k-8K佔比15.6%。在Web前端工程師中,20k-30k之間佔比16.5%,6k-8K佔比17.1%,4.5k-6k佔比20%。
4、web前端的技術在不斷的更新,後期肯定要不斷的學習進步地的。相對Java來說,web前端很適合女生來學。web前端語法簡單,非常適合零基礎小白入門。