大牛們鑒定下我網頁製作的(html Div+css)屬於什麼水平?

專科學歷計算機專業,學校期間學習硬體維修,筆記本,台式機,印表機,顯示器組裝維修(都不精通,皮毛而已),還有網頁製作畢業兩年了,之前工作不是網頁製作這方面的!對網頁製作這方面比較感興趣一直沒有下決心學習,腦袋瓜子不夠聰明也懶惰!最近開始下決心學習這方面東西,模仿了個什麼值得買的網站首頁,除了js的效果我做不出來,其他的只要是html.DIV CSS方面的東西都按照要求仿照下來了,兼容性不好,代碼很亂,DIV層層嵌套弄得腦袋都大了!勉強做出來!(第一次)看著網站的源代碼,慢慢模仿!花了一周時間!也有朋友,說我這方面可以,就是沒有實戰經驗,所以不自信,其實這方面挺簡單的!自己不自信,總感覺不行!看網上招聘這方面要求很多,要有個人作品!有些一看是新手就一口回絕!現在還在家學習著,不知道去應聘可能性大嗎?還是再學習一段時間?我是自學的!看著網上的視頻教程,後盾網的,慕課網這類學習網站!。。。。。。

仿寫什麼值得買首頁!


作為新手,你已經做得非常漂亮了接下來提幾個意見,我們一條一條來梳理

    從第一張圖來看,你似乎是使用了一個div來框住那個"NEW",但是和正品色魔張大媽對比很明顯,你可以嘗試添加一個大約2px的內邊距(padding:2px).然後從你的第二張圖來看,你的連接和紅色按鈕黏在一起了,和正版分開相比,應該差了一個左邊的外邊距(margin-left:5px).建議看一下h5的盒模型原理,適當添加內外編劇會很有利於布局.相關基礎教程可以看

    w3cschool菜鳥教程

  1. 接下來是布局

    暫且不貼原圖了,一個美觀的網站首先要學會對齊.可以看到你在熱門推薦欄目的最左邊和右側小版塊並沒有和最頂端的"首頁","爆料"對齊,也就是說你缺少一個統一的頁面寬度(設定一個統一寬度950px能適應大部分用戶顯示器的顯示,當然如果想更進階一點可以研究一下響應式布局,可以自動的適配屏幕寬度),在這個布局方面,你可以嘗試在右邊所有板塊的父div加上一個靠右浮動(display:reltive;float:right)或者直接通過計算來設定死左右欄目寬度和邊距.這裡相關教程可以看上面那個網站,進階一點可以研究一下bootstrap的流式布局Bootstrap中文網(一個中文教程網站)再高階一點可以看flex-box布局HugeDomains.com(這個網站介紹很友好)
  2. 接下來是文字對齊

    這裡原圖我沒有找到,但正常應該是靠左對齊(我猜?)應該使用文字對齊(text-align:left)
  3. 其他的問題暫時沒有想到,就說一下樓主說的javascript問題.如果想做前端這一行那js是必須要學習的.建議直接買本犀牛書JavaScript學習指南 (豆瓣)(不過貌似新手上來就看著本實在有點嚇人所以其實還可以買JavaScript: The Good Parts (豆瓣)這本,上面那本犀牛書的精簡版略黑色幽默的書).網站的話可以去最上面的那個w3school來看,js這東西講真靠一個手熟.
  4. 如果覺得js直接入門有壓力,可以直接從jquery入手,語法簡單封裝嚴格效果碉堡,同樣可以在http://www.bootcss.com找到入門教程.但是一個好的前端程序員可不能光會用jquery,最後熟悉了玩法還是得好好啃原生javascript

以上


第一次模仿頁面模仿的是百度輸入法,那時候頁面不這樣,不過也差不多,一個nav就把我折騰死,float:left是什麼鬼,padding, margin怎麼用,position的absolute、relative有什麼區別,為什麼我設置了跟別人的效果就是不一樣,其實真的講起來,css方面你需要搞明白的不多

1. display

常用的display就兩種,inline和block,div、p默認是block,span、a默認inline,你試試設置成這倆的東西有什麼區別

2. position

默認static,可以設置的有relative、absolute和fixed,設置成後面3個可以激活top、bottom、left、right屬性,就好像你在地板上鋪積木一樣,放不下就換行唄。

