最近常常會用到的google字型，先記錄下來，之後再整理~
分類：CSS
物件左右置中：text-align:center;、margin:0 auto; 的區別
網頁裡物件要置中對齊的方法主要有2種，margin:0 auto 與 text-align:center，這兩種方式有什麼不同，下面用範例來解說
純css控制div, iframe物件(youtube, google map…)長寬比， RWD 等比例縮放 | pure CSS make div, iframe element keep aspect ratio with RWD
iframe物件通常會在html裡直接設定尺寸，但製作RWD網頁時都是在css裡根據不同media制定Media Queries 媒體查詢，因此大家常常會用jQuery的方式直接計算寬高比，只是這個方法會讓網頁載入的時間延遲一點點，這一篇就介紹如何只用CSS來控制iframe物件的寬高比。
RWD網頁切版(六){CSS float屬性：物件全部靠右且不併排}
RWD網頁切版(五){CSS float屬性：2欄排版3種設定方式}
2欄式網頁是最常見的排版之一，常用的方式有float和inline-block這種方式，這一篇介紹float的3種不同設定方法。
RWD網頁切版(四){CSS float屬性：浮動 / 併排}
網頁上免不了要用到的區塊併排，常用的方式有float和inline-block這種方式，這一篇介紹float的設定方法和相關應用。
RWD網頁切版(三){CSS控制div，用id、class選取器}
雖然html5新增了很多專用的標籤，但整個網頁的構成，主要還是依靠一層又一層的div標籤來完成的，這一篇來瞭解最基本的div控制方式。
RWD網頁切版(零){HTML網頁架構、常用標籤}
RWD網頁切版
RWD網頁切版可以分成幾個部份慢慢學習，這一篇當目錄
- RWD網頁切版(零){HTML網頁架構、常用標籤}
- RWD網頁切版(一){HTML5網頁框架}
- RWD網頁切版(二){CSS如何控制HTML物件、常用css屬性}
- RWD網頁切版(三){CSS控制div，用id、class選取器}
- RWD網頁切版(四){CSS float屬性：浮動 / 併排}
- RWD網頁切版(五){CSS float屬性：2欄排版3種設定方式}
- RWD網頁切版(六){CSS float屬性：物件全部靠右且不併排}
- RWD網頁切版(七){物件左右置中：text-align、margin: 0 auto;}
- RWD網頁切版(八){認識絕對路徑和相對路徑}
- RWD網頁切版(){CSS position屬性 – 打破html排序的物件}
- RWD網頁切版(){CSS overflow屬性 – 隱藏超出的範圍、顯示捲軸}
- RWD網頁切版(){物件併排 – display: inline-block;}
- RWD網頁切版(){nav選單 – nav ul li}
- RWD網頁切版(){nav選單：多層選單 – 垂直}
- RWD網頁切版(){nav選單：多層選單 – 水平}
- RWD網頁切版(){手機版選單：上方選單}
- RWD網頁切版(){手機版選單：側欄選單}
網頁框架切版練習
- RWD網頁切版 – 基本網頁框架練習(一)
- RWD網頁切版 – 在頁面上固定位置的廣告欄位
Dreamweaver基本操作部份：
- Dreamweaver CC 2017 工作介面介紹、同時檢示程式碼與設計結果
- Dreamweaver 開新檔案、存檔、在瀏覽器預覽結果
- Dreamweaver 建立管理網站 – 不用再記相對路徑
- Dreamweaver 套用原始碼格式 – 輕鬆整理網頁原始碼
- Dreamweaver CSS設計工具 連結css檔
- Dreamweaver CC CSS設計工具面板中文
相關文章：
css 文字強制換行、強制不換行 | css word break, word wrap
強制不換行
div{
white-space:nowrap;
}
自動換行(依英文單字斷行)
div{
word-wrap:break-word;
word-break:normal;
}
強制英文單字斷行
div{
word-break:break-all;
}
pre物件
pre {
width:640px;/* 下面沒效的話可以再設定寬度 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
width:640px;/* 下面沒效的話可以再設定寬度 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
