基于CSS技术网页导航栏制作.docVIP

基于CSS技术网页导航栏制作 　　摘 要：CSS的开发技术已成为现如今网页前台开发的主要应用技术，导航栏作为整个网站的向导，用途至关重要，基于CSS技术开发的导航栏能在各类浏览器中正常使用，解决了浏览器不兼容的情况，从而解决了网页开发的难题。 　　关键词：CSS；网页制作；导航栏；浏览器兼容 　　对网页前台设计师而言，网页的兼容性至关重要，用户的体验是设计师设计的出发点，随着浏览器的更新，许多网页的导航栏无法正常使用，导致网站浏览异常，使得网页需要频繁地更新维护。而使用CSS技术进行开发的网页导航栏，在多个浏览器中都可正常使用，并且还能在网页开发中广泛应用。 　　1 CSS简介 　　1.1 CSS概述 　　CSS（Cascading Style Sheet，层叠样式表）是用于控制网页元素显示样式的标记语言，是目前流行的网页设计技术，与传统使用的HTML技术布局网页相比，CSS可以实现网页分离，同一个网页应用不同的CSS，会呈现不同的效果的特点。同时，CSS可以支持几乎所有的字号和字体，对网页中的对象可以进行精确到像素为单位的排版，是目前最主流的设计语言之一，并且具有较强的易读性，可针对各类人群。 　　1.2 CSS语法 　　CSS样式表分为嵌入式样式表、外部样式表和内联样式表3种，其中，优先级：内联式嵌入式外联式，本文所采用的主要为外部样式表设计，更加方便应用、修改。 　　CSS基本语法：td{ text-align：center；}，td为选择器，text-align为属性，center为值。期中，选择器分为类选择器、标签选择器、ID选择器和复合内容，属性与属性值之间使用“：”隔开，多个属性之间使用“；”隔开。 　　2 CSS技术的导航栏制作 　　2.1 使用Photoshop设计导航栏美工 　　在使用CSS制作网站导航栏之前，首先使用Photoshop制作网站导航栏的美工设计，根据网站整体风格以及色彩搭配，设计好网页所需的一级菜单和二级菜单的图片样式。要注意视觉区域的划分、重点主题突出等特点。并且使用Photoshop保存出透明无底色的背景图片作为备用，以我校实验教学部网站为例（见图1-2）。 　　2.2 使用CSS和表格布局制作导航栏初步结构 　　使用DIV+CSS的布局方式设置导航栏的位置，布局好整体架构，并使用表格的布局方法完成导航栏内部文字的布局设计。代码如图3所示。 　　设置ID选择器dh和类选择器mainMenu属性，完成导航栏的视觉美工设计（见图4）。 　　#dh{ width：1024px； height：67px； float：left} 　　.mainMenu a：link，.mainMenu a：visited{fontsize：16px；display：block；line-height：42px；verticalalign：middle；text-align：center；color：#FFF；textdecoration：none；font-family：SimSun；font-weight：600} 　　2.3 制作鼠标划过弹出菜单效果 　　#sub1{display：none；margin-top：-2px；paddingtop：6px；position：relative；}本语句定义ID选择器sub1的显示框为未显示，距离顶部距离为-2像素，文字距离盒子模型顶部距离为6像素，并且定位为相对定位。 　　#sub1 a{margin-left：10px；color：#636363；fontsize：13px；font-weight：600；text-decoration：none}定义了sub1选择器中的超链接的文字属性。 　　#sub1 a：visited{color：#636363；}定义了sub1选择器中的超链接访问后的文字属性。 　　#sub1 a：hover{color：#0160a2}定义了sub1选择器中的超链接鼠标划过时的文字属性。 　　#sub1{margin-left：120px；}定义了sub1选择器距离左侧偏移值。 　　在完成以上样式的定义后，完成HTML页面中的二级菜单制作（见图5）。 　　其中：o n m o u s e o v e r = d o c u m e n t . getElementById（’sub1’）.style.display=’block’，表示鼠标划过得到的对象为sub1，并且显示为块级元素。 　　onmouseover=document.getElementById（’sub1’）. style.display=’block’onmouseout=document. getEleme