3. 盒模型

從外到內 margin、border、padding,再加上width、height、background,不過這些屬性在display: inline下經常不work,做多了就會區分了

關於box-shadow、border-radius這些,用到自然就知道了,不是重點。

4. font相關

font-size(字型大小)、font-weight(加粗)、font-family(字體)、color(顏色)、line-height(行距,單行時設置成父元素高度可以用來做到在父元素內垂直居中)、text-align(用到的時候都是設置成center,可以做到inline元素水平居中,另外一提,block元素水平居中把margin-left和margin-right設置成auto就可以做到)這些是常用的

5. overflow

常用的有hidden或者scroll或者auto,當你把某個塊級元素(display:block)設定寬或者高,內容多得放不下了咋辦?隱藏還是滾動還是啥?基本這倆夠用了,不夠的時候去百度google一下,你就會學到神奇的css,次數多了就全知道了

6. float

這是個很好用的東西,可以把塊級元素堆積在左邊或者右邊,用完記得clear一下(clear:both)

7. 偽類以及偽動態

:active :hove :focus

靜態頁面我隨便總結了下,大概這些吧,如有遺漏,不好意思。。。。。。歡迎補充。。。我也不知道書上是怎麼說的,不過上面的是我經常用的。

動態頁面需要學習JS,靜態頁面估計你很快就可以搞定,那就學習js和jquery吧,操作dom什麼的,說到底呢還是通過js來改變某些元素的css來實現動態效果。

模仿是沒有用的,重點是要理解!!!理解!!!用上面的知識,不看網頁原代碼,自己寫,分成一塊一塊寫,能寫出來,你就可以去學習JS了


前端要麼你天天寫js 要麼天天搞兼容。做個頁面要ios android 手機平板 外加windows mac 台式電腦支持chrome,firefox,ie。 div 嵌套頭疼說明你還沒習慣。。。習慣了就天天頭疼了。。。

js好好學,學會了再去找工作。js不會我很難想像哪個公司會用你。


曾經我也以為熟練掌握html和css,然後了解一點js就可以統治前端了。後來我發現我錯了,被大廠面試的時候問的絕大多數都是js和演算法相關,要說輕視js是以前的網頁編輯,並不是現在html5的時代。html5之所以現在需求這麼高,絕大多數原因是因為其邏輯可操作性的增強。我希望樓主不要停留在htmlcss實現上沾沾自喜,靜態網頁是被html5時代所拋棄的,而現在靜態網頁也僅僅是前端工程師入門的一小小步。html5時代,前端工程師有著很多的挑戰,做為前端工程師也有責任維持著這個職位團體的技術水平。樓主加油↖(^ω^)↗。


做的怎麼樣,代碼說了算。。。

你要放個在線demo啊,年輕人。


PC、WAP頁面切圖是基礎中的基礎,DIV+CSS布局是基礎,網站有鏈接么?從最基本的開始製作,我看到了你的踏實;從smzdm開始模仿,我看到了你的前衛。另外一點外觀布局只是一部分,好的前端更加註重的是細節,尤其未成形或者有兼容性問題是絕不能拿出去的,因為會有更加專業的人去發現各種瑕疵。

不過對於初入行的來說,已經做的很好了,希望繼續努力,在CSS3及JS方面可以有更多的擴展。

PS:瀏覽網站猶如品書,一千人讀莎士比亞會看到一千個莎士比亞,那麼我們看的網站,在各種環境下(OS、Browsers、Window Size……)都是不同的,需要多去觀察。細節!細節!


仿站,沒有在線demo,不太好細說,但看著有些凌亂。

兼容性一般規避,少些hack。常見布局要熟悉。

還有,程序員是靠懶惰進步的。

css寫煩了,上預處理器。html寫煩了,上模板引擎。

jquery,入門很簡單。學js時,買兩本書吧。一本厚的,一本薄的。厚的用來查,薄的告訴你最佳實踐。


這個網站我見過


你就放個效果圖上來? 那我們只能評論網頁設計的能力而不是代碼實現網頁效果的能力。

比如最高票答案給你提的幾乎都是設計上的問題,在實際工作中這些不是你做的事兒,圖已有人設計好了,如果出現最高票提的那些問題,那不是你的問題而是設計師的問題。

