您現在的位置是:電腦技術吧?>? 編程技術 ??>??響應式的,什么是響應式??>??正文詳情

響應式的,什么是響應式

文采萱2019-11-25 12:41:29 人圍觀
簡介網頁響應式此菜單可以左對齊、居中對齊和右對齊,這與上一篇文章中提到的菜單不同,后者需要通過單擊在“顯示”和“隱藏”之間切換。它還有一個顯示活動/當前菜單項的標簽,它

這個菜單能居左、居中和居右對齊,不像之前文章提到的菜單需要靠點擊在顯示和隱藏之間進行切換。

它也有一個標記顯示激活/當前菜單項,并且它能作用在所有移動平臺和包括IE在內的所有桌面瀏覽器。

  首先,看看Demo的效果:Demo  一、 目的  本教程的目的是展示如何將規律的列表菜單變成一個較小的顯示下拉菜單。

  這個技巧在由許多鏈接組成的導航上非常有用,例如下面的截圖,可以將所有按鈕壓縮成一個優雅的下拉。

  二、Nav HTML標記XML/HTML Code復制內容到剪貼板

  1. nav class=nav ul
  2. li class=currenta href=#Portfolio/a/li lia href=#Illustration/a/li
  3. lia href=#Web Design/a/li lia href=#Print Media/a/li
  4. lia href=#Graphic Design/a/li /ul
  5. /nav
  三、CSS  CSS Code復制內容到剪貼板  /* nav */  .nav {  position: relative;  margin: 20px 0;  }  .nav ul {  margin: 0;  padding: 0;  }  .nav li {  margin: 0 5px 10px 0;  padding: 0;  list-style: none;  display: inline-block;  }  .nav a {  padding: 3px 12px;  text-decoration: none;  color: #999;  line-height: 100%;  }  .nav a:hover {  color: #000;  }  .nav .current a {  background: #999;  color: #fff;  border-radius: 5px;  }  四、居中和右對齊  正如前面提到的,可以同過text-align屬性改變對齊方式。

  CSS Code復制內容到剪貼板  /* right nav */  .nav.rightright ul {  text-align: rightright;  }  /* center nav */  .nav.center ul {  text-align: center;  }  五、IE的支持  在IE 8以及更早版本中,是不支持HTML5的nav標簽和媒體查詢。

引入css3-mediaqueries.js(或 respond.js) 和 html5shim.js 提供后備的兼容處理。

如果你不想用html5shim.js,可以用div代替nav  CSS Code復制內容到剪貼板

  1. !--[if lt IE 9] script src=http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js/script
  2. script src=http://html5shim.googlecode.com/svn/trunk/html5.js/script ![endif]
  六、響應式  現在有趣的部分來了媒體查詢菜單的響應性。

如果你對響應式設計不熟悉,可以閱讀之前我寫的關于responsive design (后續翻譯)and media query的文章。

  在600 px斷點,我把nav元素設置成相對定位,這樣,我就能對ul元素進行絕對定位了。

通過display:none,我隱藏了所有的li元素,但保持當前的li元素以塊元素顯示。

然后,當鼠標懸浮于nav元素時,將所有li添加display:block.為了標記當前的li元素,我會添加一個圖標。

對于居中和右對齊,對定位的ul元素使用left和right屬性。

看看最終的Demo效果:  CSS Code復制內容到剪貼板  @media screen and (max-width: 600px) {  .nav {  position: relative;  min-height: 40px;  }  .nav ul {  width: 180px;  padding: 5px 0;  position: absolute;  top: 0;  left: 0;  border: solid 1px #aaa;  background: #fff url(images/icon-menu.png) no-repeat 10px 11px;  border-radius: 5px;  box-shadow: 0 1px 2px rgba(0,0,0,.3);  }  .nav li {  display: none; /* hide all items */   margin: 0;   }   .nav .current {   display: block; /* show only current item */   }   .nav a {   display: block;   padding: 5px 5px 5px 32px;   text-align: left;   }   .nav .current a {   background: none;   color: #666;   }   /* on nav hover */   .nav ul:hover {   background-image: none;   }   .nav ul:hover li {   display: block;   margin: 0 0 5px;   }   .nav ul:hover .current {   background: url(images/icon-check.png) no-repeat 10px 7px;   }   /* right nav */   .nav.rightright ul {   left: auto;   rightright: 0;   }   /* center nav */   .nav.center ul {   left: 50%;   margin-left: -90px;   }   }

版權聲明:本文由 文采萱 整理編輯。

原標題:可響應式框架,什么是響應式框架

轉載注明出處:http://www.dn9ww09s.icu/program/14313.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 公司轉發朋友圈制度,朋友圈轉發工作內容

    公司轉發朋友圈制度,朋友圈轉發工作內容 相關圖片轉發朋友圈作為考核的標準為了增加主持人和粉絲之間有趣的互動,英科推出了與微博故事相同的功能。據悉,該功能為24小時系統功能。用戶上傳的短視頻將在24小時后。我不知道。快...

  • q 友樂園,q友樂園說說

    q 友樂園,q友樂園說說 相關圖片q友樂園簽名熱門Q-friend park是一個個性化平臺,用戶可以共享QQ個人簽名、QQ頭像、QQ網名、QQ群等資源。用戶可以在q-friend Park中分享自己喜愛的QQq友樂園網名熱門...

  • 一張張什么笑臉,她那張笑臉

    一張張什么笑臉,她那張笑臉 相關圖片每一張笑臉都是今天,您將了解名為canvas的web技術及其與文檔對象模型(通常稱為dom)的關聯。這項技術非常強大,因為它使web開發人員能夠使用JavaScript訪問和看到一張張笑臉...

  • 摩拜單車不鎖會怎么樣,摩拜單車鎖不了怎么辦

    摩拜單車不鎖會怎么樣,摩拜單車鎖不了怎么辦 相關圖片怎么關摩拜單車的鎖摩比自行車已經成為許多人旅行的必要選擇。但當一些孩子使用安卓版摩比自行車時,他們發現掃描后無法解鎖。怎么了?怎么解決?讓我們看看解決方案摩拜單車...

  • 顯示桌面按鈕,桌面設置

    顯示桌面按鈕,桌面設置 相關圖片桌面不顯示圖標怎么辦我敢肯定很多孩子不知道,他們不使用電腦的時候可以把電腦設成睡眠模式。如果他們再開始的話會很快。然而,在win7系統中,sleep按鈕和shutdown按鈕一起使桌面上...

  • flash簡單實例教程,flash的教程

    flash簡單實例教程,flash的教程 相關圖片flash新手教程實例表明,水中的浮詞與水中的浮詞相似,隨波浪起伏,主要利用了掩模效應和文本透明度的變化。步驟1:啟動Flash MX,創建一個新文件,右鍵單擊該階段的空白區域并自己...

  • 神州u 司機端,神州專車u十司機

    神州u 司機端,神州專車u十司機 相關圖片神州專車u十作為神舟特種車的官方開發,一款永遠不會被提取的關鍵軟件,只要司機加入,每月就可以輕松進入一萬多個。那么加入神舟U 車手的條件是什么?接下來,超人軟件編輯將...

  • 2份PDF合并,合并pdf文件最簡單的方法

    2份PDF合并,合并pdf文件最簡單的方法 相關圖片多個pdf如何合并在正常生活中,許多小伙伴遇到了這樣的情況,他們需要將兩個PDF文件合并在一起。那么如何將PDF文件合并成PDF呢?接下來,超人軟件編輯器將介紹如何合并PDF文件如何...

  • web消息通知,web通知session更新

    web消息通知,web通知session更新 相關圖片html通知代碼使用網絡版Gmail時,每當收到新郵件時,屏幕右下角會彈出一個提示框。有了HTML5提供的通知API,我們也可以輕松實現這樣的功能,確保瀏覽器支持如果你是在特定ad認證通知...

  • VUE如何添加音樂,vue不能添加音樂

    VUE如何添加音樂,vue不能添加音樂 相關圖片vue音樂怎么添加一部分近年來,Vue因其使用小型軟件制作視頻大片的優勢而越來越受歡迎。然而,有許多朋友不知道如何添加音樂到Vue。然后,超人軟件將向您介紹Vue iPhonevue如何添加第...

熱評文章

  • 無線ap不穩定掉線,無線網不穩定老是掉線

    無線ap不穩定掉線,無線網不穩定老是掉線 相關圖片wifi經常掉線現在筆記本電腦可以說是每人一臺,不僅因為它的功能和臺式電腦一樣,還因為它便于攜帶。但是無線網絡比網線更不穩定,所以有時筆記本電腦網絡不如臺式電腦穩定。當...

  • 圖片處理方法,圖片處理技巧

    圖片處理方法,圖片處理技巧 相關圖片ps處理圖片的基本方法對于網頁制作者來說,最麻煩的事情可能是在網頁上添加圖片或文本的鏈接。如果頁面內容很多,那么作品只能用恐怖來形容。現在讓我們先學習如何在Dreamweaver中...

  • nsa 武器庫免疫,nsa武器庫免疫工具下載

    nsa 武器庫免疫,nsa武器庫免疫工具下載 相關圖片nsa裝備庫永恒藍是一種比蠕蟲病毒更具攻擊性的計算機病毒。一些用戶仍然害怕蠕蟲病毒。如何防止更強大的永恒藍色?NSA武器庫免疫工具是360對永恒藍色病毒的免疫殺滅工具,刪除n...

  • 晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠

    晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠 相關圖片晶瑩剔透的水珠像什么本教程主要使用焰火來創建水晶般清晰的效果。讓我們學習以下內容。首先,看看最終效果圖:第一步是隨意創建一個新的畫布,填充背景色為﹐000066,畫出鋼筆...

  • 王者榮耀隱藏戰績破解2019,安卓怎么看ios好友戰績

    王者榮耀隱藏戰績破解2019,安卓怎么看ios好友戰績 相關圖片王者榮耀助手在哪下載如今,年輕人業余時間最喜歡的事情就是吸引朋友,開黑車。不過,如果他們不想和隊友一起開黑車,就應該先用國王的榮耀助手看看朋友們的成就。國王的榮耀...

  • python ip地址處理,python獲取ip地址

    python ip地址處理,python獲取ip地址 相關圖片python獲取內網ip地址本文主要介紹Python將IP地址轉換成整數的方法,包括Python對IP地址的轉換技巧。對于需要的朋友,請參考下面的示例來描述Python將IP地址轉換為整數python生成ip地址加...

  • 文理分科,文理學院

    文理分科,文理學院 相關圖片寶雞文理智能文理是一種閱讀和學習軟件。在這個軟件中,不僅學生可以得到一個專業的學習平臺,教師也可以得到一個教學平臺。那么如何運用智慧和藝術呢?接下來,超人軟件編輯...

  • 閃電上征信嗎,閃電貸款上征信嗎

    閃電上征信嗎,閃電貸款上征信嗎 相關圖片閃電借款上人行征信嗎Flash學習是一個非常實用的貸款軟件。在這個軟件中,用戶可以輕松地借錢,而不用擔心月底缺錢。那么在學生會上的信用調查呢?接下來,超人軟件編輯將介紹過...

  • 總監設計師,設計師總監的職責

    總監設計師,設計師總監的職責 相關圖片室內設計總監崗位職責磨一個成熟的產品,設計一個全新的項目,你選擇哪一個?今天Facebook主管的一篇好文章說了許多設計師的心聲。改進和優化已經存在超過五年的復雜產品是非常困...

  • 445端口如何打開,怎么打開端口

    445端口如何打開,怎么打開端口 相關圖片開啟445端口的方法勒索病毒還沒有結束。近日,勒索病毒開始攻擊王者榮耀安卓用戶,而電腦玩家也應引起重視。為了防止勒索病毒入侵,很多用戶通過軟件和系統關閉了445端口,但關...

關注微信

变脸官网查询