最近常常會用到的google字型,先記錄下來,之後再整理~
閱讀全文 網頁一定要用的google中文字型
分類彙整: CSS
物件左右置中:text-align:center;、margin:0 auto; 的區別
網頁裡物件要置中對齊的方法主要有2種,margin:0 auto 與 text-align:center,這兩種方式有什麼不同,下面用範例來解說
閱讀全文 物件左右置中:text-align:center;、margin:0 auto; 的區別
純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物件的寬高比。
閱讀全文 純css控制div, iframe物件(youtube, google map…)長寬比, RWD 等比例縮放 | pure CSS make div, iframe element keep aspect ratio with RWD
RWD網頁切版(六){CSS float屬性:物件全部靠右且不併排}
想要製作全部靠右且不併排的區塊,只要加上float屬性之後再做一些調整就可以了
閱讀全文 RWD網頁切版(六){CSS float屬性:物件全部靠右且不併排}
RWD網頁切版(五){CSS float屬性:2欄排版3種設定方式}
2欄式網頁是最常見的排版之一,常用的方式有float和inline-block這種方式,這一篇介紹float的3種不同設定方法。
閱讀全文 RWD網頁切版(五){CSS float屬性:2欄排版3種設定方式}
RWD網頁切版(四){CSS float屬性:浮動 / 併排}
網頁上免不了要用到的區塊併排,常用的方式有float和inline-block這種方式,這一篇介紹float的設定方法和相關應用。
閱讀全文 RWD網頁切版(四){CSS float屬性:浮動 / 併排}
RWD網頁切版(三){CSS控制div,用id、class選取器}
雖然html5新增了很多專用的標籤,但整個網頁的構成,主要還是依靠一層又一層的div標籤來完成的,這一篇來瞭解最基本的div控制方式。
閱讀全文 RWD網頁切版(三){CSS控制div,用id、class選取器}
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
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+ */
}