CSS背景偏移技术实现网站导航菜单

_ } f 龌

I 【 乎 技 术

设计 开发

C S S背景偏移技术实现网站导航菜单

王 春 明

( 东北农业 大学成栋学院 黑龙江哈 尔滨 1 5 0 0 2 5 )

摘 要: 本 文主要 介绍 利用背景 坐标的偏 移技 术, 从一 张背景 图片上截取 所需的小 图标作 为 网站 菜单项的导航 图标, 减 少客 户端从服务 器下载 图片 的 次数 , 从 而提 高服 务 器 的性 能。 关 键词: 背景 坐标 偏移 b a c k g r o u n d — p o s i t i o n 中图分 类号 : T P 3 1 1 文献 标识码 : A 文 章编号 : 1 0 0 7 — 9 4 1 6 ( 2 0 1 3 ) 1 1 - 0 1 7 1 — 0 1

网站开发中常见的应用是利用背景坐标的偏移 , 截取一张背景 图 中某部分内容。 在网站设计中, 为了减少客户端从服务器下载图片的次 数, 提高服务器的性能 , 比较流行的做法是将多张图片拼合为一张大图 片, 然后利用b a m d _ 1 ) 。 E i 拄 O n 属性截取其中的各个小图, 最后再显 示在页面中。 最常见的应用就是网站菜单图标的截取。 现在以某网站的 导航菜单为例来说 明具体的实现过程, 实现效果如图1 所示 。

( 2 ) 截取小图2 ( 帮助中心图标) 作为第二个标签的背景图标。 如 图3 所示 , 该 图标纵 向无偏移 , 横 向需 向左移动 , 所 以为一 8 0 p x, 对应 的 C S S 设置为 : “ b a c k g r o u n d — p o s i t i o n : - 8 0 p x O p x ; ” 。 ( 3 ) 截取小 图3 ( 登录图标) 作为按钮的背景 图标 。 如 图3 所示 , 该图标横向无偏移 , 纵 向需 向上移动 , 所 以为-2 0 p x , 对应 的C S S 设置为 : “ b a c k g r o u n d -

p o s i t i o n: O p x一2 0 p x; ” 。

1建立标签组织结构, 为各标签增加类名以区分

nu” > <d i v c l a s =” t o p me

_

< ul >

<l i c l a s =” pi c l ” ></ l i >

<l i c l a s s =” t e x t ” >< a h r e f =” #” >购物车</ a ></ l i >

<l i c l a s s =” pi c 2” ></l i >

再根据图1 确定布局各块大小 , 统一高度2 6 p x , 小 图标宽2 8 p x, 登录 注册宽度 3 8 p x , 各菜单项的具体样式代码为 : p i c l { wi d t h: 2 8 p x; h e i g h t : 2 6 p

x, b a c k g r o u n d : u r l ( . . / i m— a g e s / i c o n. g i f )n o —r e p e a t ; } p i c 2 { wi d t h: 2 8 p x, h e i g h t : 2 6 p x ; b a c k g r o u n d: u r l ( . . / i m— a g e s / i c o n . g i f )n o - r e p e a t-2 8 p x O p x; }

.

.

< l i c l a s s =” t e x t ” ><a h r e f =” #” >帮 助 中 6 , </ a ></ l i >

<l i c l a s s =” pi c 3 ” ></l i >

p i c 3 { wi d t h: 2 8 p x; h e i g h t : 2 6 p x, b a c k g r o u n d: u r l ( . . / i m— a g s/ e i c o n . g i f )n o - r e p e a t-8 0 p x O p x; }

. .

< l i c l a s s =” t e x t ” ><a h r e f =” #” >加入收藏</ a ></ l i >

<l i c l a s s =” pi c 4” ></I i >

p i c 4 { w i d t h: 2 8 p x ; h e i g h t : 2 6 p x ; b a c k g r o u n d : u r l ( . . / i m—

a g e s / i c o n . g i f )n o - r e p e a t-1 1 2 p x O p x; }

< l i c l a s s =” t e x t ” ><a h r e f =” #” >设为首 页</ a ></ 1 i > < l i c l a s s =” b t n ” >< a h r e f =” #” >登 录 </ a ></ l i > < l i c l a s s =” b t n“ >< a h r e f =” #” >注 册 </ a >< / l i >

</ u l > </ di v >

