第 3 章 网页Logo和Banner及超链接

1、第第 3 3 章章 网页网页LogoLogo和和BannerBanner及超链接及超链接网站综合开发解析网站综合开发解析q 背景的设置可以采用两种方式：颜色设置背景、图片设置背景。 q 用background-repeat属性来设置背景的重复方式。 q 用background-attachment属性来设置背景图片是否随文字的移动而移动。 q 用background-position属性值来设置背景图片的定位。 q CSS标记只能显示一种背景属性，除了设置body的背景属性外，还要定义多个不同的CSS类，并在其中定义背景属性，以达到设置多个背景的效果。 q 可以将背景样式的多条CSS属性写到一

2、行代码中。 上章回顾本章进阶q 掌握图像Logo的制作方法q 掌握图像Banner的制作方法q 掌握网页中超链接的常用样式Logo和Banner的相关知识q Logo和Banner的介绍Logo是企业综合信息传递的媒介。Banner是一种网络广告形式。Logo和Banner的相关知识q 盒子模型回顾Logo和Banner的相关知识 CSS边框属性CSS属性名称 border(border-top、border-right、border-bottom、border-left) 相关属性值 border-style 可设为none、hidden、dashen、dotted、soild等 borde

3、r-width 可设为关键字或具体单位数值 border-color 可设为RGB颜色分量、十六进制颜色值、颜色英文关键词 Logo和Banner的相关知识CSS内边距属性CSS属性名称 padding (padding-top、padding-right、padding-bottom、padding-left) 相关属性值 单位数值，百分比 CSS外边距属性CSS属性名称 margin(margin-top、margin-right、margin-bottom、margin-left) 相关属性值 单位数值，百分比 Logo和Banner的相关知识 创建一个边框宽为10px，外边距为50px

4、，内边距为20px的div块元素。Logo和Banner的相关知识q Id与class选择器v 在CSS文件里书写时，id选择器加前辍“#”，class选择器加前辍“.”。v 一个页面只可以使用一次id选择器，而class选择器可以多次使用。v id选择器，用于区分不同的结构和内容；class选择器是一个样式，可以套在任何结构和内容上。v id选择器是先找到结构或内容，再给它定义样式；class选择器是先定义好一种样式，再套用于多个结构或内容。制作图像Logoq 效果图的分析 本例效果图本例的最终效果图制作图像Logoq 页面结构的制作 结构图制作图像Logoq Logo图片位置的确定v 整体

5、页面背景制作定义body的样式：body background:#000; margin:0px; padding:0px; 制作图像Logov 对主体样式进行定义.content width:820px; margin:0 auto; v 对Logo图片进行定义.logo width:300px; float:left; margin-top:240px; 制作图像Bannerq 效果图分析制作图像Bannerq 网页结构的制作 结构图制作图像Bannerq Banner位置的确定.banner width:520px; float:right; margin-top:150px; 超链接q

6、 超链接类型v 按照使用对象的不同，分为文本超链接、图像超链接、E-maill链接、锚点链接、多媒体文件连接、空链接等。v 按照链接路径的不同，分为内部链接、锚点链接和外部链接。v 按照链接样式是否会产生除本身默认效果外的特殊效果，分为动态超链接和静态超链接。 超链接q 超链接的组成及伪类 在网页中，超链接是通过标签来实现的，链接地址通过标签的href属性来实现。网站综合开发解析 属性 说明 link超链接在普通状态下的样式visited 已访问的超链接样式 hover 鼠标指针经过链接时的样式 active 当前激活状态的超链接样式 在书写时，超链接的伪类是有一定顺序的，其正常顺序是a:li

7、nk、a:visited、a:hover、a:active。其中可以对某个伪类不加定义，但是要定义，就必须按照这个顺序。超链接v 添加a:link属性 在样式表中加入a:link ，定义链接为红色文字，没有下划线。a:linkcolor: #F00;text-decoration: none;超链接v 添加a:visited属性 a:visited是指访问过的链接样式，改变文字和删除线的效果:a:visited color: #390; text-decoration:line-through; 超链接v 添加a:hover属性 a:hover用来判断当前鼠标的位置是否是一个链接。通常用各种各

