第二节课:样式之美 web前端课程体系之css
DESCRIPTION
百度web前端先进课程之CSSTRANSCRIPT
![Page 1: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/1.jpg)
样式之美 - Web前端课程系列之CSS
![Page 2: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/2.jpg)
Who is this guy?
• 贾铮,09年1月毕业于北京科技大学,加入百度
• 负责新版地图研发工作,现负责百度地图API
• 著有《HTML+CSS网页布局开发指南》
![Page 3: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/3.jpg)
课程概览
• Web基础 • Web技术基础
• 通过HTML和CSS构建团队主页
![Page 4: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/4.jpg)
Web基础
• Internet和WWW • HTML发展历程和现状
• 浏览器
你将了解:
![Page 5: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/5.jpg)
Internet & WWW
• 许多计算机连接在一起构成了Internet
![Page 6: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/6.jpg)
Little history of Internet
![Page 7: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/7.jpg)
1969年,美国国防部为军事实验而建立,称为:ARPANET
![Page 8: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/8.jpg)
Little history of Internet
• 80年代初期,TCP/IP投入使用 • NFSNET替代ARPANET
• 经过十几年发展为Internet
![Page 9: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/9.jpg)
Internet & WWW
• WWW:Internet上网页的集合
![Page 10: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/10.jpg)
Little history of WWW
![Page 11: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/11.jpg)
1989 at CERN
Tim Berners-Lee
信息要能集中管理
![Page 12: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/12.jpg)
Tim Berners-Lee
文本中可以包含指向其他文本的链接
![Page 13: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/13.jpg)
Tim Berners-Lee
当你读一篇论文时,你可以迅速阅读其他相关论文
就以Hypertext方式来实现!
![Page 14: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/14.jpg)
Hypertext
• 超文本:用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
• 超文本通常显示于电脑或电子设备上。
![Page 15: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/15.jpg)
• 基于HTTP协议传输:HyperText Transfer Protocol
• 文本格式定义为HTML:HyperText Markup Language
实现
![Page 16: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/16.jpg)
• 1994年,IETF接管HTML。W3C成立,接管HTML。
• 1995年,HTML 2发布。
• 1996年,HTML 3发布。
• 1997年,HTML 4。
• 1999年,HTML 4.01。
• 2000年,XHTML 1.0。
• 2001年,XHTML 1.1
![Page 17: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/17.jpg)
• 2008年,HTML 5
![Page 18: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/18.jpg)
• 基于WAP的WML • 1998年,WML 1.1
• 2001年,WML 2.0
• XHTML Mobile Profile
![Page 19: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/19.jpg)
浏览器
![Page 20: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/20.jpg)
1990年,首个浏览器:WorldWideWeb
![Page 21: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/21.jpg)
1993年,Mosaic
![Page 22: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/22.jpg)
Internet Explorer
![Page 23: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/23.jpg)
Firefox
![Page 24: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/24.jpg)
Chrome
![Page 25: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/25.jpg)
Safari
![Page 26: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/26.jpg)
Opera
![Page 27: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/27.jpg)
Web技术基础
• Web设计技术 • 开发、调试工具
• HTML基础
你将了解:
![Page 28: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/28.jpg)
Web设计技术
• HTML/XHTML • CSS • JavaScript
![Page 29: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/29.jpg)
Web设计技术
结构
行为 表现
![Page 30: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/30.jpg)
Web开发工具
• 记事本 • Vim、Emacs、Editplus、Notepad++
• Dreamweaver、Expression Web
• Visual Studio • ⋯
![Page 31: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/31.jpg)
Web调试工具
• Firebug - FF • Web Developer Tools - IE
• Developer Tools – Safari、Chrome
• Dragonfly - Opera
![Page 32: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/32.jpg)
HTML
• HyperText Markup Language • 构建页面的基础
![Page 33: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/33.jpg)
![Page 34: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/34.jpg)
HTML
• 编写一个简单的页面
![Page 35: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/35.jpg)
<html> <head> <title>第一个Web页面</title> </head> <body> <h1>Hello, HTML and CSS!</h1> </body> </html>
![Page 36: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/36.jpg)
![Page 37: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/37.jpg)
标记、元素和属性
• 标记由一对尖括号包含一个标记名称组成:<tagName>
• 大部分标记成对出现:起始标记和结束标记<tagName></tagName>
• 结束标记比起始标记多一个“/”
<title></title>
![Page 38: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/38.jpg)
标记、元素和属性
• 起始标记与结束标记之间是内容
<title>第一个Web页面</title>
![Page 39: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/39.jpg)
标记、元素和属性
• 起始标记 + 内容 + 结束标记 = 元素 • 替换元素
• 非替换元素
![Page 40: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/40.jpg)
标记、元素和属性
• 属性名和属性值组成
<p id="p1">第一个Web页面</p>
![Page 41: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/41.jpg)
标记、元素和属性
<p id="p1">第一个Web页面</p>
标记名
属性名 属性值 标记名
内容
起始标记 结束标记
![Page 42: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/42.jpg)
注释
<!-‐-‐注释内容-‐-‐>
![Page 43: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/43.jpg)
HTML文档结构
• 文档声明 • 文档元素
• 文档头
• 文档体
![Page 44: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/44.jpg)
<!doctype html> <html> <head> <title>第一个Web页面</title> </head> <body> <h1>Hello, HTML and CSS!</h1> </body> </html>
![Page 45: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/45.jpg)
语义化的HTML文档
• 每一个标记都有特定含义 • 标记表示结构、内容而非外观、样式
![Page 46: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/46.jpg)
尝试标记你的世界
![Page 47: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/47.jpg)
<ol> <li><h1>It’s All Right Now</h1></li> <li><h1>KIM NEWMAN JAGO</h1></li> <li>The Season Ticket</li> </ol>
![Page 48: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/48.jpg)
构建团队主页
HTML部分
![Page 49: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/49.jpg)
构建团队主页 - HTML
• HTML常见标签 • Web常用图片格式
• HTML学习资源
• 完成团队页面的HTML部分
你将了解:
![Page 50: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/50.jpg)
![Page 51: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/51.jpg)
构建团队主页
<!DOCTYPE HTML PUBLIC "-‐//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-‐equiv="Content-‐Type" content="text/html; charset=gb2312"> <title>web前端技术学习团队</title> </head> <body> </body> </html>
![Page 52: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/52.jpg)
构建团队主页
<body> <div id="wrapper"> <!-‐-‐ 头部 begin -‐-‐> <div id="header"></div> <!-‐-‐ 头部 end -‐-‐> <!-‐-‐ 主体 begin -‐-‐> <div id="content"></div> <!-‐-‐ 主体 end -‐-‐> <!-‐-‐ 底部 begin -‐-‐> <div id="footer">© 2011 Baidu</div> <!-‐-‐ 底部 end -‐-‐> </div> </body>
![Page 53: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/53.jpg)
构建团队主页
• div元素用来为页面增加结构 • id属性对元素进行标识
• ©是一个字符实体,用来在页面显示版权符号:©
• 注释有助于让别人看懂你的代码结构
![Page 54: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/54.jpg)
header
content
footer
![Page 55: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/55.jpg)
构建团队主页
<div id="content"> <!-‐-‐ 左侧 begin -‐-‐> <div id="main"></div> <!-‐-‐ 左侧 end -‐-‐> <!-‐-‐ 右侧 begin -‐-‐> <div id="aside"></div> <!-‐-‐ 右侧 end -‐-‐> </div>
![Page 56: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/56.jpg)
main aside
![Page 57: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/57.jpg)
![Page 58: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/58.jpg)
构建团队主页
<div id="main"> <dl class="info"> <dt class="t">团队信息</dt> <dd></dd> </dl> </div>
![Page 59: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/59.jpg)
dt
dd
![Page 60: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/60.jpg)
构建团队主页
• 定义列表,用来包含若干术语和定义 • dl、dt和dd
<dl> <dt>术语1</dt> <dd>定义1</dd> <dt>术语2</dt> <dd>定义2</dd> </dl>
![Page 61: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/61.jpg)
构建团队主页
<dd> <div class="holder"> <div class="photos"> <a href="#"> <img src="img/a1.jpg"> </a> </div> </div> </dd>
![Page 62: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/62.jpg)
div div a img
![Page 63: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/63.jpg)
构建团队主页
• a元素表示链接,是Web页面最重要的元素 • href属性表示链接地址
<a href=“http://www.baidu.com”>百度</a>
![Page 64: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/64.jpg)
构建团队主页
• img元素用来展示图片 • src属性表示图片的来源
<img src="pic.jpg" />
![Page 65: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/65.jpg)
图片格式
![Page 66: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/66.jpg)
GIF
• 颜色数量少 • size小
• 可制作动画
• 支持透明
![Page 67: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/67.jpg)
JPEG
• 颜色数量丰富 • size与压缩质量相关
![Page 68: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/68.jpg)
PNG
• 颜色数量丰富 • size与颜色数量有关
• 支持半透明
![Page 69: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/69.jpg)
常用图片处理工具
![Page 70: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/70.jpg)
构建团队主页
<div class="holder"> <div class="photos">...</div> <div class="btn"> <div class="mask"></div> <p> <a href="#" class="show">1</a>| <a href="#">2</a>| <a href="#">3</a>| <a href="#">4</a> </p> </div> </div>
![Page 71: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/71.jpg)
构建团队主页
<ol> <li class="show"> <h3><a href="#">title</a></h3> <p>web前端技术学习团队</p> </li> <li> <h3><a href="#">title</a></h3> <p>web前端技术学习团队</p> </li> ... </ol>
![Page 72: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/72.jpg)
ol li h3
p
li
li
li
![Page 73: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/73.jpg)
构建团队主页
• 有序列表和无须列表 • ol、ul和li
<ol> <li></li> <li></li> </ol>
![Page 74: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/74.jpg)
标记太多了,哪里有资料
• HTML4 Specification • W3CSchool
![Page 75: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/75.jpg)
构建团队主页
![Page 76: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/76.jpg)
构建团队主页
<dl class="members"> <dt class="t">成员介绍</dt> <dd> <ul class="tab_t f14"> <li class="first show">常齐</li> <li>常齐</li> <li>常齐</li> </ul> </dd> </dl>
![Page 77: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/77.jpg)
<ul class="tab_con"> <li class="show"> <div class="intro"> <div class="pic"> <img /> </div> <div class="about"> <h3><a href="#">常齐</a></h3><p>介绍</p> </div> <p class="others"> 爱好:篮球、足球<br> Email:[email protected]</p> </div> <div class="map></div> </li> </ul>
![Page 78: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/78.jpg)
构建团队主页
li div div div div
p
![Page 79: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/79.jpg)
![Page 80: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/80.jpg)
构建团队主页
<dl class="search"> <dd> <form> <input type="text" class="ipt"> <input type="submit" value="我要提问" class="btn"> </form> </dd> </dl>
![Page 81: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/81.jpg)
input type=text input
![Page 82: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/82.jpg)
构建团队主页
• 表单元素 • form:表单元素的容器
• input:用户输入,通过type属性确定类型 – text – button – submit – reset – password – checkbox
![Page 83: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/83.jpg)
![Page 84: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/84.jpg)
构建团队主页
<dl class="course fl"> <dt class="t">css知识</dt> <dd> <ul> <li><a href="#">为什么背景颜色无法显示</a></li> <li><a href="#">锚点在ie6下无效的解决办法</a></li> ... </ul> </dd> </dl>
![Page 85: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/85.jpg)
页面这么丑陋?
![Page 86: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/86.jpg)
还没有CSS
• CSS用来控制页面的外观和样式 • 同样的结构可以有不同的展现
![Page 87: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/87.jpg)
![Page 88: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/88.jpg)
![Page 89: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/89.jpg)
![Page 90: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/90.jpg)
相信吗?他们的HTML是
完全一样的
![Page 91: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/91.jpg)
如果没有样式 就是这个样子
![Page 92: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/92.jpg)
![Page 93: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/93.jpg)
CSS
• Cascading Style Sheet
![Page 94: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/94.jpg)
如何使用CSS
• inline style • embedded style • external style
![Page 95: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/95.jpg)
编写第一个CSS
body { background-‐color: gray; text-‐align:center; } h1 { font-‐size:30px; color:white; }
![Page 96: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/96.jpg)
![Page 97: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/97.jpg)
CSS基础
• 选择器:告诉浏览器样式作用给谁 • 属性:告诉浏览器要改什么
• 属性值:告诉浏览器要怎么改
h1 {color:blue;}
![Page 98: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/98.jpg)
构建团队主页
CSS部分
![Page 99: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/99.jpg)
构建团队主页 - CSS
• CSS规则 • 常用CSS样式声明
• 完成团队页面的CSS部分
你将了解:
![Page 100: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/100.jpg)
为团队主页增加样式
• 准备样式文件 • 增加样式引用
<link type="text/css" rel="stylesheet" href="style_1.css" />
![Page 101: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/101.jpg)
样式文件结构
重置
通用
独立
整体
局部
![Page 102: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/102.jpg)
构建团队主页
body{font:12px "宋体";color:#333;background:#fff} body,form,p,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0} ul{list-‐style:none} table,img{border:0} a{color:#0057a7;text-‐decoration:none} a:hover{color:#c00000;text-‐decoration:underline}
![Page 103: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/103.jpg)
元素选择器
• element:会根据element名字寻找元素
<div>content</div> <p></p> div{color:black;}
![Page 104: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/104.jpg)
字体样式
• font-size • font-family • font-style • font-weight • ⋯
• 缩写形式:font
![Page 105: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/105.jpg)
字体样式
• color:文字颜色 • text-decoration:文字装饰
![Page 106: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/106.jpg)
盒模型
• margin • border • padding • width/height
![Page 107: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/107.jpg)
margin:20px; border:10px solid red; padding:40px; width:300px; height:100px
![Page 108: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/108.jpg)
盒模型
• margin-top • margin-left • margin-right • margin-bottom
![Page 109: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/109.jpg)
伪类
• 与用户行为相关 • :hover 鼠标悬停状态
• :visited 访问过的链接
![Page 110: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/110.jpg)
构建团队主页
#wrapper{width:960px;margin:0 auto;overflow:hidden} #header{height:119px;background:url(img/banner.jpg)} #content{margin-‐top:10px} #main{width:640px;float:left} #footer{color:#aeaeae;text-‐align:center;padding:20px 0} #aside{width:310px;border-‐top:3px solid #7d7d7d;float:right}
![Page 111: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/111.jpg)
id选择器
• #id:会根据id属性寻找元素
<div id="main"></div> <div id="content"></div> #main{width:300px}
![Page 112: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/112.jpg)
背景
• background:指定元素背景
![Page 113: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/113.jpg)
背景
• background-image • background-repeat • background-position • background-color • 缩写:background
![Page 114: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/114.jpg)
![Page 115: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/115.jpg)
1px background-‐repeat:repeat-‐x
![Page 116: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/116.jpg)
浮动
• float:指定元素向左或向右浮动 • 网页布局的重要方式
![Page 117: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/117.jpg)
div1
div2
![Page 118: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/118.jpg)
div2 div1
float:right
![Page 119: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/119.jpg)
div2 div1
float:left
![Page 120: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/120.jpg)
div2 div1
float:left
float:left
![Page 121: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/121.jpg)
div1
div2
![Page 122: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/122.jpg)
div2 div1
float:left
float:left
![Page 123: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/123.jpg)
div2 div1
clear float
![Page 124: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/124.jpg)
浮动的使用
![Page 125: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/125.jpg)
浮动的使用
![Page 126: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/126.jpg)
![Page 127: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/127.jpg)
构建团队主页
/* 团队信息 */ .info{border:1px solid #e0e0e0;margin-‐bottom:10px;padding:1px;zoom:1} .info dt{height:30px;line-‐height:30px; background:#f7f7f7} .info .holder{width:400px;float:left; position:relative} .info .photos img{vertical-‐align:top}
![Page 128: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/128.jpg)
CSS注释
/* 注释内容 */
![Page 129: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/129.jpg)
class选择器
• .class 按照元素的class属性选择 • 可以为多个元素指定相同的样式
<div class="f"></div> <div class="f"></div> <div></div> .f{color:white}
![Page 130: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/130.jpg)
后代选择器
• selector1 selector2:选择那些selector1所匹配元素的子元素中与selector2匹配的元素
<div id="main"> <p class="normal"></p> <p></p> </div> <p class="normal"></p> #main .normal{color:red}
![Page 131: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/131.jpg)
构建团队主页
/* 团队信息 */ .info .btn{width:100px;position:absolute;left:295px;top:188px} .info .btn a{width:20px;height:20px;display:inline-‐block;color:#9d9d9d;text-‐decoration:none} .info .btn a:hover{text-‐decoration:underline} .info .btn a.show{color:#fff} .info .btn .mask{height:20px;background:#000;opacity:0.5;filter:alpha(opacity=50)} .info .btn p{width:100%;color:#8b8b8b;line-‐height:20px;text-‐align:center;position:absolute;top:0}
![Page 132: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/132.jpg)
定位
• position: 元素定位方式 • static、relative、absolute和fix
![Page 133: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/133.jpg)
div1
div2
div3
![Page 134: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/134.jpg)
div1
div2
div3
position:relative
![Page 135: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/135.jpg)
div1
div3
position:absolute div2
![Page 136: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/136.jpg)
定位的使用
![Page 137: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/137.jpg)
构建团队主页
/* 团队信息 */ .info ol{width:180px;float:left;padding-‐left:35px} .info li{padding:8px 0} .info li h3{font-‐size:14px;font-‐weight:normal} .info li p{line-‐height:18px;padding-‐top:5px;display:none} .info li.show p{display:block}
![Page 138: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/138.jpg)
block元素
• div、p、h1-h6 • 用于构建“大型”结构
• 可以包含其他block元素和inline元素
• 换行显示
![Page 139: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/139.jpg)
inline元素
• a、img、span • 通常只包含内容和其他inline元素
• 同一行显示
![Page 140: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/140.jpg)
display属性
• 可以改变元素展现形式:block、inline • 控制元素是否显示:none
![Page 141: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/141.jpg)
![Page 142: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/142.jpg)
构建团队主页
/* 成员介绍 */ .members .tab_t{height:30px;text-‐align:center;border-‐bottom:1px solid #e0e0e0;background:#f7f7f7} .members .tab_t li{width:120px;height:22px;padding-‐top:8px;color:#0059a7;background:url(img/bg.gif) no-‐repeat 0 8px;float:left;cursor:pointer} .members .tab_t .first{background:none} .members .tab_t li.show{height:23px;color:#000;background:#fff;border-‐left:1px solid #e0e0e0;border-‐right:1px solid #e0e0e0;position:relative;margin:0 -‐2px -‐1px -‐1px}
![Page 143: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/143.jpg)
构建团队主页
/* 成员介绍 */ .search{text-‐align:center;border:1px solid #e0e0e0;margin-‐bottom:10px;padding:20px 0} .search .ipt,.search .btn{font-‐size:14px;background:url(img/i.png)} .search .ipt{width:400px;height:18px;padding:6px 7px;font:16px arial;margin-‐right:6px;border:1px solid #cdcdcd;border-‐color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-‐align:top;*vertical-‐align:1px} .search .btn{width:97px;height:34px;border:0;background-‐position:0 -‐41px;cursor:pointer} .search .btn_h{background-‐position:-‐102px -‐41px}
![Page 144: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/144.jpg)
float改变li元素排布
li
li
li
li li li
![Page 145: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/145.jpg)
鼠标指针
• cursor:用来改变鼠标指针样式 • default、pointer等
• 用户自定义图片(.cur文件)
![Page 146: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/146.jpg)
CSS Hack
• 用于解决浏览器兼容性问题 • 条件注释
• *selector(IE6、IE7识别)
![Page 147: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/147.jpg)
![Page 148: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/148.jpg)
构建团队主页
/* 我要提问 */ .search{text-‐align:center;border:1px solid #e0e0e0;margin-‐bottom:10px;padding:20px 0} .search .ipt,.search .btn{font-‐size:14px;background:url(img/i.png)} .search .ipt{width:400px;height:18px;padding:6px 7px;font:16px arial;margin-‐right:6px;border:1px solid #cdcdcd;border-‐color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-‐align:top;*vertical-‐align:1px} .search .btn{width:97px;height:34px;border:0;background-‐position:0 -‐41px;cursor:pointer} .search .btn_h{background-‐position:-‐102px -‐41px}
![Page 149: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/149.jpg)
![Page 150: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/150.jpg)
构建团队主页
/* 技术知识 */ .course{width:300px;border-‐top:1px solid #e0e0e0;padding-‐top:1px} .course dt{height:30px;line-‐height:30px;background:#f7f7f7;border-‐bottom:1px solid #e0e0e0} .course dd{font-‐size:14px;padding:10px} .course li{line-‐height:28px;background:url(img/dot.gif) no-‐repeat 0px center;padding-‐left:15px}
![Page 151: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/151.jpg)
![Page 152: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/152.jpg)
完成剩余样式
![Page 153: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/153.jpg)
团队主页最终效果
![Page 154: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/154.jpg)
参考资源
• CSS: The Definitive Guide
![Page 155: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/155.jpg)
参考资源
• http://www.w3.org/ • http://www.w3cschool.cn/
![Page 156: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/156.jpg)
学习方法建议
• 阅读一两本经典书籍(一本入门、一本大全)
• 阅读规范相关部分
• 亲自动手实践
![Page 157: 第二节课:样式之美 web前端课程体系之css](https://reader036.vdocuments.pub/reader036/viewer/2022081716/54b4cb304a7959fd588b45ac/html5/thumbnails/157.jpg)
Q&A