CSS排版:盒子模式 靜宜大學 資管系 楊子青.

Slides:



Advertisements
Similar presentations
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
Advertisements

HyperText Markup Language
第5章 HTML 標籤介紹.
动态网页制作 第1章 HTML语言1.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
XML 第05讲 使用CSS显示XML.
第五单元课1-3 层叠样式表.
Css2/css3全教程 选择器 群号: 韬略课堂:何韬.
浏览器工作原理浅析 TID Ghostzhang.
CSS – 進階 IDIC.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
RWD網頁設計實務 李欣螢 以誠研發有限公司.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
第8章 样式表.
CSS简介 WEB前端三剑客之二.
顏色與背景CSS樣式.
定位的CSS樣式.
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Web前端开发技术与实践 第12章 布局 阮晓龙 /
DreamWeaver MX (VI) 林偉川.
Ch01 HTML 5 資料格式 網頁程式設計.
CSS 教學 下載並修改自: 資工系涂世俊老師教學網站.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
第 13 章 用CSS 設定 文字顏色與背景.
Ch.13 HTML網頁實作.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
Css全教程 边框背景轮廓 群号: 韬略课堂:何韬.
CSS樣式 靜宜大學 資管系 楊子青.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
动态专题制作 凤凰网技术中心 应用管理部.
CSS - Cascading Style Sheets
CHAPTER 18 CSS樣式表的動態效果.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
HTML & CSS.
CSS樣式 靜宜大學 資管系 楊子青.
基礎程式設計範例 -網頁名片.
主讲:陶建平 华中科技大学网络与计算中心
CSS技术 蒋玉华.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
Web前端开发技术与实践 第9章:文字样式 阮晓龙 /
大家所认为的电子商务行业有哪些途径来赚钱?
聖文德書院 ST BONAVENTURE COLLEGE & HIGH SCHOOL
UI 软件 设计 页面布局(三).
网页设计与制作 Dreamweaver CS6 标准教程
網路程式設計期末project 指導教授:馬尚彬 學生:楊依林 學號:B
计算机网络与网页制作 Chapter 11:用CSS作页面布局
主讲:陶建平 华中科技大学网络与计算中心
武汉纺织大学传媒学院 cm.wtu.edu.cn
布局大师——表格.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
CSS樣式 靜宜大學 資管系 楊子青.
從HTML表格到CSS 靜宜大學 資管系 楊子青.
第13章 新闻发布系统的 页面美工.
網路商店裝修之二 CSS樣式編輯.
CSS基礎 靜宜大學 資管系 楊子青.
第5章 Div+CSS布局技术 经济管理学院.
第6章 层次原理图设计和多通道技术: 重点内容: 掌握自上而下的层次原理图设计方法 掌握自下而上的层次原理图设计方法
HTML基本語法及文字 靜宜大學 資管系 楊子青.
CSS 一起來美化網頁吧!!.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
Presentation transcript:

CSS排版:盒子模式 靜宜大學 資管系 楊子青

The CSS Box Model 邊界 邊框 邊界留白 HTML元件 一個 Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成

練習實例:pucsim_intr.htm <!DOCTYPE html> #csim2 { <html lang="zh-TW"> <head> <title>靜宜資管特色</title> <meta charset="utf-8"> <style type="text/css"> div { color: blue; font-family: "標楷體"; } #csim1 { background-color: yellow; margin-top: 10px; margin-bottom: 20px; margin-left: 30px; border-style: double; border-width: 5px; padding-top: 20px; padding-left: 50px; width: 500px; height: 30px; #csim2 { background-color: #55ffaa; position: relative; top: -20px; left: 50px; z-index: 1; width:250px; height:150px; } #csim3 { background-color: #EAD3EB; border-style: ridge; position: absolute; top: 100px; left: 300px; z-index: 2; width: 250px; height: 200px; </style> </head> <body> <div id="csim1"> 靜宜大學資管系<a href="http://www.csim.pu.edu.tw/intro/super_pages.php?ID=intro1">教學特色</a> </div> <div id="csim2"> 專案實作課程:透過此課程的設計,讓學生瞭解尊重專業分工、講究團隊合作的重要性,並學習能在一個團隊中善盡責任、與其他成員合作無間,更進而激發所有成員的潛能,造就整個團隊的成功。 <div id="csim3"> 畢業專題成果展:資訊學院三系每年共同舉辦的畢業專題成果展,包括口試、競賽與展覽三階段,透過此嚴謹驗收的程序,讓學生嚴肅、認真面對自己的作品,並學習如何進行作品的行銷與包裝。 </body> </html>

大綱 邊界 邊框 邊界留白 定位

1. 邊界 (Margin) 設定四個邊界,例如: 一次設定好邊界值,例如: margin-top:100px; (上邊界) margin-right:50px; (右邊界) margin-bottom:100px; (下邊界) margin-left:50px; (左邊界) http://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides 一次設定好邊界值,例如: margin:25px 50px 75px 100px; 表示top margin is 25px; right margin is 50px; bottom margin is 75px; left margin is 100px margin:25px 50px 75px; 表示top margin is 25px; right and left margins are 50px; bottom margin is 75px margin:25px 50px; 表示top and bottom margins are 25px; right and left margins are 50px margin:25px; 表示all four margins are 25px

