企业网站设计与制作

1、第六章 CSS层叠样式表基础（二） 理论部分CSS的基本语法是什么？行内样式和嵌入样式语法有什么区别？选择器都分为哪几类？CSS样式的优先级都是什么？设置文本字体的大小应用哪个属性？在网页中插入图片应使用哪个标签？浮动属性的意义是什么？对应的属性值都有哪些？课前小考2/39本章技能点了解行级标签与块级标签了解CSS浮动属性掌握使用CSS设置超链接效果掌握使用CSS设置列表标签制作表格效果技能展示3/39本章结构CSS设置超链接CSS的伪类别属性背景图片变换的超链接CSS层叠样式表基础（二）块级标签与行级标签CSS样式表的浮动属性设置项目列表标签分类浮动属性使用列表制作表格效果定位属性4/39按

2、钮式超链接块级标签与行级标签3-15/39HTML标签分类块级标签：显示为“块”状，独占一行前后断行显示，占据一整行具有宽度和高度常用作容器，“容纳”其他块级标签或行级标签行级标签：在一行内按照先后顺序显示一般用于组织内容，文本、图片等块级标签与行级标签3-26/39块级标签基本块级标签标题标签、段落标签、水平线标签布局块级标签列表标签（有序、无序、定义）、分区标签（）行级标签图像标签、超链接标签、范围标签、换行标签表单相关的输入框、单选按钮 div内可包括标题、段落、无序列表、有序列表、定义列表、表格、表单等内容 春望 国破山河在，城春草木深。 感时花溅泪，恨别鸟惊心。 烽火连三月，家书抵万

3、金。 白头搔更短，浑欲不胜簪。 div其实就是一个划分逻辑区域的标签，常用作容器，div还可以包括普通的文字、图片等内容. 设置宽、高以及背景色块级标签与行级标签3-37/39块级标签与行级标签的显示区别 一个div标签 标题标签 一个段落标签，中间包括图片标签和范围标签块级标签行级标签块级标签独占一行行级标签在一行内逐一显示CSS样式浮动属性3-18/39浮动属性： float用于定义元素的浮动方向改变块级标签的显示属性，块级标签不会独占一行脱离常规文档流而表现为向右或向左浮动 属性值none：默认值，不浮动left：左浮动right：右浮动CSS样式浮动属性3-29/39浮动属性的显示效果

4、#div1 width:150px; height:100px; background:#ccc; #div2 width:150px; height:150px; background:#3f3; #div3 width:400px; height:200px; background:#3cc; 第1块第2块第3块默认的常规文档流：页面内容从上到下，从左到右排列。DIV块换行显示#div1 width:150px; height:100px; background:#ccc; float:right; #div2 width:150px; height:150px; background:#

5、3f3; #div3 width:400px; height:200px; background:#3cc; 第1块第2块第3块向右浮动，脱离常规文档流CSS样式浮动属性3-310/39多标签浮动属性的显示效果1div width:350px; height:350px; background-color:#FF0; #one width:100px; height:100px; background-color:#F00; #two width:100px; height:100px; background-color:#00F; color:#fff;#three width:100px;

6、 height:100px; background-color:#0FF; 第一个分区标签 第二个分区标签 第三个分区标签 .float float:left; class=floatclass=floatclass=floatDIV块元素失去“块状”换行显示特征，变为行内元素.float float:right; 右浮动显示效果HTML超链接标签11/39超链接标签 搜狐超链接显示效果CSS的伪类别属性2-112/39使用CSS修饰超链接样式 a text-decoration:none; 搜狐 普通文字设置超链接无下划线超链接显示效果无下划线普通文字效果访问后的超链接效果CSS的伪类别属性

7、2-213/39超链接伪类别属性属性含义a:link超链接普通样式，即在浏览器中正常显示的样式a:hover鼠标经过超链接时显示的样式a:visited超链接被点击过后显示的样式a:active此状态为当前激活状态，即超链接被点击时的状态使用CSS伪类别修饰超链接效果14/39使用表格制作菜单栏结构设置表格单元格样式设置超链接样式 首页 资讯前沿 课程介绍 青鸟校区 明星学员 学员服务 table td width:100px; line-height:20px; font-size:12px; text-align:center; background:#90bcff;a:link colo

8、r:#059; text-decoration:none;a:hover color:#ff0; text-decoration:underline;a:visited color:#000; text-decoration:none;文本行高文本字号水平居中背景色单元格宽度鼠标经过时超链接样式设置颜色，有下划线访问过的超链接样式设置颜色，无下划线超链接正常显示样式设置颜色，无下划线超链接正常显示样式鼠标经过时超链接样式访问过的超链接样式制作鼠标经过时变色的表格15/39CSS伪类别可以应用到其他标签鼠标经过变色的表格表格内容样式表内容 员工计算机配置情况表 CPU内存硬盘显示器 IP地址 李

9、四Intel2G320G液晶 192.168.100.30 table font-size:12px; border:0px; width:450px; border-collapse:collapse; tr:hover background:#c4e4ff; td border:1px solid #000; caption font-size:18px; font-weight:bold; 表格基本样式行的伪类别属性鼠标经过时变色鼠标经过时表格整行变色按钮式超链接2-116/39按钮式超链接效果图分析使用不同颜色背景显示突出按下按钮使用不同颜色的边框显示按钮的按下效果按钮式超链接2-21

10、7/39页面内容代码设置超链接样式a:link,a:visited display:block; font-size:12px; text-align:center; vertical-align:middle; width:100px; height:20px; float:left; line-height:22px;a:link,a:visited color:#a62020; background:#89bbff ; text-decoration:none; border-top:1px solid #eee; border-left:1px solid #eee; border-b

