清單的CSS樣式.

Slides:



Advertisements
Similar presentations
會計學 Chapter 1 基本概念 1-2 基本概念 第一節 單式簿記 第二節 會計學的定義與功用 第三節 會計學術與會計人員 第四節 企業組織 第五節 會計學基本第五節 會計學基本慣例 第六節 會計方程式 第七節 財務報表.
Advertisements

Chapter 5 教育發展與職業選擇. 1. 認識高職學生的生涯進路。 2. 了解個人特質與職業屬性之 間的關係。 3. 認識打工安全與勞動權益。
HyperText Markup Language
小 王 子 組別:第五組 班級:財金二甲 組員:A 林安潔 A 陳思羽 A 許雅涵
11-1 保險業之定義 11-2 保險業之設立 11-3 保險業之組織 11-4 保險業之營業範圍
9-1 火災保險 9-2 海上保險 9-3 陸空保險 9-4 責任保險 9-5 保證保險 9-6 其他財產保險
槍砲病菌與鋼鐵 第三組.
第5章 HTML 標籤介紹.
杜甫诗三首 《望岳》 《春望》 《石壕吏》 授课人:姚晓霞.
導覽解說與環境教育 CHAPTER 3 解說員.
財務報表的內容 四種報表格式 財務報表的補充說明 會計師簽證的重要性 合併報表 財務報表分析 Chapter 2 財務報表的內容.
低碳生活,从小事做起 编辑人:刘瑞兴 指导老师:麦文燕 吴霞 编辑地址;岭南师范学院附属中学 编辑时间:
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
老師 製作 法律與生活.
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
第十七章休閒農業之經營策略與成功之道 17 Chapter.
Chapter 2 勞工安全衛生法.
XML 第05讲 使用CSS显示XML.
第五单元课1-3 层叠样式表.
CH.12 CSS清單語法與格式設定.
No Zuo No Die Why Not Try ? ——做更好的前端 技术中心 黄家权/mss.
風險分析與財務結構 瞭解風險的定義與種類 衡量企業風險與財務風險 影響企業風險的因素 影響財務風險的因素 以現金流量衡量企業長期的財務狀況
國際行銷管理 林 建 煌 著.
RWD網頁設計實務 李欣螢 以誠研發有限公司.
第一節 知覺 第二節 認知 第三節 學習 第四節 創造力
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
杜甫诗三首 《望岳》 《春望》 《石壕吏》.
CT212 (02/03)-Network Programming and design
CSS简介 WEB前端三剑客之二.
顏色與背景CSS樣式.
CHAPTER 2 綜合所得稅之架構.
Ch01 HTML 5 資料格式 網頁程式設計.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
CHAPTER 18 CSS樣式表的動態效果.
HTML – 文字格式 資訊教育.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
All rights reserved by Copyright All rights reserved by
HTML & CSS.
CSS樣式 靜宜大學 資管系 楊子青.
基礎程式設計範例 -網頁名片.
第八 课 n l 教学.
W3C标准网页制作 主讲教师:张 涛.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
聖文德書院 ST BONAVENTURE COLLEGE & HIGH SCHOOL
网页设计与制作 Dreamweaver CS6 标准教程
第 1 章 文字媒體 多媒體導論與應用-第三版 1.1 文字的格式 1.2 數位化文字的應用 1.3 課後練習
领导艺术与方法 适合对象:课长级以上人员 人力资源部 李晓红 2006/6/12
主讲:陶建平 华中科技大学网络与计算中心
武汉纺织大学传媒学院 cm.wtu.edu.cn
老師 製作 休閒農場.
心理學—日常生活中的應用 人際溝通.
布局大师——表格.
南宁翰林华府 ——地中海风格与现代住宅的融合.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
第15节 CSS超链接样式 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/5/10 传媒学院.
第7章 使用CSS设置链接与导航菜单 经济管理学院.
坐標幾何的基本概念 Title page: Font size 36, bold, theme color of the chapter (red for geometry, blue for algebra, green for statistics)
財務預測 財務預測的用途 法令相關規定 預測的基本認知 預測的方法 製作預測性報表 財務報表分析 Chapter 16 財務預測.
CSS基礎 靜宜大學 資管系 楊子青.
第5章 Div+CSS布局技术 经济管理学院.
第2章 块级标签 经济管理学院.
自慢 社長的成長學習筆記 何飛鵬.
團體工作的倫理議題 CHAPTER 12. 團體工作的倫理議題 CHAPTER 12 團體工作的倫理議題 1.如果我有資格執行個別治療,那麼我也可以執行團體治療。 2.仔細而審慎地篩選團體成員,較符合專業倫理要求。 3.在團體治療開始前,讓成員能先有準備以便從團體中獲得最大利益,是非常重要的。
Chapter1 大師的視界,見證歷史的腳步
Section 2-2: 4 (6), 7, 12 (14), 13, 18 (16), 21, 25, 28, 30, 36, 46, 48, 50, 54a Section 3-1: 4 (2), 5, 10, 15, 20, 29, 32 Section 4-1: 3, 7, 8,
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
Presentation transcript:

清單的CSS樣式

unordered list / ordered list <ul> <li>XHTML 1.0</li> <li>XHTML 1.1</li> <li>XHTML 2.0</li> </ul> <ol> <li>XHTML 1.0</li> <li>XHTML 1.1</li> <li>XHTML 2.0</li> </ol>

清單類型 list-style-type: disc; disc circle square decimal decimal-leading-zero lower-alpha upper-alpha lower-roman upper-roman none cjk-ideographic

清單位置 list-style-position: outside; list-style-position: inside;

清單影像 list-style-image: url(icon.png); ul.iconc { font-size: 18pt; } <ul class="iconc"> <li>XHTML</li> <li>CSS</li> <li>JavaScript</li> </ul>

顯示成清單項目 display: list-item; 可指定任何元素,以清單方式顯示 p {display: list-item; … } h1 {display: list-item; … } h2 { display: list-item; list-style-type: decimal; list-style-position: inside; } … <h2>h2 元素是清單的替代元素</h2>

元素之內容屬性 (content) content: 屬性值; 屬性值 [normal | <string> | <uri> | <counter> | attr(<identifier>) |open-quote | close-quote | no-open-quote | no-close-quote ]+ p:before {content: "Answer:"; font-size: 36px; color: purple;} p.after {content: url(smile.gif);} a[href]:after {content: " (" attr(href) ")";} … <p>元素本來的內容</p> <a href="http://www.kingsinfo.com.tw">文魁資訊</a>

設定清單編號號碼 設定起始號碼(重新開始編號) 設定編號增加量 使用counter-reset屬性 屬性值 [<identifier> <integer>?]+ | none <identifier>為自訂的counter name <integer> 為counter起始值 設定編號增加量 使用counter-increment屬性 <integer> 為每次增加量

div {counter-reset : chapter;} h1:before { counter-increment : chapter; content : "Chapter " counter(chapter) ": " } h2:before { counter-increment : section; content : "Section " counter(section) ": " h1 {counter-reset : section;} <div > <h1>XHTML</h1> <h2>XHTML 1.0</h2> <h2>XHTML 1.1</h2> <h2>XHTML 2.0</h2> <h1>CSS</h1> <h2>CSS 1.0</h2> <h2>CSS 2.0</h2> <h2>CSS 2.1</h2> <h1>JavaScript</h1> <h2>JavaScript 1.0</h2> </div> <div> <h1>PHP</h1> <h2>php基本語法</h2> <h2>_POST與_GET</h2> <h2>表單處理</h2> <h1>MySQL</h1> <h2>SQL</h2> <h2>php與MySQL</h2> </div>