2016百度前端技術學院Task02

amnova發表於2019-02-16
前端

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

整個專案的GitHub地址：https://github.com/amnova/New…
Task 02的GitHub地址：https://github.com/amnova/New…

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

這個專欄將持續更新。

作為一個剛剛入門不久，正在摸爬滾打中的學習者，我明白動手寫專案的重要性和意義。
現在我把自己完成的小專案的原始碼在Github上分享出來，希望可以幫到廣大前端初學者們。
小的專案也包含著大智慧。畢竟複雜頁面就是小的元件構建起來的。

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

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

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

  • 導航欄製作的複習（設定line-height實現文字垂直居中對齊的小技巧）

  • HTML5 新標籤<figure> <figcaption> 的用法掌握

  • 怎麼做一個好看的表格？

  • 怎麼根據要求對齊表單控制元件？

  • 頁面整體的佈局練習

  • 小樂趣：給網頁標題前加一個可愛的小圖示

這個DEMO涉及的我的知識盲區

簡單把曾經遺忘的東西記錄一下，下一次開啟時我就會輕鬆憶起往昔的痛苦和迷茫

1.點選連結後，如何在新的視窗開啟相應連結？

<a href="#" target="_blank">我是一個賤萌賤萌的連結<a>

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:
    <figure>
        <figcaption>新年快樂</figcaption>
        <img src="imgs/01_edit.png">
    </figure>
    
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屬性，或者直接用<label>標籤包圍相應的文字和控制元件。

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

HTML:
    <fieldset>
        <legend>聯絡資訊</legend>
        <label>
            Email: <br>
            <input type="text" name="email">
        </label>
        <label>
            Tel:<br>
            <input type="text" name="tel">
        </label>
    </fieldset>

7.表單控制元件怎麼對齊？

  • 用浮動標題的方法對齊表單控制元件們（詳見CSS程式碼註釋部分）

  • 用display:inline-block 實現對控制元件的名稱部分（對應HTML 是<label><span>等行內元素）設定寬度，然後text-align:right實現想要的效果（程式碼詳見task02的css檔案）

  • inline-block 產生神祕間距的小祕密
    點選我

上面連結的原文地址：
http://www.zhangxinxu.com/wor…

相關內容的擴充套件閱讀（有關display：inline-block)
http://www.zhangxinxu.com/wor…

8.設定了寬度，margin:0 atuo 才起作用？

是的，就是因為忽略了這一點，我為表單設定居中效果失敗了。

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

之前學習整理的幾種經典佈局不僅是對整個頁面，頁面中的某一部分也可以異曲同工之妙的運用起來。把某個div當做是body一樣的運用！ 這裡就是這樣的，我對form其實是運用起來了之前學習到的凍結佈局，實現了我想要的效果！

9.為網頁標籤的標題前加一個有趣的icon？

<link rel="icon" src="imgs/xx.ico" type="image/x-icon">

相關文章