青島網站建設公司,青島網站制作公司-奈薇建站網
建站咨詢熱線:0532-8878113113165158935 
 返回貼子列表
發表新貼
主題:

傾斜的鼠標翻轉導航制作上的煩惱

共有113人瀏覽過本貼
奈薇建站網
昵稱:奈薇建站網
論壇積分:127400
發貼等級:22


發貼數:982
回貼數:1282
被砸雞蛋:被砸雞蛋1
獲贈鮮花:獲贈鮮花165
發表時間:2019/9/27 17:09:00 樓 主

傾斜的鼠標翻轉導航制作上的煩惱

  前天網上有個朋友發給我一個頁面讓我幫她看一下為什么鼠標翻轉實現不了。我打開源文件看了一下,發現她根本沒有掌握一個鼠標翻轉的特性。并且對于傾斜導航的思考也不足。雖然我當時看出來了這些問題,但是由于手上一個項目正在收尾一時也沒有時間向她一個講解。正好昨天工作忙完了,現在又拿起那個文件看了一下,發現能過這個事件可以講解好多個知識點,有一些地方比較容易讓人不太注意,但是確實是非常關鍵的。下面我們通過制作一個傾斜的鼠標翻轉導航為過程來針對不同的地方做出一些提示,希望可以幫助一些對于鼠標翻轉導航制作上還存在疑問的朋友。

  我們先看一下想要實現的效果,當然在沒做之前這些只能是存在于我們的腦子或是草圖上。我們首先要想到它是個什么樣子,然后才能去分析我們想要實理的效果是應該如何去做,閑言少敘,先看圖:

  我們看到上圖,可以會覺得好像并沒什么,好像很容易做。好我們來細細的分析一下這個效果。我們用標準來實現就不能直接插入一張圖片在HTML里。用標準來做就需要把圖片作為背景的方式用CSS進行調用。那么我們來看一下這樣的導航是否可以直接就那么直接調用,其中是不是還有什么問題出現?下面請看一下這個導航效果的放大圖:

  大家注意上圖中的“危險區”很明顯,如果我們把兩個傾斜的正塊放在一起就必然會有一段重復區,我們現在的CSS還不支持異形處理。要解決這個問題就必需要使得這兩個方塊進行重疊。重疊就需要把他們放在不同的層次上。這就要用到CSS中的定位:“position:static|absolute|fixed|relative”。關于position的詳細請查看蘇昱的《CSS2中文手冊》,關于如何定位請查看我的《解讀absolute與relative》

  做鼠標翻轉我們通常會把所有的背景做成一個圖,然后通過CSS來設置不同標簽下的圖片的不同位置。也許有人就會認為這個導航的背景圖應該是這樣的:
個性簽名
奈薇建站網致力于,讓每個中國人、每個中國企業都擁有自己的“官方網站”!
回復 回復此貼 TOP
0個回貼   分0 上一頁 / 下一頁   當前第
奈薇建站網青島網站建設公司/青島網站制作公司,專業提供"氣質"型網站建設及精美網站制作服務,同時歡迎各地網站建設公司、網站制作公司代理我們的奈薇建站系統共同發展

熱點地區:青島網站建設價格 青島即墨網站制作公司 開發區信息港 山東在線門戶
  • 備案號
  • 魯ICP備13010283號
建站咨詢熱線0532-88781131 15166683288 13963906391
版權所有© BangJianZhan.Com & Nev.Cn 青島網站建設/網站制作公司
青島雨后網絡科技有限公司 - 青島市市北區福州北路90號,景泰尚都6層
已經為您服務了
157個月 5
4944945香港诸葛神算网