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