成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

2016百度前端技術(shù)學(xué)院Task02

venmos / 2959人閱讀

摘要：的演示整個(gè)項(xiàng)目的地址的地址起初只是想簡(jiǎn)單開(kāi)始重新做一遍百度前端技術(shù)學(xué)院的任務(wù)，但是在做的過(guò)程中萌生了要記錄下自己在過(guò)程中遇到的一系列問(wèn)題的想法?，F(xiàn)在我把自己完成的小項(xiàng)目的源碼在上分享出來(lái)，希望可以幫到廣大前端初學(xué)者們。

Task02的演示DEMO：https://amnova.github.io/New-...


整個(gè)項(xiàng)目的GitHub地址：https://github.com/amnova/New...
Task 02的GitHub地址：https://github.com/amnova/New...

起初只是想簡(jiǎn)單開(kāi)始重新做一遍百度前端技術(shù)學(xué)院的任務(wù)，但是在做的過(guò)程中萌生了要記錄下自己在過(guò)程中遇到的一系列問(wèn)題的想法。

這個(gè)專(zhuān)欄將持續(xù)更新。

作為一個(gè)剛剛?cè)腴T(mén)不久，正在摸爬滾打中的學(xué)習(xí)者，我明白動(dòng)手寫(xiě)項(xiàng)目的重要性和意義。
現(xiàn)在我把自己完成的小項(xiàng)目的源碼在Github上分享出來(lái)，希望可以幫到廣大前端初學(xué)者們。
小的項(xiàng)目也包含著大智慧。畢竟復(fù)雜頁(yè)面就是小的組件構(gòu)建起來(lái)的。

記錄，記憶，練習(xí)，整理，學(xué)習(xí)的不二法門(mén)，就在于精準(zhǔn)的刻意練習(xí)。

下面是我在task02完成過(guò)程中復(fù)習(xí)到的知識(shí)點(diǎn)的整理。
這個(gè)DEMO我主要磨練掌握的技能

導(dǎo)航欄制作的復(fù)習(xí)（設(shè)置line-height實(shí)現(xiàn)文字垂直居中對(duì)齊的小技巧）

HTML5 新標(biāo)簽

的用法掌握

怎么做一個(gè)好看的表格？

怎么根據(jù)要求對(duì)齊表單控件？

頁(yè)面整體的布局練習(xí)

小樂(lè)趣：給網(wǎng)頁(yè)標(biāo)題前加一個(gè)可愛(ài)的小圖標(biāo)

這個(gè)DEMO涉及的我的知識(shí)盲區(qū) 
簡(jiǎn)單把曾經(jīng)遺忘的東西記錄一下，下一次打開(kāi)時(shí)我就會(huì)輕松憶起往昔的痛苦和迷茫
1.點(diǎn)擊鏈接后，如何在新的窗口打開(kāi)相應(yīng)鏈接？ 
我是一個(gè)賤萌賤萌的鏈接
2.box-shadow怎么用來(lái)著？

忘記了box-shadow怎么玩起來(lái)？下面是box-shadow的標(biāo)志性用法

div{
    box-shadow: 5px 5px 5px rgba(0,0,0,.6);
}
3.border-radius也忘了？

典型用法

input[type="submit"] {
    border-radius: 10px;
}

(掌握基本的經(jīng)典用法就好啦，這個(gè)就是最常用的，其他復(fù)雜的參數(shù)了解就好，沒(méi)必要一蹴而就的全都死記硬背。畢竟人的精力有限啊，況且記憶力也并不可靠)

4.深度學(xué)習(xí)帶標(biāo)題的圖像

https://www.w3.org/Style/Exam...

HTML:
    

        
新年快樂(lè)

        
    

    
CSS:
    article figure {
    border: 1px solid #999;
    width: 100px;
    padding:10px;
    text-align: center;
}

    article figure img {
    width: 100px;
}
5.掌握好看的表格

跨列和跨行 colspan , rowspan

6.掌握好看的表單

label有兩種用法，通過(guò)給label設(shè)置for屬性，或者直接用

運(yùn)用 fieldset 和 legend 組合表單控件們

HTML:
    

        聯(lián)系信息
7.表單控件怎么對(duì)齊？

用浮動(dòng)標(biāo)題的方法對(duì)齊表單控件們（詳見(jiàn)CSS代碼注釋部分）

用display:inline-block 實(shí)現(xiàn)對(duì)控件的名稱(chēng)部分（對(duì)應(yīng)HTML 是

inline-block 產(chǎn)生神秘間距的小秘密
點(diǎn)擊我

上面鏈接的原文地址：
http://www.zhangxinxu.com/wor...

相關(guān)內(nèi)容的擴(kuò)展閱讀（有關(guān)display：inline-block)
http://www.zhangxinxu.com/wor...

8.設(shè)置了寬度，margin:0 atuo 才起作用？

是的，就是因?yàn)楹雎粤诉@一點(diǎn)，我為表單設(shè)置居中效果失敗了。

