整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
逛網(wǎng)站的時候，會遇到一些比較炫酷的效果，比如一些導(dǎo)航欄用平行四邊形的格式排版，一看到平行四邊形，一般都會想到用圖片做背景來實現(xiàn)，雖然圖片方式可以實現(xiàn)，但是有時要改變某些效果時候不是很方便，比如想改變第二個導(dǎo)航的背景顏色，那樣你就只能又要切多一張圖片。所以今天主要來講解用另一種方法即純CSS樣式來實現(xiàn)平行四邊形。
效果圖如下：
構(gòu)建的html:
CSS樣式：
首先用到了CSS的偽類元素添加一個長方形，然后通過transform:skew的屬性來做扭曲變化45°，就可以達到了平行四邊形的效果！當然，你可以隨時調(diào)整skew()屬性內(nèi)的角度來變化自己的平行四邊形方向！
一小節(jié)給大家分享了各種橢圓的實現(xiàn)方法，此時我們來說一下平行四邊形的實現(xiàn)方法。
基本變形屬性transform有很多，接下來我們用到哪一個說哪一個。
我們一般用skew屬性來對矩形進行斜向拉伸，變成平行四邊形，但是如果直接對元素使用的話，它里面的內(nèi)容也會跟著斜向變動。
嵌套元素方案
對容器內(nèi)容再應(yīng)用一次反向的skewX()變形，從而抵消容器的變形效果
來看一下html和css具體代碼
偽元素方法
上面方法需要添加額外的HTML元素。這里提供一個不用添加額外的HTML元素的。
這種方法的思路是把所有的樣式(背景、邊框等)應(yīng)用到偽元素上，然后對偽元素進行變形。
要注意幾點：
一是要給宿主元素設(shè)置position: relative，并給偽類元素設(shè)置position: absolute，且偏移量都為0，以便讓它在水平和垂直方向上都被拉伸至宿主元素的尺寸。
二是偽元素生成的方塊是重疊在內(nèi)容之上的，一旦設(shè)置背景，就會遮住內(nèi)容，應(yīng)該設(shè)置z-index: -1或者更小的數(shù)，宿主沒有設(shè)置z-index默認為0；
想學習更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干貨。
就這樣一個平行四邊形效果就實現(xiàn)了，后還會補充更多多邊形效果，大家多多支持，多多鼓勵！
于平行網(wǎng)頁尋源，前面我們對其做了一些最基本的介紹，包括什么是平行網(wǎng)頁、怎么去尋找平行網(wǎng)頁。
我們知道，平行網(wǎng)頁找到了，任務(wù)已經(jīng)完成一半了，剩下的任務(wù)你只需要把分站間的內(nèi)容互譯頁面找出來提交即可，看似簡單，其實這一步難度還是比較大的，平臺要求3對互譯頁面，并且只要有一對不滿足互譯頁面的要求，平臺也不會采納，我們前期做的工作都將功虧一簣。
也許你會說可以使用語言翻譯工具，看下頁面是否是互譯的，在我看來，這也有些不太現(xiàn)實，做過平行網(wǎng)頁尋源任務(wù)的同學知道，平行網(wǎng)頁要求的語言有很多，比如西班牙語、俄語、越南語、葡萄牙語、法語、土耳其等語言，這么多語言如何去翻譯，并且任務(wù)的數(shù)量是一定的，每個任務(wù)也有一定時間的限制，很顯然，使用翻譯工具不是一個好辦法。那我們是否有其他辦法呢？
今天，我們就聊這個話題。找到平行網(wǎng)頁后，如何快速找到分站間的內(nèi)容互譯頁面？
其實，瀏覽器在打開網(wǎng)頁后，我們是有辦法查看到此網(wǎng)頁的源代碼的，例如：Apple 的主站https://www.apple.com/, 使用 Google Chrome 瀏覽器打開，在頁面上點擊右鍵，會彈出一個對話框，可以看到“查看網(wǎng)頁源代碼”一項。
點擊會重新彈出一個頁面，這個頁面就是 https://www.apple.com/ 主站的源代碼了。
仔細看下這個網(wǎng)頁的源代碼，不難發(fā)現(xiàn)，這些信息非常有助于我們?nèi)ゴ_定網(wǎng)頁的內(nèi)容是否是互譯的。現(xiàn)在，以 Apple 的中國主站與西班牙主站為例，來介紹如何通過網(wǎng)頁源碼來初步定位頁面內(nèi)容是否是互譯的。
Apple 中國分站的源碼片段：
Apple 西班牙分站的源碼片段：
對比這兩個分站，紅色方框的內(nèi)容，我們會注意到有一個關(guān)鍵字 href, HTML 語法中較常見，其屬性值可以是任何有效文檔的相對或絕對的 URL，換句話說href 后面的值指向的是另一個站點，分別點擊 href 后面的值 ”cn/mac”, ” es/mac”, 我們會看到重新彈出兩個網(wǎng)頁。
大致看下頁面，盡管我們不懂西班牙語，但是從圖片以及顯示的內(nèi)容看，這就是一對標準的互譯頁面。
同時，從 href 后面的值”cn/mac”, ” es/mac”, 也能夠發(fā)現(xiàn)，cn, es 后面緊跟的 “mac”, 這個鏈接下面的內(nèi)容大概率是跟 mac 內(nèi)容強相關(guān)， 也能夠初步判斷這兩個鏈接下面的內(nèi)容是互譯的。
所以，從上面的描述看， 快速找到分站間的內(nèi)容互譯頁面可以簡單概括為如下幾個步驟：
（1） 確定網(wǎng)頁主站對應(yīng)的分站；
（2） 使用 Google Chrome 瀏覽器打開分站，查看分站的源代碼；
（3） 搜索關(guān)鍵字 href, 找到其后面的屬性值，并點擊打開其對應(yīng)的鏈接；
（4） 對打開的鏈接網(wǎng)頁內(nèi)容進行查看，確定是否是互譯頁面；
作者簡介：一個專注于記錄互聯(lián)網(wǎng)兼職 任務(wù)的學生，公眾號《做點事吧》，歡迎關(guān)注。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
