bootstrap tab 模拟点击_【第七课】Bootstrap的魅力
前言
從零開始學前端系列課程，與傳統的視頻大課堂教學不同，沒有填鴨；也普通做練習題的方式不同，沒有假想的模擬題。
本課程拆出80個左右必須掌握的技能點，并對其分組，從易到難地列出學習曲線。同時從真實項目中拆解出與技能一一對應的不同難度的任務，通過解決任務來鞏固夯實知識。
這就是IT修真院集自適應學習、師兄輔導、在線一站式學習的DWS學習法（Learning by Doing ，Learing by Wrong ,Learning by Share），在實戰中學習，在試錯中學習，在分享中學習。
經過線下5年多的實踐探索，通過21萬多篇學習日報，實現了1500余名結業學員99%就業率的教學成果。
從零開始學前端系列課程的任務分為兩大部分，從CSS到JS，每一部分大概有15個左右的任務。每個部分分為技能任務階段和復盤任務階段，在任務實踐中完成從技能學習到項目經驗的積累。
一、這次將要執行的任務
二、為什么要開始這個任務
1.這個任務需要學會什么技能，為什么要優先學習這個技能？
1.1 HTML5的audio定義音頻流：通過這個可以熟悉一些HTML5的新標簽，同時看看視頻標簽、畫布標簽、拖放標簽等較常用的部分，達到舉一反三的目的。
1.2 處理半透明：學習用CSS完成半透明的時候，會發現它本身很簡單，但大概不止一種辦法。因此學習的重點在于分清楚不同方案之間的區別，以及了解清楚這個屬性的兼容性如何，如何去解決它的兼容性。學會這些解決問題的思路和方法才是這個技能的重點。
1.3 CSS3動畫：通過CSS3支持的動畫屬性，我們能創建更豐富的頁面動畫，取代許多以前頁面中的圖片、flash、js等。
2.這個任務為什么要用這種方式來設計，有沒有其他的可替代的練習方案？
這個任務的CSS依舊基于bootstrap，讓大家進一步熟悉這個CSS框架，并且自定義相關樣式去覆蓋它的一些基礎設定，有助于大家理解boostrap的設計理念。并且在這個任務中添加了一些HTML5和CSS3的現代內容，緊跟web前端開發的時代脈搏。
3.做這個任務需要哪些基礎知識，需要多久才可以把基礎知識完成？
這個任務需要大致看看HTML5和CSS3中新增的標簽和屬性，但不要花太多時間，最多半天做個了解即可。
4.做這個任務設置了哪些具體步驟，為什么這么設計？
按產品的使用邏輯分步制作幾個頁面，這樣在工作中便于向負責人展示每天的工作成果，也是職業素養的鍛煉。
5.做任務的時候會遇到哪些常見的錯誤，需要參考什么樣的參考資料？
透明時為什么連里面的按鈕都一起透明了？這里涉及到css半透明的幾個知識點了，認真看看opacity和rgba之間的區別，想想應該在什么場景下使用他們。以及filter表達式的用處，它們各自的兼容性是如何的。
6.怎么樣才算把這個任務完成了，驗收標準為什么要這么制訂？
首先還是需要還原設計圖，讓頁面一眼看上去和設計圖是基本一致的；其次是改變瀏覽器寬度，保證頁面布局不變；然后是保證在不同分辨率下，上面所用到的圖片都不會被拉伸變形；以及各處文字的垂直居中要做好；最后依舊還是代碼規范問題
7.整個任務需要多久才可以完成，最快的和最慢的會是多長時間？
我們認為這個任務大概需要22個小時即可完成，但每個人的基礎知識學習能力等情況各不相同。對這方面本來就有基礎或者是學習能力特別好的好人可能只需10個小時，而初次接觸這些內容對這方面不是太敏感的同學則可能要花費長大40多個小時的時間。時長在這些時間之內都非常正常，如果有遠遠超出這個時間也未能做出的同學則應該多去請教一下各位完成過任務的師兄們，也許這個時候只需要旁人稍稍提點幾句就能獲得突飛猛進的進步。
8.如果我在做任務的時候遇到了困難，可以跳過任務中的哪些部分？
在這一節里，應該沒什么特別困難的地方，希望所有人都能完成任務。
三、學習任務之前要先學會哪些知識點
1.HTML多媒體標簽
常用的多媒體標簽主要有兩個，分別是<video>和<audio>，作用是解決網頁上視頻和音頻播放問題。
audio的語法格式是：
<audio src="路徑" autoplay="autoplay" controls="true" loop=2></audio>- autoplay：控制網頁加載時是否自動播放
- controls：是否顯示播放控件，默認為不顯示
- loop：用于控制循環次數
video的語法格式是：
<video src="路徑" controls autoplay width="300px"></video>- autoplay：控制網頁加載時是否自動播放
- controls：是否顯示播放控件，默認為不顯示
- loop：用于控制循環次數
- width：設置播放窗口寬度
- height：設置播放窗口高度
2.半透明
根據不同的需求，有多種方法可以實現背景的半透明
2.1 RGBA：在現代瀏覽器中，可以直接用rgba顏色設置，括號中前三個值分別表示顏色紅色，藍色，紅色的色值編碼，第四個值表示透明度，范圍值從0到1分別表示全透明和不透明：
{background-color:rgba(255,255,255,0.1) }2.2 opacity：在向下兼容老式瀏覽器時，可以用這個屬性進行設置：
{filter:alpha(opacity = 50) }2.3 png圖片：使用白色半透明的png圖片。制作一個小的（如10*10）的白色半透明的PNG圖片，將該圖片設置為背景，設置background-repeat:repeat;
四、開始動手做吧
1.（環境搭建）觀察任務描述，揣摩開發要點（0.5小時） 2.（環境搭建）配置本地nginx，本地啟動服務器通過配置的域名訪問新創建的頁面（1小時） 3.（編碼實戰）為所要用的背景圖、頭像、小圖標切圖（1小時） 4.（環境搭建）為項目使用CSS框架Bootstrap（0.5小時） 5.（環境搭建）根據項目實際需求添加自定義樣式表（0.5小時） 6.（編碼實戰）理解頁面邏輯，用html+css寫頁面的第一個頁面：版本選擇（3小時） 7.（編碼實戰）版本選擇頁面注意下方的四個小點使用CSS書寫（1小時） 8.（編碼實戰）版本選擇頁面注意右邊的小三角是相對于整個白框存在，因為游戲版本可能還有更多可以翻到下一頁，但小三角的位置不會改動（1小時） 9.（編碼實戰）書寫任務的第二個頁面：投票（3小時） 10.（知識學習）搜索學習——《html多媒體》（1小時） 11.（編碼實戰）為投票頁面添加音頻播放功能（2小時） 12.（編碼實戰）投票頁面注意每個玩家的方塊上，hover時會出現4個操作選擇（2小時） 13.（編碼實戰）書寫任務的第三個頁面：游戲結果（3小時） 14.（知識學習）通過搜索引擎查看并學習CSS半透明是如何實現的（1小時） 15.（編碼實戰）游戲結果頁面注意頁腳的底色為半透明，但里面的按鈕不會跟著半透明（1小時） 16.（代碼重構）根據代碼規范優化自己的代碼（1小時） 17.（環境搭建）上傳到學員服務器（0.5小時） 18.（代碼調試）使用不同設備訪問網址查看頁面（0.5小時） 19.（思考答疑）查看深度思考，學有余力的情況下嘗試回答深度思考的問題（1小時） 20.（思考答疑）寫日報總結學到的知識點和難點是如何解決的，完成后提交審核（1小時）五、驗收自己的成果
1.各頁面之間css樣式沒有沖突，也就是跳轉后頁面布局不會亂
2.按自己的理解，將幾個頁面之間的鏈接跳轉加上
3.自適應布局，在主流手機上顯示沒有變形
4.配置nginx，能在pc和手機上正常訪問
六、來做一次深度思考
1.什么是CSS sprites？ 點擊查看相關小課堂
2.什么是浮動？有哪些清除浮動的方法？ 點擊查看相關小課堂
3.rgba和opacity的透明效果有什么不同？display和visiblity有什么區別？ 點擊查看相關小課堂
4.描述下z-index和疊加上下文是如何形成的？ 點擊查看相關小課堂
5.如果是在手機上查看投票頁，沒有hover效果時應該怎么辦？ 點擊查看相關小課堂
七、總結自己的知識圖譜
總結任務中遇到的問題困惑和疑難，用自己的語言將學到的知識記錄下來
總結
以上是生活随笔為你收集整理的bootstrap tab 模拟点击_【第七课】Bootstrap的魅力的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 京东新增支持小米 Pay 付款
- 下一篇： @valid 校验_SpringBoot