您現在的位置是:電腦技術吧?>? 編程技術 ??>??靈活使用,FUA靈活使用??>??正文詳情

靈活使用,FUA靈活使用

盈鵬運2019-11-13 13:01:12 人圍觀
簡介如何靈活使用教材首先查看預覽界面:讓我們從完成上述第1頁的步驟開始。構建HTML構建HTML是整個過程中最基本的部分。構建html的關鍵原則之一是返回html標記的原始含義。所怎么提高腦

首先看一下預覽界面:

    下面開始講述一下完成上述頁面的步驟。

  1. 構建HTML  構建HTML是整個過程最基礎的部分。

我們構建HTML比較關鍵的一個原則就是還HTML標簽其本來的含義。

所以在這里,我們應該合理分析一下期望做到的HTML的結構的情況,并加以分析,選擇比較合適的HTML標簽,而不是采用非標準的Table布局或者充斥著大量div和class的布局方式。

事實上,現在存在著一種誤區,就是凡事采用了DIV+CSS的方式進行頁面編程的就是Web標準的,其實這是完全錯誤的觀點,很容易就導致了多div癥(divitus)或者多類癥(classitis)。

  回到正題,我們分析一下頁面樣式,可以將整個Tab頁分成2個部分,分別是一級菜單和二級菜單,他們有類似的特點,并以橫向方式排列。

HTML標簽中的無序列表就可以反映出這種邏輯關系。

所以我們分別采用2個無序列表來表示一級菜單和二級菜單。

代碼如下:divclass=navg divid=attendanceclass=mainNavg ul liid=attendanceNavgahref=http://cms.ddvip.com/index.php#考勤管理/a/li liid=teachNavgahref=http://cms.ddvip.com/index.php#教學管理/a/li liid=communicationNavgahref=http://cms.ddvip.com/index.php#家校互通/a/li liid=systemNavgahref=http://cms.ddvip.com/index.php#系統管理/a/li /ul /div   divid=dailyAttendanceclass=secondaryNavg ul liid=dailyAttendanceNavgahref=http://cms.ddvip.com/index.php#當天考勤/a/li liid=leaveApproveNavgahref=http://cms.ddvip.com/index.php#請假審批/a/li liid=attendanceStatisticsNavgahref=http://cms.ddvip.com/index.php#考勤統計/a/li liid=attendanceCollectNavgahref=http://cms.ddvip.com/index.php#考勤匯總/a/li /ul /div /div  其中,2個div將菜單級別劃分開。

其實在以后還會有其他的功效。

此時,我們不妨View一下這張頁面,我們可以驚喜的發現,這張頁面就想Word文檔一樣,是可讀的,這一點我們可以在整個過程做完以后再一次驗證。

  2. 構建基本CSS  先簡單的讓ul橫向排列,這里面要注意元素float之后要注意清理  然后通過分別在LI 和 A 元素上應用背景來實現主菜單樣式,這里有個比較重要的地方是A這個元素變成塊級元素(display: block),這樣可以便于我們下面做一些處理,也能使整個菜單應用到鏈接樣式。

  而其中的line-height,恰恰可以使A中的字縱向居中。

text-align使得A中的字橫向居中。

