頁面構(gòu)建和js前端不得不說的那點事兒_網(wǎng)頁設(shè)計教程

推薦：網(wǎng)頁設(shè)計的8個趨勢
本文譯自網(wǎng)站設(shè)計公司weavora.com，介紹了在他們眼里8個Web網(wǎng)頁設(shè)計趨勢：單頁面、用照片做背景、色塊設(shè)計、超大號的圖片、聚焦簡潔、響應(yīng)式設(shè)計、視差滾動、強調(diào)字體，每個趨勢后面都附了數(shù)個案例，相信對網(wǎng)站設(shè)計師會有一定的參考價值。 單個長頁面的設(shè)計一度不受人

作為微博的頁面構(gòu)建工程師，主要職責(zé)就是利用html&css，高質(zhì)量的完成靜態(tài)頁面的制作，保證項目的按時完成。而頁面需要的js效果則交給下游的js前端工程師去做。在微博，這兩個崗位是分開的。但在大家的思維定勢里可能覺得這兩個崗位應(yīng)由一個人來完成最好，畢竟，頁面構(gòu)建工程師寫的html結(jié)構(gòu)不一定是js工程師想要的那種，js工程師可能有更高效的方式。所以，在頁面構(gòu)建之前最好能與js工程師溝通一下，把實現(xiàn)方案確定好。

但在實際項目流程中，當(dāng)進行到頁面構(gòu)建的時候，產(chǎn)品經(jīng)理可能還沒安排到j(luò)s資源，這時我們只能按照產(chǎn)品的需求和自己的想法去寫html結(jié)構(gòu)，不僅要考慮到設(shè)計稿的還原度、瀏覽器的兼容性、以后可能要添加的新功能的預(yù)見位置，還要考慮怎樣寫html結(jié)構(gòu)能讓js最省事的完成產(chǎn)品的交互效果。作為一名有責(zé)任感的頁面構(gòu)建工程師，表示亞歷山大！所以，我們經(jīng)常查看頁面源碼時，會發(fā)現(xiàn)這樣的注釋，用來告訴js工程師怎么去操作dom結(jié)構(gòu)。

有時為了做到最簡，我們要考慮好久，前一陣子的倫敦奧運會，微博首頁右側(cè)要添加一個奧運金牌榜的模塊，要求有收起和展開的按鈕，用來顯示不同的內(nèi)容。

對網(wǎng)站來說這是很稀松平常的交互效果。具體html實現(xiàn)可能有同學(xué)會想到，做兩個div，各自包含展開的內(nèi)容和收起的內(nèi)容。在點擊展開按鈕時出現(xiàn)一個，另一個隱藏；而在點擊收起的時候做相反的處理。這種事本身也沒有對與錯，能實現(xiàn)效果就好。但作為出現(xiàn)在微博首頁的模塊，并且出現(xiàn)在第一屏的位置，對性能的優(yōu)化肯定是要做足的。能盡量在我們css這一層做的，決不放到j(luò)s那邊去做。我的處理方式是把收起展開的樣式都寫好，放在一起，讓js在默認(rèn)展開或點擊展開的時候顯示turn_olym_on，在點擊收起的時候更換為turn_olym_off，這樣js就只是更換一個class名的代碼量，而對于展開收起的兩個按鈕，我也通過更換的class名來顯示和隱藏。

具體html代碼：

在這里把所有用到的代碼全部放在一起，把某種狀態(tài)時不用顯示的隱藏掉，比如展開狀態(tài)時，class=”show_less W_linecolor”的div和展開的按鈕class=”W_moredown”不用顯示，就可以在最外層的div上寫：

css暫時隱藏掉這兩元素：

而當(dāng)收起的時候，最外層的div就變成：

css則把之前隱藏的兩個元素顯示出來，并把需要隱藏的排行榜四五名class=”no_45″的tr標(biāo)簽、賽事重點的class=”show_more”及收起的按鈕class=”W_moreup”隱藏：

這樣，就只需要js在點擊收起的時候把turn_olym_on換成turn_olym_off，而點擊展開的時候把turn_olym_off換成turn_olym_on就可以了，其余的隱藏展示全部有css來搞定。

總結(jié)：
了解一些上下游工作的知識，讓上下游溝通更順暢，提高工作效率，是我們共同的目標(biāo)。
頁面構(gòu)建的工作，面臨著很多的挑戰(zhàn)，眼下html5的新標(biāo)簽、高級瀏覽器原生支持的各種api，還有css3新鮮好玩的新屬性等等。。。都需要我們?nèi)�學(xué)習(xí)，不求完全掌握，但求能了解熟悉，能知道是怎么回事。把學(xué)到的新知識應(yīng)用到實際項目中，對公司對團隊對自己都有益~

元芳，你怎么看？

分享：7步改善網(wǎng)頁設(shè)計和用戶體驗!
本文從7個方面教一些網(wǎng)頁設(shè)計初學(xué)者迅速改善網(wǎng)站的頁面設(shè)計和用戶體驗。 你是否會經(jīng)常搜索一些網(wǎng)頁，但是發(fā)現(xiàn)無法找到所需要的信息時便隨即退出？ 你是否會經(jīng)常睜大眼睛去讀取一些網(wǎng)站很小的字？ 當(dāng)一個網(wǎng)頁需要讓你拖動水平滾動條才能閱讀完文字時，你有多沮喪？ 設(shè)計