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