2016百度前端技術學院Task02

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

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

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

整個項目的GitHub地址：https://github.com/amnova/New...
Task 02的GitHub地址：https://github.com/amnova/New...

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

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

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

記錄，記憶，練習，整理，學習的不二法門，就在于精準的刻意練習。

下面是我在task02完成過程中復習到的知識點的整理。

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

導航欄制作的復習（設置line-height實現(xiàn)文字垂直居中對齊的小技巧）

HTML5 新標簽

的用法掌握

怎么做一個好看的表格？

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

頁面整體的布局練習

小樂趣：給網(wǎng)頁標題前加一個可愛的小圖標
**這個DEMO涉及的我的知識盲區(qū)**
簡單把曾經(jīng)遺忘的東西記錄一下，下一次打開時我就會輕松憶起往昔的痛苦和迷茫
**1.點擊鏈接后，如何在新的窗口打開相應鏈接？**
我是一個賤萌賤萌的鏈接
**2.box-shadow怎么用來著？**
忘記了box-shadow怎么玩起來？下面是box-shadow的標志性用法

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

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

(掌握基本的經(jīng)典用法就好啦，這個就是最常用的，其他復雜的參數(shù)了解就好，沒必要一蹴而就的全都死記硬背。畢竟人的精力有限啊，況且記憶力也并不可靠)
**4.深度學習帶標題的圖像**
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設置for屬性，或者直接用標簽包圍相應的文字和控件。

運用 fieldset 和 legend 組合表單控件們

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

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

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

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

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

相關內(nèi)容的擴展閱讀（有關display：inline-block)
http://www.zhangxinxu.com/wor...
**8.設置了寬度，margin:0 atuo 才起作用？**
是的，就是因為忽略了這一點，我為表單設置居中效果失敗了。

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

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

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

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

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

2016百度前端技術學院Task02

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

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

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

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

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

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

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

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

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

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