[Full-stack] 網頁佈局藝術 - Less

故事背景


 

一個過程:css

template/html ----> css ----> less ----> bootstrap/flex ----> Semantic-uihtml

 

flex是css3新增內容, less是css3的預編譯器,bootstrap是一系列css3 class合集css3

Semantic-ui做爲一款開發框架,幫助開發者使用對人類友好的HTML語言構建優雅的響應式佈局。ajax

 

響應式佈局 based on Semantic-ui as following: bootstrap

 

 

 

 

進化史


1、HTML 基礎

Goto: [Node.js] 07 - Html and Http瀏覽器

 
 

2、CSS 基礎

Goto: [UI] 01 - CSS框架

  • 選擇器
選擇器 class 選擇器
id 選擇器

分組方式簡寫法less

也能夠嵌套寫法ide

也能夠組合寫法佈局

 

  • 樣式表
優先級
1 (內聯樣式)Inline style
2 (內部樣式)Internal style sheet
3 (外部樣式)External style sheet
4 瀏覽器默認樣式 

 

  • 屬性控制

背景、文本、列表、表格、可見、內聯。

 

  • 空間位置

首先、要了解盒子模型。

其次、position定位屬性的五個值。

以後、圖片浮動效果。

最後、對齊。

 

  • 僞類、僞元素

冒號後面緊跟着的一些特性。

 

 

3、CSS 佈局

Goto: [UI] 02 - Layout & CSS3

這裏展現了 經過基本的CSS建立的頁面風格;與以後的bootstrap作對比。

 

 

4、jQuery

Ref: [UI] 06 - jQuery

  • 組件 與 jQuery 事件
<script>
$(document).ready( function(){
  $("button").click( function(){   # <button>...</button>
    $("#test").hide();         # <p id="test">...</p>
  });
});
</script>

 

  • 效果

淡入淡出、下拉菜單、動畫

Callback 方法、鏈(Chaining)

 

  • DOM 操做 
HTML 設置內容,設置屬性,插入內容,刪除元素。
CSS 設置一個或多個屬性,返回屬性。

 

  • 對象 size 獲取

高寬,內高寬,外高寬。

 

  • 獲取對象 - 遍歷

得到parents, childern, siblings 

 

  • AJAX

Ref: Difference between $.ajax() and $.get() and $.load()

get() 和post() 就是ajax() 的get方法和post方法,

load() 也同樣,可是load()能夠加載到一個選定的元素中。

  

  • jQuery 插件

一些高級控件的使用。

 

 

 

Bootstrap


bootstrap是一個響應式框架,基於Jquery。

[UI] 03 - Bootstrap: component

[UI] 04 - Bootstrap: layout & navigation

[UI] 05 - Bootstrap: built-in components

 

1、基礎操做

排版 主標題、副標題
內容強調
對齊風格
代碼
表格
表單 水平表單
下拉選擇框
文本框(包括驗證)
複選框、單選按鈕
按鈕
圖片 圖像
圖標
網格系統 詳見原連接

 

 

2、菜單欄

導航條 

  - 按鈕下拉菜單

  - 一組按鈕構成導航

  - 導航與按鈕下拉菜單結合

分頁導航

翻頁導航

標籤

 

 

3、內置組件

縮略圖配文字和連接(按鈕)

警示框 - 逐漸消失

進度條 - 五光十色版本

媒體對象 - 圖片與文字的佈局

列表組 - 含標籤

面板 - 圓角且內部分塊 

彈出窗口 - dialog box

 

 

 

PHP 模板


1、PHP 視圖

Ref: [Laravel] 04 - Blade templates

section, yield, extends, parent 四個關鍵字。

 

continue... 

相關文章
相關標籤/搜索