前面有人強調貼代碼的原因是 瀏覽器其實很包容的, 一個效果你可以用很多規範的不規範的代碼實現,但是你貼了代碼高手一看就知道你實現某個效果 用到的某些代碼在 某些情況下會出現 兼容問題 , 或者高手能夠給你一些 整合CSS 代碼的建議,比如有些樣式放在父元素上讓子元素繼承來實現比較好,高手一眼就能看出你的css代碼是不是健壯的:經不經得起需求的變更等等等等

至於其他很多人強調JS,我覺得真心還是有必要的;除非你是211的,有希望進一些分工明確的大廠,那樣你布局能力學精通(學BEM.Sass,OOCSS等等,自己寫對口的CSS庫,甚至學一點JS封裝組件)就可以了。 否則,學歷低進小廠不光他們說的js要會,後台php,mysql,asp,net,jsp,前面的ps設計切圖全要會,公司用什麼你就要學什麼。


啥我都不會


看起來,布局沒有什麼問題。前端入門了。

不過路還長。等到你能用angular寫web app,就能跟我差不多工資了(4000,稅前)。

呵呵噠。


請問,你做一個這樣的網頁多長時間?

沒有噴的意思,


好不好看暫不說,能花個星期寫了這麼長個文檔也算是很不錯。

我講講別的吧。

我私自把網站開發分成三個塊(單單是實現階段,沒把前期工作算上去):

1.設計師設計頁面布局、繪出樣圖

2.前端程序員與設計師溝通,一起完成頁面框架的搭建

3.伺服器端腳本和後台資料庫,由一名專門寫功能實現的程序員與前端程序員溝通完成(前端很苦逼吧..)

所以這樣看來,你做的事還是挺多的,要想拿這個去討碗飯吃,是要了解很多知識的,有耐心做這點就很不錯,加油吧。

單單地寫張HTML頁,附加張CSS樣式表,是什麼事都做不了的,自己給自己定位下是做哪個階段吧,專註某一個方面會讓你變的專業。

有興趣多交流下吧,我也是菜鳥

-----------------------------------------------------

工作一個月後,我再來看這個問題,突然發現當時回答的時候是挺天真的。

我能再總結總結。

1、不會JS,還是不要去應聘了吧;

2、寫靜態頁面不是前端的主要工作;

3、轉前端。我推薦你先去干後端,後端變的沒那麼快;

4、在某問題上聽說,年輕人,前端圈子很浮躁,踏踏實實學好基礎,再去做前端吧。


初級的話,先考慮布局,在高級瀏覽器中不出錯就是勝利了,接下來,就是練習代碼規範了,具體是怎麼練的呢?ie6,(痛苦臉)是的,在嚴格模式下的ie6沒有亂碼,那算是比較好的網頁了。

扯點題外話,學硬體維修是幹啥的呢?我大專的時候就拆過一次主機


我們倆水平差不多,我也是只會html+css一般效果都能實現。不會js!不過也專業是網路!


沒邀,厚著臉皮來答,也不是大牛.

嗯.

先給題主點積極的.

在目前互聯網市場,前端工程師十分緊俏,錢景超級好.

會做html5基本可以拿到很多不錯的offer了.

再來點打擊樓主的.

雖然沒見到樓主的作品,但是通過你的描述基本還是個門外漢的水平.

我之前面試過一個剛畢業的女孩子,U盤裡準備了一堆仿各大電商的靜態頁,

感覺也是這麼個水準,隨便聊聊就讓人走了.

所以總結下,給樓主兩個思路:

1.以目前水平,繼續看看網上視頻,教程,厚著臉皮去投各種公司的前端實習崗位,如果成功,進去硬著頭皮跟老大做點東西,多學多看.

2.找個線下的培訓機構,老老實實的報個HTML5班,學成之後找個崗位培養經驗.

另外.js,jquery是前端必須的.


推薦閱讀:

哪些網站適合作為瀏覽器主頁?
網站設計如何支持 Retina 屏幕?應當注意哪些地方?
網頁提示手機中毒該如何處理?
網頁設計的前途怎麼樣?
現在的網頁設計師到底是幹什麼的?

TAG:學習 | 網頁設計 | 前端開發 | HTML5 | DivCSS |