代碼如下:  .navg.mainNavgUL{  margin:0;  padding:0;  list-style:none;  }  .navg.mainNavgULLI{  float:left;  background-color:#E1E9F8;  background:url(../images/tab_right.gif)no-repeatrighttop;  margin:10px3px;  height:25px;  }  .navg.mainNavgULLIA{  display:block;  height:25px;  padding:025px;  line-height:24px;  background-color:#E1E9F8;  background:url(../images/tab_left.gif)no-repeatlefttop;  text-decoration:none;  float:left;  text-align:center;  color:#fff;  font-weight:bold;  }  3. 使寬度自適應  我們在這里使用滑動門技術來做寬度自適應。

下面簡單介紹一下滑動門技術  簡單來說,就是在LI上應用一幅大圖像背景,并讓這個背景居于右側

  然后在A上應用一個小圖像背景,并讓這個背景居于左側,遮住大圖像邊緣

  這樣無論菜單文字內容長度怎么變,都不會破壞原來的結構了。

  4. 當前菜單高亮顯示  如果高亮當前頁面,這個有很多種做法,最死板的是在每個頁面上顯式的定義類。

  但是對于web項目來說,頁面多數是動態的,所以這樣不是最理想的方法。

  我這里采用的方法是CSS選擇器的靈活使用,代碼如下:  #attendance#attendanceNavg,  #teach#teachNavg,  #communication#communicationNavg,  #system#systemNavg{  background:url(../images/tab_right_on.gif)no-repeatrighttop;  }  #attendance#attendanceNavgA,  #teach#teachNavgA,  #communication#communicationNavgA,  #system#systemNavgA{  background:url(../images/tab_left_on.gif)no-repeatlefttop;  color:#0000ff;  }  在的代碼中,我們可以使用不同的id作為選擇器,由于CSS中的選擇器id的優先級將大于class,所以只要根據id配合上li上面的id,就可以達到動態選擇高亮選中的目的。

  事實上,由于我們的頁面都是動態的,所以id可以由后臺生成,這樣就可以通過id的不同組合非常精巧的實現了我們的需求。

  5. 小技巧  最后可能還有一個問題你在想怎么實現的,就是高亮的tab如何把下面的橫線遮掉的  很簡單,圖片上的小技巧。

將高亮的圖片高度設置為25px,而普通的圖片設置為24px。

然后通過padding,就可以將那根橫線遮去了。

  我們可以使用類似的方式,把二級菜單也做出來,這里就不詳細敘述了。

大家可以結合源碼試一下。

版權聲明:本文由 盈鵬運 整理編輯。

原標題:知識的靈活運用,腦子怎么靈活使用

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

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 聯想筆記本怎么進入安全模式,聯想筆記本進安全模式

    聯想筆記本怎么進入安全模式,聯想筆記本進安全模式 相關圖片聯想win10安全模式安全模式是Windows系統中的一種特定模式。在這種模式下,我們可以修復一些程序錯誤。聯想用戶會問,聯想電腦如何進入安全模式?為了讓那些喜歡學習的用戶了解這...

  • 電腦麥克風聲音超級小,win10電腦麥克風沒聲音

    電腦麥克風聲音超級小,win10電腦麥克風沒聲音 相關圖片win10無法使用耳麥說話相信很多網友都遇到過電腦麥克風沒有聲音的問題,但這些問題大多是由于設置不當造成的,可以通過簡單的設置來解決。但是還有其他原因,那么我們如何解決電...

  • 新車使用需要注意什么,火煘使用注意

    新車使用需要注意什么,火煘使用注意 相關圖片新車需要注意事項始終對屬性使用帶引號的小寫字母:所有元素和屬性名稱都必須使用小寫字母,所有屬性值都必須使用雙引號錯誤:a ref=index。HTML class=intern新車需要注意什么...

  • 蘋果電腦推薦,蘋果電腦臺式

    蘋果電腦推薦,蘋果電腦臺式 相關圖片蘋果電腦配置無論在生活、娛樂還是工作中,我們都需要用電腦來進行游戲玩家的反思。蘋果的主要商業模式可以做普通程序,但運行一些大型3D游戲有點困難。是真的嗎?如果不是,真...

  • HTML 表單,HTML5表單

    HTML 表單,HTML5表單 相關圖片html基本表單代碼在ASP中,有兩個非常常見的集合:請求。詢問和請求。形式。這兩個集合可以獲取通過HTML forms Request.QueryString H提交的信息表單html5代碼...

  • 電腦藍屏修復按哪個鍵,電腦黑屏了怎么才恢復

    電腦藍屏修復按哪個鍵,電腦黑屏了怎么才恢復 相關圖片電腦突然黑屏怎么辦當我們使用計算機時,我們可能會遇到這樣的情況:主機中的硬盤和CPU正在運行,但計算機是用黑屏打開的。什么情況?許多人在遇到這種情況時不知道如何開始。...

  • 相對定位是相對什么定位,相對定位和絕對定位的特點

    相對定位是相對什么定位,相對定位和絕對定位的特點 相關圖片相對定位和絕對定位的視頻在網頁設計中,我們經常使用position屬性,它有五個值:absolute、fixed、relative、static,繼承我們經常使用的是absolute和h5絕對定位和相對定位...

  • 電腦共享打印機怎么設置,如何添加共享打印機到電腦

    電腦共享打印機怎么設置,如何添加共享打印機到電腦 相關圖片打印機共享怎么設置w7在局域網中,任何一臺計算機都可以通過共享打印機來使用同一臺打印機,很多人可以共享一臺打印機,這大大降低了耗材的成本,而且不需要每個人都有一臺打印...

  • 電腦切換輸入法,電腦如何切換輸入法

    電腦切換輸入法,電腦如何切換輸入法 相關圖片電腦輸入法輸入法是我們操作計算機的必要條件之一。近日,有用戶反映,無論按組合快捷鍵Alt shift還是Ctrl blank space,很多用戶都對這臺電腦的問題感到困電腦鍵盤輸入法怎么切換...

  • 框架控件,框架控件是一個什么控件

    框架控件,框架控件是一個什么控件 相關圖片vb框架控件是哪個首先,我們注意到服務器控件imagemap也在asp.net 2.0中提供。此控件是一個服務器控件,允許您定義圖片上的熱點區域。用戶可以單擊這些熱點區域來回傳或vb框架控件在哪...

熱評文章

  • 電腦休眠喚醒后鍵盤失靈,電腦休眠喚醒后鼠標失靈

    電腦休眠喚醒后鍵盤失靈,電腦休眠喚醒后鼠標失靈 相關圖片電腦休眠黑屏怎么喚醒計算機有許多奇特的現象,給我們帶來了許多小麻煩。近日,有用戶發現,USB鍵盤在電腦睡覺和醒來后無法使用。它需要再次拔掉插頭才能恢復正常。因此,如何...

  • css input,css input樣式

    css input,css input樣式 相關圖片html中inputimg的頂部和頁面中的輸入總是不對齊的,預覽效果如下:解決方法其實很簡單,我們只需要在圖片中添加垂直對齊:中間屬性。代碼是inputname=veryhoo tcssinputtext的設置...

  • 電腦沒聲音一鍵恢復,電腦沒聲音怎么辦圖解

    電腦沒聲音一鍵恢復,電腦沒聲音怎么辦圖解 相關圖片為什么電腦插上音箱沒有聲音為什么電腦是靜音的?原因是什么?如何解決電腦沒有聲音的問題?面對網上一系列網友提出的上述問題,小編想說的是,電腦里沒有聲音,存在硬件問題...

  • html滾動條代碼,網頁滾動條代碼

    html滾動條代碼,網頁滾動條代碼 相關圖片HTML滾動條Divstyle = width: 760px; height: 1500px; background color: f4f4f4; align = centevb中滾動條value代碼...

  • 本地連接,本地連接狀態已接受為0

    本地連接,本地連接狀態已接受為0 相關圖片本地連接沒有接收相信很多朋友都遇到過當地人脈有限的情況。黃色的感嘆號顯示出來了,但我不知道該怎么辦。事實上,當我們使用路由器連接計算機時,如何解決本地連接受限的情...

  • 電腦藍屏修復,電腦開機藍屏怎么修復

    電腦藍屏修復,電腦開機藍屏怎么修復 相關圖片藍屏怎么修復如果藍屏電腦出現這種情況,我們該怎么辦?事實上,藍屏電腦很容易出現這個問題。只要我們做以下步驟,我們就能解決這個問題。如果藍屏電腦出現這種情況,我們該...

  • XXLive,X-

    XXLive,X- 相關圖片x yDi cook! X shows 145 - this type of meter is marked as damaged before normal stae^x...

  • 華碩無線網卡萬能驅動,華碩無線網卡驅動安裝

    華碩無線網卡萬能驅動,華碩無線網卡驅動安裝 相關圖片win10無線網卡驅動由于CPU以外的硬件設備是實現更多功能的工具,因此驅動程序在系統中起著重要的作用。一般來說,在安裝操作系統時,首先要安裝硬件設備的驅動程序。如果是華碩用...

  • 網站首頁,網站首頁制作網站

    網站首頁,網站首頁制作網站 相關圖片生成為了提高網站的訪問速度,我們經常采用靜態生成的方法來實現,這確實提高了網站的訪問速度。然而,定時生成有一些限制。如果您有一個獨立的服務器,您可以在服務器上設置...

  • 電腦裝機,電腦組裝教程

    電腦裝機,電腦組裝教程 相關圖片裝機眾所周知,安裝電腦既經濟又劃算。現在傳統底盤的同質化問題非常嚴重。很難為DIY組裝一個個性化的游戲機。那么,如何為自己的個性組裝一臺電腦呢?下一個,小編怎么組裝電...

關注微信

变脸官网查询