練習實例:pucsim_intr.htm 請自行調整#csim1之樣式,觀看結果: margin-top: 10px; margin-bottom: 20px; margin-left: 30px;

2. 邊框 (Border) 屬性 屬性名稱 設定值 border-style 邊框樣式 none(預設值) solid double groove ridge inset outset border-top-style border-left-style border-bottom-style border-right-style 上下左右四邊的邊框樣式 同border-style border-width 邊框寬度 寬度數值+單位 thin(薄) thick(厚) medium(中等,預設值) border-top-width border-left-width border-bottom-width border-right-width 上下左右四邊的寬度 同border-width

邊框 (Border) 屬性 屬性名稱 設定值 border-color 邊框顏色 顏色名稱 16進位(HEX)碼 RGB碼 border-top-color border-left-color border-bottom-color border-right-color 上下左右四邊的邊框顏色 同border-color border 綜合設定 border-radius 邊框導圓角 長度(px)或百分比(%) border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius 上下左右四邊導圓角 border-image 花邊框線  

練習實例:pucsim_intr.htm 請自行調整#csim1之樣式,觀看結果: border-style: double; border-width: 5px;

線上網站:邊框 CSSMatic 網址:http://www.cssmatic.com/ GRADIENT GENERATOR (漸層) BORDER RADIUS (圓角) NOISE TEXTURE BOX SHADOW

線上網站:邊框 LAYERSTYLES 網址:http://layerstyles.org/

padding 會在元素內容的周圍加上我們所指定大小的空間 padding-top 上邊界留白距離 padding-right 右邊界留白距離 padding-bottom 下邊界留白距離 padding-left 左邊界留白距離

練習實例:pucsim_intr.htm 請自行調整#csim1之樣式,觀看結果: padding-top: 20px; padding-left: 50px;

4. 定位 一般定位 屬性 屬性名稱 設定值 position 設定元件位置的排列方式 absolute relative static width 指定元件寬度 寬度數值 height 指定元件高度 高度數值 left 指定元件與左邊界的距離(X座標) 距離數值 top 指定元件上邊界的距離(Y座標) overflow 超出邊界的顯示方式 visibility 設定是否顯示 visible hidden inherit

定位 z-index: 層次數值,例如: <img src="sample.gif" style="position:absolute; top:30; left:30; z-index:1;">

練習實例:pucsim_intr.htm 請自行調整#csim2與#csim3之樣式,觀看結果: #csim2 { position: relative; top: -20px; left: 50px; z-index: 1; width:250px; height:150px; } #csim3 { position: absolute; top: 100px; left: 300px; z-index: 2; width: 250px; height: 200px; }

實作:網頁置中排版實例

Step 1 <!DOCTYPE html> <html lang="zh-TW"> <head> <title>置中排版實例</title> <meta charset="utf-8"> </head> <body> <div id="title1">標題一</div> <div id="content1">本文一</div> <div id="title2">標題二</div> <div id="content2">本文二</div> <div id="title3">標題三</div> <div id="content3">本文三</div> <div id="content4">版權所有:靜宜大學資管系<br />楊子青</div> </body> </html>

Step 2 <style type="text/css"> #content1, #content2 { * { font-family: "標楷體"; font-size: 14pt; } body { background-color: #BCB1F0; width: 100%; #title1 { color: white; background-color: #A63C6F; #title2 { background-color: #7FB33D; #title3 { background: #FFACAA; #content1, #content2 { color: black; background-color: #F5F5dd; } #content3 { background-color: #EBE298; #content4 { background-color: #51629C; color: #C5EBE7; text-align: center; </style>

Step 3 #wrapper{ width:960px; height: 850px; margin:0 auto; } </style> </head> <body> <div id="wrapper"> <div id="title1">標題一</div> <div id="content1">本文一</div> <div id="title2">標題二</div> <div id="content2">本文二</div> <div id="title3">標題三</div> <div id="content3">本文三</div> </div>

Step 4 #title1, #title2{ width: 590px; height: 30px; border: 5px; border-style: solid; border-color: white; } #content1, #content2 { width: 570px; height: 300px; padding: 10px;

Step 5 #title3 { width: 350px; height: 30px; border: 5px; border-style: solid; border-color: white; position: relative; top: -740px; left: 600px; }

Step 6 #content3 { width: 330px; height: 670px; border: 5px; border-style: solid; border-color: white; padding: 10px; position: relative; top: -740px; left: 600px; }

參考資料 教科書 網路資源 榮欽科技、陳婉凌,網頁設計必學的程式實作技術:HTML5+CSS3+JavaScript,2012年,博碩。 Chap 14: CSS排版技巧 網路資源 http://www.w3schools.com/css/ http://www.jaceju.net/blog/archives/17/