而當(dāng)為form設(shè)置了width:800px;我不僅得到了效果，而且驚喜的解決了之前么有理解的問(wèn)題，就是收縮視窗之后，內(nèi)容不會(huì)變形，不會(huì)流動(dòng)起來(lái)，而是維持原樣。原來(lái)這才是流式布局和凍結(jié)布局的巧妙運(yùn)用！

之前學(xué)習(xí)整理的幾種經(jīng)典布局不僅是對(duì)整個(gè)頁(yè)面，頁(yè)面中的某一部分也可以異曲同工之妙的運(yùn)用起來(lái)。把某個(gè)div當(dāng)做是body一樣的運(yùn)用！ 這里就是這樣的，我對(duì)form其實(shí)是運(yùn)用起來(lái)了之前學(xué)習(xí)到的凍結(jié)布局，實(shí)現(xiàn)了我想要的效果！

9.為網(wǎng)頁(yè)標(biāo)簽的標(biāo)題前加一個(gè)有趣的icon？

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115470.html

相關(guān)文章

  • 2016百度前端技術(shù)學(xué)院Task02

    摘要：的演示整個(gè)項(xiàng)目的地址的地址起初只是想簡(jiǎn)單開(kāi)始重新做一遍百度前端技術(shù)學(xué)院的任務(wù)，但是在做的過(guò)程中萌生了要記錄下自己在過(guò)程中遇到的一系列問(wèn)題的想法?，F(xiàn)在我把自己完成的小項(xiàng)目的源碼在上分享出來(lái)，希望可以幫到廣大前端初學(xué)者們。 Task02的演示DEMO：https://amnova.github.io/New-... 整個(gè)項(xiàng)目的GitHub地址：https://github.com/amn...

    lolomaco 評(píng)論0 收藏0

  • 從2018百度前端技術(shù)學(xué)院看代碼究竟應(yīng)該怎么寫(xiě)(1)

    任務(wù)描述 參考以下示例代碼，補(bǔ)充其中的JavaScript功能，完成一個(gè)JavaScript代碼的編寫(xiě)本任務(wù)完成的功能為：用戶可以在輸入框中輸入任何內(nèi)容，點(diǎn)擊確認(rèn)填寫(xiě)按鈕后，用戶輸入的內(nèi)容會(huì)顯在您輸入的值是文字的右邊 IFE JavaScript Task 01 請(qǐng)輸入北京今天空氣質(zhì)量： 確認(rèn)填寫(xiě) 您輸入的值是：尚無(wú)錄入 (function...

    Cobub 評(píng)論0 收藏0

  • 從2018百度前端技術(shù)學(xué)院看代碼究竟應(yīng)該怎么寫(xiě)(2)

    摘要：任務(wù)描述參考以下示例代碼，頁(yè)面加載后，將提供的空氣質(zhì)量數(shù)據(jù)數(shù)組，按照某種邏輯比如空氣質(zhì)量大于進(jìn)行過(guò)濾篩選，最后將符合條件的數(shù)據(jù)按照一定的格式要求顯示在網(wǎng)頁(yè)上污染城市列表第一名福州樣例，第二名福州樣例，北京上海福州廣州成都西安在注 任務(wù)描述 參考以下示例代碼，頁(yè)面加載后，將提供的空氣質(zhì)量數(shù)據(jù)數(shù)組，按照某種邏輯（比如空氣質(zhì)量大于60）進(jìn)行過(guò)濾篩選，最后將符合條件的數(shù)據(jù)按照一定的格式要求顯示...

    sixleaves 評(píng)論0 收藏0

  • 百度前端學(xué)院小斌學(xué)院任務(wù)四

    摘要：任務(wù)目的學(xué)習(xí)與實(shí)踐的基本語(yǔ)法語(yǔ)言特性初步了解的事件是什么初步了解中的是什么任務(wù)描述如圖，模擬一個(gè)隊(duì)列，隊(duì)列的每個(gè)元素是一個(gè)數(shù)字，初始隊(duì)列為空有一個(gè)輸入框，以及個(gè)操作按鈕點(diǎn)擊左側(cè)入，將中輸入的數(shù)字從左側(cè)插入隊(duì)列中點(diǎn)擊右側(cè)入，將中輸入的數(shù)字從右 任務(wù)目的學(xué)習(xí)與實(shí)踐JavaScript的基本語(yǔ)法、語(yǔ)言特性初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任務(wù)...

    zhoutk 評(píng)論0 收藏0

  • 百度前端學(xué)院小斌學(xué)院任務(wù)四

    摘要：任務(wù)目的學(xué)習(xí)與實(shí)踐的基本語(yǔ)法語(yǔ)言特性初步了解的事件是什么初步了解中的是什么任務(wù)描述如圖，模擬一個(gè)隊(duì)列，隊(duì)列的每個(gè)元素是一個(gè)數(shù)字，初始隊(duì)列為空有一個(gè)輸入框，以及個(gè)操作按鈕點(diǎn)擊左側(cè)入，將中輸入的數(shù)字從左側(cè)插入隊(duì)列中點(diǎn)擊右側(cè)入，將中輸入的數(shù)字從右 任務(wù)目的學(xué)習(xí)與實(shí)踐JavaScript的基本語(yǔ)法、語(yǔ)言特性初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任務(wù)...

    sorra 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<