基于CSS技术的网导航栏制作

1、基于CSS技术的网页导航栏制作摘要：CSS勺开发技术已成为现如今网页前台开发的 主要应用技术， 导航栏作为整个网站的向导， 用途至关重要， 基于CSS技术开发的导航栏能在各类浏览器中正常使用，解 决了浏览器不兼容的情况，从而解决了网页开发的难题。关键词：css网页制作；导航栏；浏览器兼容 对网页前台设计师而言，网页的兼容性至关重要，用户 的体验是设计师设计的出发点，随着浏览器的更新，许多网 页的导航栏无法正常使用，导致网站浏览异常，使得网页需 要频繁地更新维护。而使用CSS技术进行开发的网页导航栏， 在多个浏览器中都可正常使用，并且还能在网页开发中广泛 应用。1 CSS简介1.1 csS既述C

2、 S S（ Cascading Style Shee，t 层叠样式表）是用于控制网 页元素显示样式的标记语言，是目前流行的网页设计技术， 与传统使用的HTML技术布局网页相比，CSS可以实现网页 分离，同一个网页应用不同的CSS会呈现不同的效果的特点。同时，CSS可以支持几乎所有的字号和字体，对网页中 的对象可以进行精确到像素为单位的排版，是目前最主流的 设计语言之一，并且具有较强的易读性，可针对各类人群。1.2 CSS语法CSS样式表分为嵌入式样式表、外部样式表和内联样式 表 3 种，其中，优先级：内联式 嵌入式 外联式，本文所采 用的主要为外部样式表设计，更加方便应用、修改。CSS基本语法

3、：td text-align : center; , td 为选择器， text-align 为属性， center 为值。期中，选择器分为类选择器、 标签选择器、 ID 选择器和复合内容，属性与属性值之间使用 “：”隔开，多个属性之间使用“； ”隔开。2 CSS技术的导航栏制作2.1 使用 Photoshop 设计导航栏美工在使用CSS制作网站导航栏之前，首先使用Photoshop制作网站导航栏的美工设计，根据网站整体风格以及色彩搭 配，设计好网页所需的一级菜单和二级菜单的图片样式。要 注意视觉区域的划分、重点主题突出等特点。并且使用 Photoshop 保存出透明无底色的背景图片作为备用，

4、以我校 实验教学部网站为例（见图 1-2）。2.2使用CSS和表格布局制作导航栏初步结构使用DIV+CSS的布局方式设置导航栏的位置，布局好整 体架构，并使用表格的布局方法完成导航栏内部文字的布局 设计。代码如图 3 所示。设置 ID 选择器 dh 和类选择器 mainMenu 属性，完成导 航栏的视觉美工设计（见图 4）。#dh width ：1024px； height ：67px； float ：left.mainMenu a ：link ，.mainMenu a ：visitedfontsize ：16px； display：block ；line-height ：42px；verti

5、calalign ：middle ；text-align ： center ；color：#FFF；textdecoration ：none；font-family ：SimSun； font-weight ： 6002.3 制作鼠标划过弹出菜单效果#sub1display ： none ； margin-top ： -2px； paddingtop ： 6px； position ： relative ； 本语句定义 ID 选择器 sub1 的显示 框为未显示，距离顶部距离为 -2 像素，文字距离盒子模型顶 部距离为 6 像素，并且定位为相对定位。#sub1 amargin-left ：10

6、px； color： #636363； fontsize ： 13px；font-weight ：600；text-decoration ：none 定义了 sub1 选择器中的超链接的文字属性。#sub1 a： visitedcolor ： #636363；定义了 sub1 选择器 中的超链接访问后的文字属性。#sub1 a: hovercolor : #0160a2定义了 subl 选择器中的 超链接鼠标划过时的文字属性。#sub1margin-left : 120px; 定义了 subl 选择器距离左 侧偏移值。在完成以上样式的定义后，完成 HTML 页面中的二级菜单制作（见图 5）其中

7、： o n m o u s e o v e r = d o c u m e n t .getElementById（ sub1） .style.display= block ，表示鼠 标划过得到的对象为 subl，并且显示为块级元素。onmouseover=document.getElementById （ sub1）. style.display=blockonmouseout=document. getElementById（ s u b 1 ） .style.display= none 表示鼠 标离开， sub1 元素隐藏。最后完成导航栏所有二级菜单的制作（见图6）。3 网页兼容性测试网

8、页开发完成后，往往会遇到浏览器兼容性问题。浏览器兼容性问题又称网页兼容性问题，是指网页在不同的浏览器上的效果可能会显示的不一致，会导致出现页面混乱、效果在某些浏览器中无法正常使用等，严重影响浏览者的用户 体验。因此，完成网页开发后必须进行浏览器的兼容性测试， 保证网页效果在不同的浏览器中显示正常。经过测试，使用CSS技术的导航栏能够在 Firefox, GoogleChrome, IE11以及lETester上的各个版本兼容，因此满足网页开发兼容性的要求（见图7-10）。4 结语CSS技术对网页中的对象的位置排版进行像素级的精确控制，成为现如今网页开发的主流趋势， 本文介绍了使用 CSS 技术

9、制作导航栏的过程以及方法。在实际操作中可按照该方法灵活运用，根据不同的风格制作出不同的、具有良好兼容 性的网站导航栏。参考文献 1 支和才，叶宾，吴嵘 .网页制作三合一项目教程 M. 上海：上海科学普及出版社， 2015.2 温谦.HTML+CSS网页设计与布局从入门到精通M.北京：人民邮电出版社， 2008.3 余跃泓 Web标准下的CSS+DIV布局初探J.计算机光 盘软件与应用， 2012（10）： 67-68.4 闻立鸥.基于表现与结构分离的网页布局实践J教育教学论坛， 2015（27）：93-94.The Production of Web Navigation Bar Based

10、on CSS TechnologyXu Ping（Guangdong Petroleum and Chemical Engineering Institute ， Maoming 525000 ， China）Abstract ： CSS development technology has become now a webpage downstage development the main application technology ， the navigation bar as a guide for the entire site ， use is essential， CSS technology development of navigation based on can be normally used in the various web b