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

网站综合开发解析 第 3 章 网页Logo和Banner及超链接 背景的设置可以采用两种方式：颜色设置背景、图片设置背景。 用background-repeat属性来设置背景的重复方式。 用background-attachment属性来设置背景图片是否随文字的移动而移动。 用background-position属性值来设置背景图片的定位。 CSS标记只能显示一种背景属性，除了设置body的背景属性外，还要定义多个不同的CSS类，并在其中定义背景属性，以达到设置多个背景的效果。 可以将背景样式的多条CSS属性写到一行代码中。 盒子模型的3个位置属性：边框（boder）、外边距（margin）和内边距（padding）。 制作图像logo的关键在于图像的定位问题，选用合理的属性定位图片。 banner一般显示在logo的右侧，合理地利用浮动属性和边界属性可以很好地控制元素的显示位置。 CSS提供了link、visited、hover、active4种a对象的伪类来表示链接的4中不同状态。 综合实例 页面内容及样式制作 整体样式的定义 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:0 auto; } 综合实例 对toolkit的样式进行定义 div class=toolkit div class=contact span class=contact_tel800-820-6666/span span class=“contact_mobile”1010-6666（免长途话费）/span /div div class=login a href=#登录/a a href=#合作卡/a a href=#注册/a /div div class=links a href=#我的携程/a a href=#积分奖励/a a href=#帮助中心/a /div /div 在HTML代码中添加联系区，用span标签制作。 综合实例 .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; } 分析效果图，对div及span标签进行定义 .contact { float: left; 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; } 综合实例 对pagehead进行定义 ul class=pagehead li class=logo