第2章网页1授课_第1页
第2章网页1授课_第2页
第2章网页1授课_第3页
第2章网页1授课_第4页
第2章网页1授课_第5页
已阅读5页，还剩64页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第二章网页样式第二单元本章相关学习资源《网页样式》专题《Web前端基础及数据库开发》第2章《网页样式》学习平台“静态网页制作”课程学生用书第2页/共69页预习检查说出使用CSS制作网页的优点。在CSS中，设置字体颜色可以使用什么属性？在CSS中，可以用于创建横向多列布局的属性是什么？提问第3页/共69页本章任务任务1：制作腾讯软件中心页面第4页/共69页能够使用CSS美化网页元素能够使用DIV+CSS布局网页能够解决CSS相关的浏览器兼容性问题本章目标点重点难点重点难第5页/共69页讲解：CSS语法为什么需要CSS样式？网络提问使网页丰富多彩，易于控制有CSS样式无CSS样式<divid="header"><imgsrc="images/logo.gif"alt="腾讯"width="379"height="45"/><p><ahref="#">简体中文</a>|<ahref="#">English</a></p></div><tablewidth="100%"border="0"cellspacing="0"cellpadding="0"><tr><td><imgsrc="images/logo.gif"alt="腾讯"width="379"height="45"/></td><tdalign="right"><ahref="#">简体中文</a>|<ahref="#">English</a></td></tr></table>DIV+CSS布局Table布局布局灵活，结构简单，代码量少第6页/共69页讲解：CSS的概念和作用CSS的概念和作用CSS级联样式表CascadingStyleSheet风格样式表StyleSheet用于进行网页风格设计第7页/共69页串讲：CSS的基本语法结构CSS的基本语法结构选择器一条或多条声明第8页/共69页串讲：style标签和style属性style标签定义HTML文档样式信息style属性用于改变HTML元素的样式位于head标签中位于HTML标签中第9页/共69页串讲：CSS基本选择器CSS基本选择器（3种）标签选择器HTML标签一条或多条声明定义之后，将立即对HTML中的标签产生作用类选择器.class一条或多条声明需在HTML中为标签添加类选择器，才可生效ID选择器#ID一条或多条声明用法与类选择器基本相同第10页/共69页讲解：CSS复合选择器概念由两个或多个基本选择器，通过不同方式连接而成3种常用的复合选择器后代选择器并集选择器全局选择器第11页/共69页讲解：后代选择器概念通过嵌套的方式，对特殊位置的HTML标签进行声明特点外层的标签写在前面，内层的标签写在后面，之间用空格分隔内层标签是外层标签的后代p(父类)span(子类=后代）外层标签内层标签示例pspan{CSS样式声明;}后代选择器演示示例：后代选择器第12页/共69页讲解：并集选择器概念由两个或两个以上选择器，通过逗号连接构成，其结果是同时选中各个基本选择器所选择的范围特点任何形式的选择器均可作为并集选择器的一部分声明各选择器的相同样式h1#one.style示例h1,.special,#one{CSS样式声明;}并集选择器演示示例：并集选择器所选范围3者共同的样式第13页/共69页讲解：全局选择器概念选择器是“*”，该选择器可以为所有HTML标签设置相同样式特点选择范围为全体HTML标签声明所有标签的相同样式演示示例：全局选择器*{

