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

lolomaco 發(fā)布于2019-08-01 16:09 / 2126人閱讀

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

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

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

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

這個專欄將持續(xù)更新。

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

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

下面是我在task02完成過程中復(fù)習(xí)到的知識點(diǎn)的整理。

這個DEMO我主要磨練掌握的技能

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

HTML5 新標(biāo)簽

的用法掌握

怎么做一個好看的表格？

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

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

小樂趣：給網(wǎng)頁標(biāo)題前加一個可愛的小圖標(biāo)
**這個DEMO涉及的我的知識盲區(qū)**
簡單把曾經(jīng)遺忘的東西記錄一下，下一次打開時我就會輕松憶起往昔的痛苦和迷茫
**1.點(diǎn)擊鏈接后，如何在新的窗口打開相應(yīng)鏈接？**
我是一個賤萌賤萌的鏈接
**2.box-shadow怎么用來著？**
忘記了box-shadow怎么玩起來？下面是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)典用法就好啦，這個就是最常用的，其他復(fù)雜的參數(shù)了解就好，沒必要一蹴而就的全都死記硬背。畢竟人的精力有限啊，況且記憶力也并不可靠)
**4.深度學(xué)習(xí)帶標(biāo)題的圖像**
https://www.w3.org/Style/Exam...

HTML:

新年快樂

CSS: article figure { border: 1px solid #999; width: 100px; padding:10px; text-align: center; } article figure img { width: 100px; }
**5.掌握好看的表格**
跨列和跨行 colspan , rowspan
**6.掌握好看的表單**
label有兩種用法，通過給label設(shè)置for屬性，或者直接用標(biāo)簽包圍相應(yīng)的文字和控件。

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

HTML:
聯(lián)系信息 Email:
Tel:

**7.表單控件怎么對齊？**
用浮動標(biāo)題的方法對齊表單控件們（詳見CSS代碼注釋部分）

用display:inline-block 實(shí)現(xiàn)對控件的名稱部分（對應(yīng)HTML 是等行內(nèi)元素）設(shè)置寬度，然后text-align:right實(shí)現(xiàn)想要的效果（代碼詳見task02的css文件）

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;我不僅得到了效果，而且驚喜的解決了之前么有理解的問題，就是收縮視窗之后，內(nèi)容不會變形，不會流動起來，而是維持原樣。原來這才是流式布局和凍結(jié)布局的巧妙運(yùn)用！

之前學(xué)習(xí)整理的幾種經(jīng)典布局不僅是對整個頁面，頁面中的某一部分也可以異曲同工之妙的運(yùn)用起來。**把某個div當(dāng)做是body一樣的運(yùn)用**！這里就是這樣的，我對form其實(shí)是運(yùn)用起來了之前學(xué)習(xí)到的凍結(jié)布局，實(shí)現(xiàn)了我想要的效果！
**9.為網(wǎng)頁標(biāo)簽的標(biāo)題前加一個有趣的icon？**

GPU云服務(wù)器云服務(wù)器前端學(xué)院前端開發(fā)2016 技術(shù)學(xué)院思科網(wǎng)絡(luò)技術(shù)學(xué)院

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50336.html

相關(guān)文章

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

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

venmos 2019-08-30 13:19 評論0 收藏0
從2018百度前端技術(shù)學(xué)院看代碼究竟應(yīng)該怎么寫(1)

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

Cobub 2019-08-21 11:43 評論0 收藏0
從2018百度前端技術(shù)學(xué)院看代碼究竟應(yīng)該怎么寫(2)

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

sixleaves 2019-08-21 11:42 評論0 收藏0
百度前端學(xué)院小斌學(xué)院任務(wù)四

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

zhoutk 2019-08-20 16:24 評論0 收藏0
百度前端學(xué)院小斌學(xué)院任務(wù)四

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

sorra 2019-08-01 16:47 評論0 收藏0