b t n { wi d t h: 3 8 p x , h e i g h t : 2 6 p x, b a c gr k o u n d : u r l ( . . / i ma g s/ e i c o n. g i f )n o — r e p e a t O p x一 2 0 p x ; }

.

2 . 3 设 置 文 字大小及 菜单 文 字间填 充, 菜单 文 字居 中对 齐方 式, 左右 填 充5 p x t op me n u u l l i a { f o n t : 1 2 p x / 2 6 p x 宋体 ; } t e x t { p a d d i n g : 0 p x 5 p x; t e x t - a l i g n : c e n t e r , }

.

.

2设 置 C S S 样 式代 码 2 . 1容器设置右浮动, < 1 i > 左浮动, 并取 消列袁样式 t o p _ me n u { l f o a t : r i g h t ; }

. .

.

b t n { p a d d i n g : O p x 5 p x; t e x t - a l i g n: c e n t e r ; wi d t h: 3 8 p x; h e i g h t : 2 6 p x, b a c k g r o u n d: u r l ( . . / i ma g e s / i c o n . g i f )n o - r e p e a t O p x -2 5 p x; }

.

从上面的具体样式代码 中, 我们可 以很明显地看到很多相似的 样式代码 , 例如 , 前4 个 图标 的样 式修饰p i c l 至p i c 4 , 除了偏移 量以 背景 图中有很多的小 图标 , 如图2 所示 : 在这个背景 图上依次截 外 , 其他完全一致 。 我们 可以把这 些共 同特征单独提取 出来作为一 取所需 的小 图标 。 ( 1 ) 截取小图1 ( 购物车 图标胙 为第 一个标签的背景 个p i c 类, 然后再具体设置其他 图标 的独特样式 , 这样可以提高代码 图标。 如 图3 所示 , 该 图标位于 图片的左上方 , 无偏移量 。 的复用性并方便维护 。 对应的C S S 代码修 改为 : p i c { wi d t h : 2 8 p x ̄ h e i g h t . 2 6 p x, b a c k g r o u n d : u l f ( . . / i ma g s/ e 鞠 镪 车 豁 帮 纳 c p 心 B U A  ̄ E 饺 为 酋 贯 准姆j i c o n . g i f )n o - r e p e a t ; } 图 1导 航 菜 单 p i c 2 { b a c k g r o u n d — p o s i t i o n : - 2 8 p x O p x; } p i c 3 { b a c k g r o u n d -p o s i t i o n : - 8 0 p x O p x; } p i c 4 { b a c k g r o u n d — p o s i t i o n : 一I 1 2 p x O p x; } b t n{ wi d t h: 3 8 p x; b a c k g r 0 u n d —p 0 s i t i 0 n: O p x- 2 0 p x; } j _ 在应用样 式时 , 需要 同时应用两种类样式, 对应的代码修改为 : 置 : 蘩 <l i c l a s =” p i c ” ></ 1 i >

t o p — me n u u l { l i s t - s t y l e : n o n e ; } t o p — me n u l i { l f o a t : l e f t ; }

3代码 复 用

2 . 2

调 整 背景 偏移 量 , 实现 小 图标 显示

.

.

.

.

图 2背 景 图

L一 一 … 一

<l i c l a s s =” p i c p i c 2 ” ></ l i > <l i c l a s s =” p i c p i c 3 。 。 ></ l i >

<l i c l a s s =’ p i c pi c 4’ ’ ></ 1 i >

<l i c l a s s =” p i c b t n” ></ l i >

{ 『 1 鳟 … … ~ ≥

参考 文献

@

I

图 3背景放大图

[ 1 ] 陈伟锋。 俞国红. C S S S p r i t e 在 网页制作 中的应用 江西电力职 业技 术学院学报 2 0 1 1年 第 4期. [ 2 ] 李剑, 傅妍燕. 基于 C S S S p r i t e图像拼合技术在 网站 中的应用. 《 计算机 光盘软件 与应用 2 0 1 2年 第 7期.

作者 简介: 王春 明( 1 9 7 6 - ) , 讲 师, 东北农业 大学成栋学院教师 。研 究方 向: 计算机软件 工程 方向。

CSS背景偏移技术实现网站导航菜单

你可能喜欢

  • 网页导航
  • 网站设计技术
  • 网页导航设计
  • 导航网站
  • 网站大全
  • 网址导航
  • 个人网站设计与实现
  • 网站设计与实现

CSS背景偏移技术实现网站导航菜单相关文档

最新文档

返回顶部