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

第3章网页Logo和Banner及超链接网站综合开发解析背景的设置可以采用两种方式：颜色设置背景、图片设置背景。用background-repeat属性来设置背景的重复方式。用background-attachment属性来设置背景图片是否随文字的移动而移动。用background-position属性值来设置背景图片的定位。CSS标记只能显示一种背景属性，除了设置body的背景属性外，还要定义多个不同的CSS类，并在其中定义背景属性，以达到设置多个背景的效果。可以将背景样式的多条CSS属性写到一行代码中。上章回顾本章进阶掌握图像Logo的制作方法掌握图像Banner的制作方法掌握网页中超链接的常用样式Logo和Banner的相关知识

Logo和Banner的介绍Logo是企业综合信息传递的媒介。Banner是一种网络广告形式。Logo和Banner的相关知识盒子模型回顾Logo和Banner的相关知识CSS边框属性CSS属性名称border(border-top、border-right、border-bottom、border-left)相关属性值border-style可设为none、hidden、dashen、dotted、soild等border-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，内边距为20px的div块元素。Logo和Banner的相关知识

Id与class选择器在CSS文件里书写时，id选择器加前辍“#”，class选择器加前辍“.”。一个页面只可以使用一次id选择器，而class选择器可以多次使用。

id选择器，用于区分不同的结构和内容；class选择器是一个样式，可以套在任何结构和内容上。

id选择器是先找到结构或内容，再给它定义样式；class选择器是先定义好一种样式，再套用于多个结构或内容。制作图像Logo效果图的分析

本例效果图本例的最终效果图制作图像Logo页面结构的制作<divclass="content"><divclass="logo"></div></div>结构图制作图像LogoLogo图片位置的确定整体页面背景制作定义body的样式：body{background:#000;margin:0px; padding:0px;}制作图像Logo对主体样式进行定义.content{width:820px;margin:0auto;}对Logo图片进行定义.logo{width:300px; float:left; margin-top:240px;}制作图像Banner效果图分析制作图像Banner网页结构的制作<divclass="content"><divclass="logo"><imgsrc="logo.jpg"/></div><divclass="banner"><imgsrc="banner.jpg"/></div></div>

结构图制作图像BannerBanner位置的确定.banner{width:520px;float:right;margin-top:150px;}超链接超链接类型按照使用对象的不同，分为文本超链接、图像超链接、E-maill链接、锚点链接、多媒体文件连接、空链接等。按照链接路径的不同，分为内部链接、锚点链接和外部链接。按照链接样式是否会产生除本身默认效果外的特殊效果，分为动态超链接和静态超链接。

超链接超链接的组成及伪类

在网页中，超链接是通过<a>标签来实现的，链接地址通过<a>标签的href属性来实现。<ahref="#">网站综合开发解析</a>

属性说明link超链接在普通状态下的样式visited已访问的超链接样式hover鼠标指针经过链接时的样式active当前激活状态的超链接样式在书写时，超链接的伪类是有一定顺序的，其正常顺序是a:link、a:visited、a:hover、a:active。其中可以对某个伪类不加定义，但是要定义，就必须按照这个顺序。超链接添加a:link属性在样式表中加入a:link{}，定义链接为红色文字，没有下划线。a:link{ color:#F00; text-decoration:none;}超链接

添加a:visited属性

a:visited是指访问过的链接样式，改变文字和删除线的效果:a:visited{color:#390;text-decoration:line-through;}超链接

添加a:hover属性

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

.test1a{}.test1a:link{}.test1a:visited{}.test1a:hover{}.test1a:active{}

.test2a{}.test2a:link{}.test2a:visited{}.test2a:hover{}.test2a:active{}

在一个网站中制作多种链接样式有很多种方法，本质上就是向class或id中添加链接的伪类属性，之后该伪类属性就会直接定义该class或id所对应的内容中。<ahref="#"class="test2">链接样式</a>超链接

对整体页面进行样式和结构定义<divclass="main"><h1class="s1"> <ahref=“#”>王蒙：……</a></h1>……</div>body{font-size:12px;color:#666;}.main{width:360px;border:1pxsolid#CCC;padding:10px;text-align:center;line-height:20px;}h1{font-size:16px;}.xuxian{border-bottom:1pxdotted#CCC;height:12px;line-height:1px;}对整体的样式进行定义

→超链接

对网页的默认链接样式进行定义a{color:#666;text-decoration:none;}a:hover{color:#C00;text-decoration:underline;}超链接

对新闻部分大标题添加链接样式

.s1a{color:#C00;text-decoration:none;}.s1a:hover{color:#00F;text-decoration:underline;}

超链接

对热书添加链接样式

.s2a{color:#F60;text-decoration:none;}.s2a:hover{color:#F00;text-decoration:underline;}

综合实例效果图的分析

携程旅行网的顶部内容——页面整体主色调采用了大自然中的蓝色，幽静深远的大自然之色，表达了人对大自然的无限向往以及宁静广阔的心灵感受。综合实例页面结构的制作

<divclass="header"><divclass="toolkit"><divclass="contact"></div><divclass="login"></div><divclass="links"></div></div><ulclass="pagehead"><liclass="logo"></li><liclass="banner"></li><liclass="submenu"></li></ul></div>综合实例页面内容及样式制作

整体样式的定义body{padding:0;margin:0;font-size:12px;font-family:Arial,Helvetica,sans-serif;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;}综合实例对header的样式进行定义

header是顶部文件的块，顶部文件的所有内容都将放在header中。应先计算出顶部文件所占的宽度，再设置header居中属性。.header{width:950px;margin:0auto;}综合实例

对toolkit的样式进行定义

<divclass="toolkit"><divclass="contact"><spanclass="contact_tel">800-820-6666</span><spanclass=“contact_mobile”>1010-6666（免长途话费）</span></div><divclass="login"><ahref="#">登录</a><ahref="#">合作卡</a><ahref="#">注册</a></div><divclass="links"><ahref="#">我的携程</a><ahref="#">积分奖励</a><ahref="#">帮助中心</a></div></div>在HTML代码中添加联系区，用<span>标签制作。综合实例.toolkit{height:30px;line-height:30px;border-right:1pxsolid#cee4f7;border-bottom:1pxsolid#cee4f7;border-left:1pxsolid#cee4f7;background:url(../images/bg_toolkit.gif)repeat-x;}分析效果图，对<div>及<span>标签进行定义.contact{float:left;padding-left:10px;}.contactspan{float:left;}.contact_tel,.contact_mobile,{margin-right:8px;padding-left:20px;}.contact_tel{background:url(../images/iocn_tel.png)no-repeat0px8px;}.contact_mobile{background:url(../images/iocn_mobile.png)no-repeat5px8px;}综合实例

对pagehead进行定义<ulclass="pagehead"><liclass="logo"><ahref="#"><imgsrc="images/logo.gif"title="携程旅行网"/></a></li><liclass="banner"><ahref="#"><imgsrc="images/banner.jpg"/></a></li><liclass="submenu"><ahref="#"title="手机版">手机版</a><ahref="#"title="繁体版">繁体版</a><ahref="#"title="English">English</a></li></ul>

pagehead类样式里有一个<ul>标签和三个<li>标签。综合实例.pagehead{width:100%;padding:10px0px;}

按照HTML代码顺序，先对pagehead进行样式定义。根据效果图可知，只