摘要:的演示整個項目的地址的地址起初只是想簡單開始重新做一遍百度前端技術學院的任務,但是在做的過程中萌生了要記錄下自己在過程中遇到的一系列問題的想法。現在我把自己完成的小項目的源碼在上分享出來,希望可以幫到廣大前端初學者們。
Task02的演示DEMO:https://amnova.github.io/New-...
整個項目的GitHub地址:https://github.com/amnova/New...
Task 02的GitHub地址:https://github.com/amnova/New...
起初只是想簡單開始重新做一遍百度前端技術學院的任務,但是在做的過程中萌生了要記錄下自己在過程中遇到的一系列問題的想法。
這個專欄將持續更新。
作為一個剛剛入門不久,正在摸爬滾打中的學習者,我明白動手寫項目的重要性和意義。
現在我把自己完成的小項目的源碼在Github上分享出來,希望可以幫到廣大前端初學者們。
小的項目也包含著大智慧。畢竟復雜頁面就是小的組件構建起來的。
記錄,記憶,練習,整理,學習的不二法門,就在于精準的刻意練習。
這個DEMO我主要磨練掌握的技能下面是我在task02完成過程中復習到的知識點的整理。
導航欄制作的復習(設置line-height實現文字垂直居中對齊的小技巧)
HTML5 新標簽
怎么做一個好看的表格?
怎么根據要求對齊表單控件?
頁面整體的布局練習
小樂趣:給網頁標題前加一個可愛的小圖標
這個DEMO涉及的我的知識盲區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; }
(掌握基本的經典用法就好啦,這個就是最常用的,其他復雜的參數了解就好,沒必要一蹴而就的全都死記硬背。畢竟人的精力有限啊,況且記憶力也并不可靠)
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:7.表單控件怎么對齊?
用浮動標題的方法對齊表單控件們(詳見CSS代碼注釋部分)
用display:inline-block 實現對控件的名稱部分(對應HTML 是
inline-block 產生神秘間距的小秘密
點擊我
上面鏈接的原文地址:
http://www.zhangxinxu.com/wor...
相關內容的擴展閱讀(有關display:inline-block)
http://www.zhangxinxu.com/wor...
是的,就是因為忽略了這一點,我為表單設置居中效果失敗了。
而當為form設置了width:800px;我不僅得到了效果,而且驚喜的解決了之前么有理解的問題,就是收縮視窗之后,內容不會變形,不會流動起來,而是維持原樣。原來這才是流式布局和凍結布局的巧妙運用!
之前學習整理的幾種經典布局不僅是對整個頁面,頁面中的某一部分也可以異曲同工之妙的運用起來。把某個div當做是body一樣的運用! 這里就是這樣的,我對form其實是運用起來了之前學習到的凍結布局,實現了我想要的效果!
9.為網頁標簽的標題前加一個有趣的icon?文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/115470.html
摘要:的演示整個項目的地址的地址起初只是想簡單開始重新做一遍百度前端技術學院的任務,但是在做的過程中萌生了要記錄下自己在過程中遇到的一系列問題的想法。現在我把自己完成的小項目的源碼在上分享出來,希望可以幫到廣大前端初學者們。 Task02的演示DEMO:https://amnova.github.io/New-... 整個項目的GitHub地址:https://github.com/amn...
任務描述 參考以下示例代碼,補充其中的JavaScript功能,完成一個JavaScript代碼的編寫本任務完成的功能為:用戶可以在輸入框中輸入任何內容,點擊確認填寫按鈕后,用戶輸入的內容會顯在您輸入的值是文字的右邊 IFE JavaScript Task 01 請輸入北京今天空氣質量: 確認填寫 您輸入的值是:尚無錄入 (function...
摘要:任務描述參考以下示例代碼,頁面加載后,將提供的空氣質量數據數組,按照某種邏輯比如空氣質量大于進行過濾篩選,最后將符合條件的數據按照一定的格式要求顯示在網頁上污染城市列表第一名福州樣例,第二名福州樣例,北京上海福州廣州成都西安在注 任務描述 參考以下示例代碼,頁面加載后,將提供的空氣質量數據數組,按照某種邏輯(比如空氣質量大于60)進行過濾篩選,最后將符合條件的數據按照一定的格式要求顯示...
摘要:任務目的學習與實踐的基本語法語言特性初步了解的事件是什么初步了解中的是什么任務描述如圖,模擬一個隊列,隊列的每個元素是一個數字,初始隊列為空有一個輸入框,以及個操作按鈕點擊左側入,將中輸入的數字從左側插入隊列中點擊右側入,將中輸入的數字從右 任務目的學習與實踐JavaScript的基本語法、語言特性初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任務...
摘要:任務目的學習與實踐的基本語法語言特性初步了解的事件是什么初步了解中的是什么任務描述如圖,模擬一個隊列,隊列的每個元素是一個數字,初始隊列為空有一個輸入框,以及個操作按鈕點擊左側入,將中輸入的數字從左側插入隊列中點擊右側入,將中輸入的數字從右 任務目的學習與實踐JavaScript的基本語法、語言特性初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任務...
閱讀 2092·2021-11-02 14:48
閱讀 2768·2019-08-30 14:19
閱讀 2937·2019-08-30 13:19
閱讀 1304·2019-08-29 16:17
閱讀 3242·2019-08-26 14:05
閱讀 2997·2019-08-26 13:58
閱讀 3083·2019-08-23 18:10
閱讀 1111·2019-08-23 18:04