CSS样式声明;}语法使用“*”全局声明，可以大大减少代码量第14页/共69页讲解：CSS的继承性HTML的组织结构<h1><em>div+css</em>网页制作</h1><p>欢迎来到div+css网页制作……</p><ul><li>在这里，你可以学习到：</li><ul><li>HTML</li><li>CSS<ul><li>CSS初级</li>……</ul></li><li>JavaScript</li></ul></li><li>你还可以学习到：</li><ol><li>Flash</li>……</ol></ul><p>如果您有任何问题，欢迎给……</p>继承关系结构树第15页/共69页讲解：CSS的继承性继承关系树型图根html标签的子标签title标签的父标签第16页/共69页讲解：CSS的继承性CSS继承的概念子标签可以继承父标签的样式子标签的样式，不会影响父标签关键代码h1{ color:blue; text-decoration:underline;}em{color:red;}li{color:green;font-weight:bold;}演示示例：继承特性第17页/共69页行内式嵌入式示例串讲：在HTML中引入CSS的方式<h1style="font-size:30px;color:#ff0000;">茉莉花</h1>使用HTML标签的style属性添加样式示例<styletype="text/css">h1{ color:red; font-size:14px;}</style>位于<head>标签中第18页/共69页链接式导入式示例串讲：在HTML中引入CSS的方式<linkhref=”style.css”rel=”stylesheet”type=”text/css”/>示例<styletype="text/css">@import”style.css”;</style>位于<head>标签中位于<head>标签中第19页/共69页串讲：样式的优先级请说出CSS中3种基本选择器之间的优先级。请说出CSS中3种样式表之间的优先级。提问ID选择器类选择标签选择器行内样式内嵌样式外部样式注意在同一选择器中，两条声明相同，后一条声明会覆盖前一条声明第20页/共69页上机练习需求说明制作今日推荐页面练习：后代选择器、并集选择器和全局选择器完成时间：15分钟共性问题集中讲解练习第21页/共69页小结使用（）选择器，可以对所有HTML标签设置相同样式。在HTML标签行内添加CSS样式时,可以使用（）。外部样式有（）和（）两种。style属性全局提问链接式导入式第22页/共69页串讲：文本与文字属性分别说出常用的文本和文字属性及其作用。（各4个）在CSS中，设置文本行高可以使用什么属性？提问注意使用font-family属性，同时设置中英文两种字体时，必须先设置英文，后设置中文，即：font-family:Arial,"宋体";第23页/共69页a:linka:visiteda:hovera:active串讲：超链接伪类超链接伪类（Pseudo-classes）制作超链接动态效果声明顺序：a:link与a的异同a:active的使用情况注意第24页/共69页串讲：cousor属性在CSS中，cousor属性的作用是什么？cousor属性的常用属性值是（），其表示光标呈现（）。提问设置鼠标光标形状（外观）pointer手形第25页/共69页串讲：背景属性在CSS中，背景的简写属性是（）。请说出背景属性的分量属性及其作用。在CSS中，背景的（）属性和（）属性，只有在设置了background-image属性之后，才能生效。提问background-positionbackground-repeatbackground第26页/共69页讲解：盒子模型盒子模型网页布局的基础与生活中的盒子相似纸盒填充部分盒内物品纸盒外围间隙第27页/共69页讲解：盒子模型盒子模型属性边框(border)内边距(padding)元素内容外边距(margin)第28页/共69页讲解：盒子模型盒子模型平面结构图盒子模型属性的共同点顺时针分为：上右下左4个方向3个属性都可以分别设置各个方向属性值3个属性都可以同时设置4个方向属性值3个属性都占据空间第29页/共69页讲解：盒子模型盒子模型三维立体结构图第一层第二层第三层第四层第五层第30页/共69页讲解：盒子模型属性边框属性有几个分量属性？它们的作用分别是什么？设置盒子模型内边距使用（）属性，外边距使用（）属性。问题border-color设置边框颜色border-width设置边框粗细border-style设置边框样式paddingmargin第31页/共69页讲解：盒子模型属性margin属性除了可以设置盒子与盒子之间的间距外，还能用于什么？问题实现网页自动居中布局关键代码body{margin:0;}#content{ width:760px; margin:0auto;}实现关键点div宽度固定margin属性的左右外边距值为auto将默认内边距初始化为0固定宽度div自动居中演示示例：自动居中布局第32页/共69页讲解：盒子模型尺寸盒子模型尺寸如何计算？问题盒子模型尺寸=border-width+padding+margin+内容尺寸（宽度/高度）内容的宽度或高度该盒子模型中，border宽度为0第33页/共69页上机练习需求说明制作爱的礼物页面练习：背景属性、盒子模型属性完成时间：10分钟共性问题集中讲解练习第34页/共69页上机练习需求说明制作网易印象派页面练习：盒子模型属性、表格制作一行两列布局完成时间：15分钟共性问题集中讲解练习第35页/共69页串讲：列表属性在CSS中，可以用于设置列表样式的属性有哪些？它们的作用分别是什么？使用list-style-image属性设置列表项图标，会产生浏览器兼容性问题，解决方法如下：将list-style-type属性的值设为none使用background属性为<li>标签设置背景图像问题list-style简写属性，设置所有分量样式list-style-type设置列表项标志的类型list-style-image将图像设置为列表项标志list-style-position设置列表中列表项标志的位置演示示例：列表项图片符号第36页/共69页上机练习需求说明制作所有商品分类页面练习：list-style-type属性与background属性结合设置列表项图标完成时间：15分钟共性问题集中讲解练习第37页/共69页讲解：float属性为什么需要float属性？提问定位网页元素定位[更多活动]创建横向多列布局横向三列布局横向两列布局第38页/共69页讲解：浮动属性float属性定义元素的浮动方向属性值：关键字left浮动至容器的最左侧直到接触容器为止right浮动至容器的最右侧直到接触容器为止none不浮动float:属性值;语法第39页/共69页讲解：浮动属性浮动的特点左浮动时，与之相邻的元素，会紧挨着其右侧排列右浮动时，与之相邻的元素，会紧挨着其左侧排列盒子-1左浮动盒子-2紧贴其右显示盒子-1右浮动盒子-2紧贴其左显示演示示例：浮动属性第40页/共69页讲解：浮动属性浮动的特点同时有左浮动和右浮动的元素时，与之相邻的元素，会填满两者之间的间隙演示示例：浮动属性第41页/共69页讲解：浮动属性浮动特性使元素紧挨着容器左侧或右侧，相邻元素紧挨其显示未设置尺寸的块级元素，设置了浮动之后，其尺寸会根据其内部元素大小自适应同时有左浮动和右浮动元素时，与其相邻的元素会填满两者之间的间隙第42页/共69页讲解：浮动属性浮动法布局运用float属性创建横向多列布局的特性width属性结合overflow属性清除浮动增加子层内容，结构不受影响关键代码#container{width:760px;overflow:hidden;}#left{float:left;}#right{float:left;margin-left:20px;}清除浮动设置两个盒子之间的间距演示示例：浮动法使垂直排列的块级元素横向排列第43页/共69页讲解：浮动属性如何实现左右两侧的列交换位置？问题第44页/共69页演示示例：浮动法问题上机练习需求说明制作多情浪子博客首页练习：浮动法布局、列表属性、盒子模型属性完成时间：30分钟共性问题集中讲解练习第45页/共69页判断对错在列表中，list-style属性与list-style-type属性作用相同，没有区别。浮动属性可用于定位网页元素和创建横向多列布局。浮动属性可以使网页元素浮动至容器的左侧或右侧，与其相邻的元素会紧挨着浮动元素显示。使用浮动法布局页面时，增加子层内容，网页结构会受影响。小结提问第46页/共69页串讲：clear属性在CSS中，clear属性的作用是什么？清除浮动盒子对周围文字的影响时，应将clear:both设置在文字相关的样式中问题演示示例：清除浮动清除浮动影响，扩展盒子高度注意第47页/共69页属性值说明visible默认值。内容不会被修剪，会呈现在盒子之外hidden内容会被修剪，并且其余内容是不可见的scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容讲解：overflow属性overflow属性用于处理盒子中的内容溢出属性值：关键字overflow:属性值;语法第48页/共69页讲解：overflow属性overflow属性的妙用结合width属性清除浮动影响扩展盒子高度关键代码overflow:hidden;width:100%;演示示例：overflow属性第49页/共69页讲解：display属性为什么需要display属性？提问<body><h3>我最喜欢的城市</h3><ul><li>西双版纳</li><li>西安</li><li>苏州</li></ul><p>关于喜欢的理由，其实，很简单。西双版纳是生我养我的故乡，那里有我至亲至爱的人，是我无论浪迹何方，都会记得归去的乐土...</p></body>按标签顺序排版—标准文档流标准文档流包括块级元素(block)和行内元素(inline)display属性的作用:指定HTML标签的显示方式第50页/共69页讲解：display属性display属性用于指定HTML标签的显示方式属性值：关键字display:属性值;语法属性值说明block将元素显示为块级元素，该元素前后会带有换行符inline默认。元素会被显示为行内元素，该元素前后没有换行符none该元素不会被显示第51页/共69页讲解：display属性display属性应用块级元素与行内元素的互相转换解决IE6、IE7中浮动导致的双倍边距在同时设置了float属性和margin属性（仅左右边距）的元素中，设置display:inline;示例span{display:block;}div{display:inline;}使span标签块状显示演示示例：display属性使div标签行内显示第52页/共69页讲解：position属性为什么需要position属性？提问进行复杂的元素定位浮于页面之上的提示框浮动广告消息提示框第53页/共69页讲解：position属性relative(相对定位)偏移参照基准自身原位置设置1个或多个子块根据指定偏移量进行偏移仍旧处于标准文档流中对父块及兄弟块无影响设置方式相对原位置，水平右移30px相对原位置，垂直下移30px演示示例：相对定位第54页/共69页讲解：position属性absolute(绝对定位)偏移参照基准浏览器窗口仅设置1个子块根据指定偏移量进行偏移脱离了标准文档流不会对相邻块造成影响设置方式距离绝对定位较近的，已经定位的祖先元素父块相对定位，子块绝对定位根据指定偏移量进行偏移脱离了标准文档流不会对相邻块造成影响演示示例：绝对定位1.未设置偏移量方向：保持在原位2.设置偏移量方向：浏览器窗口仅子块绝对定位，设一个偏移量设置偏移量方向，按指定偏移量偏移脱离了标准文档流不会对相邻块造成影响第55页/共69页串讲：z-index属性在CSS中，z-index属性的作用是什么？Z-index属性控制元素堆叠时，有什么特点。问题用于调整定位时重叠块的上、下位置位于x-y轴的页面，相当于z-index:0当z-index:-1时，图片位于x-y轴的页面之下在z轴上叠加的层，相当于z-index:1在z轴上叠加的层，相当于z-index:2第56页/共69页上机练习需求说明制作淘宝主导航练习：position属性完成时间：10分钟共性问题集中讲解练习第57页/共69页上机练习需求说明制作psytopic主视觉练习：position属性、z-index属性完成时间：15分钟共性问题集中讲解练习第58页/共69页判断对错overflow属性和clear属性都可用来清除浮动。任何情况下都可以使用z-index属性来设置网页元素的堆叠次序。绝对定位的元素脱离了标准文档流，相对定位的元素未脱离标准文档流。A元素是B元素的父块，A元素为相对定位，B元素为绝对定位，则B元素以浏览器窗口为基准进行偏移。小结提问第59页/共69页串讲：网站制作流程网站制作流程1美工或网页设计师设计界面2前端工程师切图，制作静态页面，实现交互效果3软件工程师实现网站功能，并将功能与界面整合4测试工程师测试网站性能与功能后，交付用户使用第60页/共69页讲解：常见CSSHACKIE有条件注释子选择器招数示例<!--[ifIE8]><styletype="text/css">@import"test.css";</style><![endif]-->声明浏览器版本导入样式表示例html>body{background-image:url(bg.png);}针对IE6及以下版本隐藏图片bg.png第61页/共69页讲解：常见CSSHACK*HTML招数!important招数示例*html{font-si

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论