11、ottom:1px solid #777; border-right:1px solid #777;a:hover color:#821818; background:#3d8fff; text-decoration:none; border-top:1px solid #777; border-left:1px solid #777; border-bottom:1px solid #eee; border-right:1px solid #eee;设置超链接块状显示，设置宽、高设置左浮动，使超链接标签在一行显示正常显示和访问后的样式包括颜色、边框、背景等鼠标经过时的样式包括颜色、边框、背景

12、等 首页 资讯前沿 课程介绍 青鸟校区 明星学员 学员服务按钮式超链接背景图片变换的超链接2-118/39背景图片变换超链接效果图分析正常显示和鼠标经过时使用不同的背景图片超链接显示效果背景图片变换的超链接2-219/39页面内容代码设置超链接样式a:link,a:visited width:80px; height:29px; text-align:center; vertical-align:middle; float:left; line-height:34px; display:block;a:link,a:visited color:#fff; text-decoration:non

13、e; font-size:14px; font-weight:700; background:url(image/menubg.gif) 0px -29px no-repeat;a:hover background:url(image/menubg.gif) 0 0 no-repeat; text-decoration:none;设置超链接块状显示，设置宽、高设置左浮动，使超链接标签在一行显示正常显示和访问后的样式鼠标经过时的样式 首页 资讯前沿 课程介绍 青鸟校区 明星学员 学员服务设置背景图片超链接显示效果请思考行级标签与块级标签的区别有哪些？请举例说明浮动属性： float的作用有哪些？

14、超链接的伪类别属性包括哪四种？分别是什么含义？小结20/39使用列表制作表格效果4-121/39页面效果分析页面包含三部分，顶部、中间以及底部页面中超链接部分中间内容部分使用列表实现顶部中部底部一个列表一个列表项使用列表制作表格效果4-222/39页面内容结构页面顶部部分内容页面中间部分内容页面底部部分内容 Featured Classes | New Classes | ing Classes Sun,Sep 26 - 11:59 PM GRE Advantage - Anywhere By Kaplan TestPrep and Amissions pro $699.00 Explore

15、ing classes 超链接第二行为图片超链接超链接使用列表制作表格效果4-323/39设置页面样式设置最外层ID为main分区标签样式设置顶部ID为top分区标签样式设置中间ID为btm的分区标签样式设置底部ID为mid的分区标签样式小图标对齐方式#top background:#f0f5f9; width:100%; #top a:link text-decoration: none; #top a:hover text-decoration: underline; #btm width: 100%; text-align: right; #btm a:link color: #0066

16、FF; text-decoration:none; #btm a:hover text-decoration:underline; #mid ul float: left; width: 142px;#mid ul li font-size: 13px; list-style-type: none;#mid img border:0; #mid span a:link font-size: 10px; color: #A8A8A8; font-weight: normal; text-decoration:none;#mid span a:hover text-decoration:under

17、line;#mid span img vertical-align:top;#main width:960px; border: 1px solid #ced3d7; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;设置整体宽度设置边框样式设置顶部背景色和宽度设置顶部超链接效果设置底部宽度和对齐方式设置底部超链接样式设置列表宽度、左浮动设置列表项无列表符号清除超链接图片边框#mid a:link color: #0066FF; text-decoration:none;#mid

18、 a:hover text-decoration:underline;设置图片下方标题超链接样式超链接样式使用列表制作表格效果4-424/39CSS样式清除属性（clear）和前一个浮动标签换行隔开只对块级元素有效显示异常常见的清除属性值含义clear:left在左侧不允许有浮动元素clear:right在右侧不允许有浮动元素clear:both在左右两侧均不允许有浮动元素clear:none默认值，允许两侧都有浮动元素body font-size:20px; font-weight:bold; color:#FFF; #one background:#00f; width:100px; he

19、ight:100px; float:left; #two background:#f00; width:100px; height:100px; float:left; #three background:#0fF; width:300px; height:200px; 第一块 第二块 第三块clear:both;浮动显示效果设置清除属性后的显示效果为列表制作表格效果添加清除属性 在中间部分最后添加一个分区标签设置清除属性，并设置高度为0px，不影响显示效果CSS样式定位属性3-125/39CSS样式定位属性（position）确定标签定位位置常用属性值absolute：绝对定位，相对于第一个

20、非默认定位的父标签的定位fixed：固定定位，相对于浏览器窗口进行定位relative：相对定位，相对于标签原始位置进行的定位static：默认值，没有定位根据正常情况显示使用“left”、“top”、“right”、“bottom”设置位置CSS样式定位属性3-226/39相对定位绝对定位固定定位#main border:2px solid #000; width:300px; #one background:#FF0; width:200px; height:100px; #two background:#00F; width:50px; height:30px; 3个分区标签相互嵌套#t

21、wo position:relative; left:50px; top:20px; 设置相对定位设置定位位置20px50px#two position:absolute; right:50px; bottom:20px; 设置绝对定位设置定位位置20px50px#main position:relative; 更改父标签定位方式20px50px#main position:relative; #two position:fixed; right:50px; bottom:20px; 设置相对定位设置定位位置20px50pxCSS样式定位属性3-327/39同级标签定位显示效果标签设置相对定位不影响其他标签的显示情况标签设置固定定位或绝对定位标签显示效果类似于浮动属性标签所占的父标签高度为0默认显示情况第一块设置相对定位第一块设置绝对定位第二块