8、样的创意来定义a:link、a:hover属性，以吸引用户注意到链接。a:link color: #F00; text-decoration: none; 超链接v 添加a:active属性 a:active属性一般很少用，主要是因为当用户单击完一个链接之后，鼠标焦点很容易就会从当前激活的链接转移到其它地方，此时该链接就不是当前激活状态，从而使a:active属性失效。超链接q 定义多个超链接样式 .test1 a .test1 a:link .test1 a:visited .test1 a:hover .test1 a:active .test2 a .test2 a:link .test

9、2 a:visited .test2 a:hover .test2 a:active 在一个网站中制作多种链接样式有很多种方法，本质上就是向class或id中添加链接的伪类属性，之后该伪类属性就会直接定义该class或id所对应的内容中。链接样式 超链接 对整体页面进行样式和结构定义 王蒙： body font-size:12px; color:#666; .main width:360px; border:1px solid #CCC; padding:10px; text-align:center; line-height:20px; h1 font-size:16px; .xuxian

10、border-bottom:1px dotted #CCC; height:12px; line-height:1px; 对整体的样式进行定义 超链接v 对网页的默认链接样式进行定义a color: #666; text-decoration: none;a:hover color: #C00; text-decoration: underline; 超链接v 对新闻部分大标题添加链接样式 .s1 a color: #C00; text-decoration: none;.s1 a:hover color: #00F; text-decoration: underline; 超链接v 对热书添

11、加链接样式 .s2 a color: #F60; text-decoration: none;.s2 a:hover color: #F00; text-decoration: underline; 综合实例q 效果图的分析 携程旅行网的顶部内容页面整体主色调采用了大自然中的蓝色，幽静深远的大自然之色，表达了人对大自然的无限向往以及宁静广阔的心灵感受。 综合实例q 页面结构的制作 综合实例q 页面内容及样式制作 v 整体样式的定义body padding:0; margin:0; font-size:12px; font-family:Arial, Helvetica, sans-serif;

12、 color:#000;Img border-style: none;ul margin:0; padding:0; list-style:none;a color:#05a; text-decoration:none;a:hover color:#05a; text-decoration:underline; 综合实例v 对header的样式进行定义 header是顶部文件的块，顶部文件的所有内容都将放在header中。应先计算出顶部文件所占的宽度，再设置header居中属性。.header width:950px; margin:0 auto; 综合实例v 对toolkit的样式进行定义

13、800-820-6666 1010-6666（免长途话费） 登录 合作卡 注册 我的携程 积分奖励 帮助中心 在HTML代码中添加联系区，用标签制作。综合实例.toolkit height:30px; line-height:30px; border-right: 1px solid #cee4f7; border-bottom: 1px solid #cee4f7; border-left: 1px solid #cee4f7; background:url(./images/bg_toolkit.gif) repeat-x; 分析效果图，对及标签进行定义.contact float: le

14、ft; padding-left:10px;.contact span float: left;.contact_tel, .contact_mobile, margin-right: 8px; padding-left: 20px;.contact_tel background:url(./images/iocn_tel.png) no-repeat 0px 8px;.contact_mobile background:url(./images/iocn_mobile.png) no-repeat 5px 8px; 综合实例v 对pagehead进行定义 手机版 繁体版 English pa

15、gehead类样式里有一个标签和三个标签。综合实例.pagehead width:100%; padding:10px 0px; 按照HTML代码顺序，先对pagehead进行样式定义。根据效果图可知，只需要对其宽度以及内边距进行定义即可。综合实例对logo、banner和submenu进行定义.logo padding-top: 4px; float:left; width: 215px; height:52px; overflow:hidden; .banner width:468px; float:left; margin-left:50px; display:inline;.submenu float:right; width:130px; height:14px; margin:38px 4px 0 0; line-height:15px; background:url(./images/iocn_submenu.png) no-repeat; padding-left:5