> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/html-css-learning/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/html-css-learning/shi-er-3001-jie-xia-lai-ff0c-ni-huan-ke-yi-xue-shi-me-ff1f.md).

# 十二、接下來，你還可以學什麼？

## 12-84 響應式網頁設計（Responsive Web Design）

可以兼容瀏覽器，是使用 CSS 的技巧實現

* [ 響應式網頁設計 教學 - YouTube](https://www.youtube.com/watch?v=WDVdmlb9zaY)
* [gonsakon/Responsive-boilerplate ](https://github.com/gonsakon/Responsive-boilerplate)  範例程式碼，自適應樣本

網頁寬度 = 裝置寬度

```markup
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

當裝置寬度最大寬度只有到某個值時，那就套用某些CSS設定

```css
/* ipad 直式 */
/* 768 是預設寬度 */
/* 767 可能是想螢幕有縮放時，修改版型 */
@media only screen and (max-width: 767px){
    .product_list li {
        background: #000;
    }
}

/* 手機 */
/* 可以只留 @media 就好 */
@media only screen and (max-width: 320){
    .wrap {
        width: 32px;
    }
    .product_list li {
        background: yellow;
    }
}
```

### news sample

三欄式版型

* 寬度用趴數，
* .wrap 用 max-width

```css
.wrap {
    max-width: 960px;
    padding-top: 20px;
    margin: 0 auto;
    line-light: 1.5;
}

.news li {
    width: 31.33333%;
    margin-right: 1%;
    margin-left: 1%;
    margin-bottom: 1em;
    float: left;
}

@media (max-width: 768px){
    .news li {
        width: 48%;
    }
}

/* iphone5 橫式 569 */
@media (max-width: 569px){
    .news li {
        width: 98%;
    }
}
```

### imgFloat

讓圖片能跟著自適應

* 圖片寬度用啪樹，或 max-width
* img 的 css reset，八五趴人會用

```css
/* 圖片的 css reset */
img {
    max-width: 100%;
    hieght: auto;
}

img {
    padding: 10px;
    border: 2px solid gray;
    margin-right: 10px;
    margin-bottom: 0px;
}

@media (max-width: 480px){
    width: 50%;
    /* 也可以寫 max-width: 500px; */
    padding: 5px;
    border: 1px solid gray;
    margin-right: 0px;
}
```

### menu-change

在 768 的時候，讓多欄選單變成單欄選單

```css
li {
    float: left;
    background: green;
    border-right: 1px solid #fff;
}

/* 單欄 */
@media (max-width: 767px){
    width: 90%;
    float: none;
    margin: 0 auto 10px auto;
    border-radius: 3px;
}

/* 雙欄 */
@media (max-width: 767px){
    width: 45%;
    float: left;
    margin: 0 auto 10px auto;
    border-radius: 3px;
}
```

### menu-hide

用手機時，不是所有東西都要擠進去

```css
@media (max-width: 480px){
    .other_side {
        display: none;
    }
}
```

### layout

如何讓原先在 pc 版面下使用絕對定位的 logo，在手機版面可以自適應

讓 pc 下內容與側欄的左右排版，在手機版時側欄掉下去

```css
.logo {
    position: absolute;
    top: 30px;
    left: 0px;
}
.logo a {
    display: block;
    width: 250px;
    text-indent: -99999px;
    height: 250px;
    background: url(../image/M1.png)
}

@media (max-width: 768px){
    .logo {
        position: relative;
        margin: 0 auto;
        width: 150px;
    }
    .logo {
        display: block;
        width: 150px;
        height: 170px;
        background: url(../images/M2.png) no-repeat;
    }
}
```

## 12-85 如何從網路上找到適合自己的學習教材

### 關鍵字搜尋技巧

* jquery 教學
* 加双引號，文字不會斷掉 "jquery" "教學"
* filetype:pdf，尋找特定檔案類型的連結

### 找「自己看得懂」的教學文章

* w3c，但像字典，枯燥乏味
* 找 blog，可以看文筆，找看的順眼的
* google 找前幾筆好讀的文章，例如 css float 範例

### 永遠抱持猜測態度，不要盡信

* 例如，找 jquery lightbox 效果
* 看排序(熱度)，以及文章發表日期
* 搜尋工具，查過去一年
* 不限語言 -> 中文

### Youtube 也是很好的搜尋管道

* jquery

### 圖片搜尋也是很好管道

* coffee templete
* 想找日本版型，把單字轉成日文，再圖片搜尋

### 搜尋別人在 Github 寫的程式碼

* css hover
* 用 github 有兩個動機
* 找套件。找 star 多的
* 學習時，找跟自己程度差不多的程式碼
  * angular todolist demo，找星星數少的
* 初學時，需要 api、文件一個一個慢慢學嗎？
* 可以看 sample

### 寫一份自學文件或資源連結區

* 學新技術，習慣用 hackpad 開專欄
  * 自己的 todolist
  * 自己的字典
* 資源分類
  * 程式字典
  * 蒐集的 Blog 文章
  * 學習 todolist，瞭解有哪些原理還要再多找資源補充

### 都搜尋不到，也卡關了，怎麼辦？（這招超有用）

站起來動一動

持續培養自己 Google 的能力，讓你能蓋在短時間內成為自學達人 希望大家都能成為 Google 工程師 (咦)

## 12-86 網頁關鍵字速記表

* <https://drive.google.com/file/d/0B2e3VLlpmcU4aTlhdlhzTGgzVUE/view>

![](https://i.imgur.com/Fp5TmTC.png)