Suche senden
Hochladen
現代化網頁基礎排版技術
•
20 gefällt mir
•
4,985 views
洧杰 廖
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 65
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Vertical rhythm
Vertical rhythm
洧杰 廖
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
洧杰 廖
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
洧杰 廖
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
wantingj
SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
Zhu Qi
Empfohlen
Vertical rhythm
Vertical rhythm
洧杰 廖
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
洧杰 廖
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
洧杰 廖
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
wantingj
SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
Zhu Qi
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Adam Wang
網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架
Vincent Chi
Style基础优化之独角兽篇
Style基础优化之独角兽篇
fangdeng
Flexbox版面配置
Flexbox版面配置
景智 張
從CSS到SASS的開發旅程
從CSS到SASS的開發旅程
Anna Su
老成的Sass&Compass
老成的Sass&Compass
智遠 成
SASS入門實作
SASS入門實作
Kingsley Zheng
Introduction to CSS Framwork
Introduction to CSS Framwork
TechParty@UIC
教網部落格模版設計
教網部落格模版設計
rainlan
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
知世‧安索帕 台北 (使用經驗設計中心)
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
twMVC
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
百範 陳
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
Yi-Feng Xie
Semantic ui教學
Semantic ui教學
Tien-Yang (Aiden) Wu
Alice库构建
Alice库构建
Sofish Lin
Fitness Club 範例網站建置
Fitness Club 範例網站建置
Molly Lin
6. CSS
6. CSS
riomusi
CSS 分享 (5) Ending
CSS 分享 (5) Ending
知世‧安索帕 台北 (使用經驗設計中心)
一拳前端考題
一拳前端考題
洧杰 廖
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
Weitere ähnliche Inhalte
Was ist angesagt?
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Adam Wang
網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架
Vincent Chi
Style基础优化之独角兽篇
Style基础优化之独角兽篇
fangdeng
Flexbox版面配置
Flexbox版面配置
景智 張
從CSS到SASS的開發旅程
從CSS到SASS的開發旅程
Anna Su
老成的Sass&Compass
老成的Sass&Compass
智遠 成
SASS入門實作
SASS入門實作
Kingsley Zheng
Introduction to CSS Framwork
Introduction to CSS Framwork
TechParty@UIC
教網部落格模版設計
教網部落格模版設計
rainlan
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
知世‧安索帕 台北 (使用經驗設計中心)
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
twMVC
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
百範 陳
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
Yi-Feng Xie
Semantic ui教學
Semantic ui教學
Tien-Yang (Aiden) Wu
Alice库构建
Alice库构建
Sofish Lin
Fitness Club 範例網站建置
Fitness Club 範例網站建置
Molly Lin
6. CSS
6. CSS
riomusi
CSS 分享 (5) Ending
CSS 分享 (5) Ending
知世‧安索帕 台北 (使用經驗設計中心)
Was ist angesagt?
(20)
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架
Style基础优化之独角兽篇
Style基础优化之独角兽篇
Flexbox版面配置
Flexbox版面配置
從CSS到SASS的開發旅程
從CSS到SASS的開發旅程
老成的Sass&Compass
老成的Sass&Compass
SASS入門實作
SASS入門實作
Introduction to CSS Framwork
Introduction to CSS Framwork
教網部落格模版設計
教網部落格模版設計
網頁開發工具 20140630
網頁開發工具 20140630
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
台科大暑期資工營 - 前端入門
台科大暑期資工營 - 前端入門
Semantic ui教學
Semantic ui教學
Alice库构建
Alice库构建
Fitness Club 範例網站建置
Fitness Club 範例網站建置
6. CSS
6. CSS
CSS 分享 (5) Ending
CSS 分享 (5) Ending
Andere mochten auch
一拳前端考題
一拳前端考題
洧杰 廖
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
前端開發流程分享
前端開發流程分享
洧杰 廖
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃
洧杰 廖
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype
洧杰 廖
Show Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering path
Yvonne Yu
CP 值很高的 Gulp
CP 值很高的 Gulp
Yvonne Yu
ECX2014 不改介面設計也能創造業績的秘訣
ECX2014 不改介面設計也能創造業績的秘訣
悠識學院
Andere mochten auch
(8)
一拳前端考題
一拳前端考題
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
前端開發流程分享
前端開發流程分享
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype
Show Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering path
CP 值很高的 Gulp
CP 值很高的 Gulp
ECX2014 不改介面設計也能創造業績的秘訣
ECX2014 不改介面設計也能創造業績的秘訣
Ähnlich wie 現代化網頁基礎排版技術
Alice v3
Alice v3
Zheng Biao
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
小 米猪
支付宝CSS构架
支付宝CSS构架
Sofish Lin
Css schema by_sofish
Css schema by_sofish
Webrebuild
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
css框架研究
css框架研究
chandleryu
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
Joseph Chiang
Css布局
Css布局
pi cheng
Css
Css
fzuhua
淘宝网前端开发面试题
淘宝网前端开发面试题
Lumend
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
網頁三本柱之Html與css
網頁三本柱之Html與css
Aaron King
Oocss
Oocss
Randy Jin
Koubei banquet 34
Koubei banquet 34
Koubei UED
一淘新首页总结
一淘新首页总结
jieorlin
解读html
解读html
cssrain
Html&css培训 舒克
Html&css培训 舒克
jay li
CSS modules 簡單玩
CSS modules 簡單玩
Anna Su
Ähnlich wie 現代化網頁基礎排版技術
(20)
Alice v3
Alice v3
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
支付宝CSS构架
支付宝CSS构架
Css schema by_sofish
Css schema by_sofish
不一樣的Web server... coServ
不一樣的Web server... coServ
浅析浏览器解析和渲染
浅析浏览器解析和渲染
2011新版首页总结 技术篇
2011新版首页总结 技术篇
css框架研究
css框架研究
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
Css布局
Css布局
Css
Css
淘宝网前端开发面试题
淘宝网前端开发面试题
[2008]网站重构 -who am i
[2008]网站重构 -who am i
網頁三本柱之Html與css
網頁三本柱之Html與css
Oocss
Oocss
Koubei banquet 34
Koubei banquet 34
一淘新首页总结
一淘新首页总结
解读html
解读html
Html&css培训 舒克
Html&css培训 舒克
CSS modules 簡單玩
CSS modules 簡單玩
現代化網頁基礎排版技術
1.
現代化網頁基礎排版技術 講者:廖洧杰
2.
社群創立緣起
3.
現代化網頁 基礎排版技術
4.
1. CSS 基礎知識 2.
CSS 案例分享 • 王志誠-CSS偽元素 3. HTML5排版流程 主題
5.
CSS基礎知識
6.
CSS基礎知識 1. CSS Reset 2.
塊狀與行內 3. 盒模型 4. Float 5. Position
7.
CSS Reset
8.
怎麼調每個瀏覽器都有幾px的誤差 A瀏覽器正常,但B瀏覽器破版! 如果你常常遇到..
9.
1. 清除各瀏覽器的預設CSS 2. XHTML
1.0 、HTML5版本皆不同 3. 需放在CSS檔案的最上方(覆蓋觀念) CSS Reset File:01-css-basic
10.
塊狀與行內
11.
不知道HTML的各元素的變化性, 於是都設死高度和寬度 網頁套入程式後常常破版 如果你常常遇到..
12.
1. 塊狀元素:div、p、ul、li、h1~6 2. 行內元素:span、a 3.
行內變塊狀方法→disaply:block 塊狀與行內 File:01-css-basic
13.
盒模型
14.
無法實際掌握DIV的寬高 不曉得使用margin與padding的時機 margin-top時常罷工 如果你常常遇到..
15.
1. 塊狀元素=margin+border+padding 2. 不想算數學可在該元素設定 3.
用padding-top取代margin-top 盒模型 File: 03-box
16.
Float
17.
用Float排多欄式排版時常無法並排 用Float排版之後的div出現靈異現象 Clear不知道要擺哪個位置 如果你常常遇到..
18.
1. 需先完全了解盒模型概念 2. Clear放在float同層的後方
(舊) 3. Clear寫在包住float區塊的父元素 (新) Float File: 04-float
19.
Position
20.
用了Absolute後,元素都亂跑 如果你常常遇到..
21.
1. 在子元素使用絕對定位(absolute)前, 需在父元素設定相對定位(relative)後, 再利用Top、Bottom、Left、Right進 行座標定位。 Position File: 05-position/
22.
reference:http://ppt.cc/8pU~ =
23.
reference:http://ppt.cc/RKDR
24.
Take a break
25.
CSS案例分享
26.
CSS案例分享 1. Fixed 2. SEO個案分享 3.
Text-indent:-9999px
27.
Fixed
28.
元素會永遠定位在瀏覽器上 特殊的排版需求 當你有需要.. File:codecasefixed
29.
SEO個案分享
30.
關鍵字:重點產品都在十頁以外 單日流量:500~1000 電子商務網站
31.
Schema MetaData Google站長工具(提交Sitemap) 我們做了..
32.
Schema
33.
Schema
34.
Schema
35.
提交Sitemap
36.
Text-indent
37.
圖片取代文字(舊) .Box{ background:url(../logo.png); Text-indent:-9999px; width:50px; height:50px; display:block; }
38.
圖片取代文字(新) .Box{ … white-space: nowrap; text-indent: 100%; overflow:
hidden; }
39.
Live Demo File:codecasetext-indent
40.
王志誠 - CSS偽元素
41.
Take a break
42.
HTML 5 排版流程
43.
那些年,曾發生過的 網頁排版辛酸史
44.
N年前的一個網站..
45.
46.
DIV DIV DIV DIV
47.
幾天後..
48.
收到客訴電話
49.
H1 H2 p>em ul>li*2
50.
有人看過這個網站嗎? File:codehtml5
51.
回歸正題
52.
HTML5網頁排版流程
53.
語意化
54.
大綱
55.
標籤 說明 <div> 沒有語意,純切版用。 大綱元素
<article> 有語意的div (大) <section> 有語意的div (小)。 <nav> 填入在重要選單,例:主選單。 <aside> 定義在不重要的側邊欄區塊。 <header> 表頭元素: 在article、section裡建議設header>h1~6 h1~6 具目錄階層性,h1為階層1,以此類推。 大綱元素 > h1~6 在大綱元素裡面的h1~6不具目錄階層性,且一 定從階層2開始建立階層。 建立 HTML5 大綱
56.
nav
57.
58.
H1 ul>li H2 H3 ul>li
59.
H1 Nav>ul>li H2 H3 ul>li
60.
HTML5+Schema
61.
reference: http://ppt.cc/qD9Q
62.
reference: http://ppt.cc/Xtub
63.
64.
Live Demo
65.
Q&A
Jetzt herunterladen