html菜单导航的标记是,CSS技巧 使用标签来创建导航菜单(滑动门教程)

HTML和CSS代码如下:

===========================

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Lists as navigation

content="text/html; charset=utf-8" />

• Recipes
• Contact Us
• Articles
• Buy Online

Recipes

Lorem ipsum dolor sit amet, …

body {

font: .8em/1.8em verdana, arial, sans-serif;

background-color: #FFFFFF;

color: #000000;

margin: 0 10% 0 10%;

}

#header {

float: left;

width: 100%;

border-bottom: 1px solid #8DA5FF;

margin-bottom: 2em;

}

#header ul {

margin: 0;

padding: 2em 0 0 0;

list-style: none;

}

#header li {

float: left;

background-image: url("images/tab_left.gif");

background-repeat: no-repeat;

margin: 0 1px 0 0;

padding: 0 0 0 8px;

}

#header a {

float: left;

display: block;

background-image: url("images/tab_right.gif");

background-repeat: no-repeat;

background-position: right top;

padding: 0.2em 10px 0.2em 0;

text-decoration: none;

font-weight: bold;

color: #333366;

}

#recipes #header li.recipes,

#contact #header li.contact,

#articles #header li.articles,

#buy #header li.buy {

background-image: url("images/tab_active_left.gif");

}

#recipes #header li.recipes a,

#contact #header li.contact a,

#articles #header li.articles a,

#buy #header li.buy a {

background-image: url("images/tab_active_right.gif");

background-color: transparent;

color:#FFFFFF;

}

===========================

解决方案:

在这里使用的是"滑动门技术",它是标签创建导航的一种技术.首先编写导航菜单的HTML结构.(在前面几节已经说过如何去创建HTML,如有不懂的

可以去看.)然后给每个标签分配一个类来描述链接.最后准备背景图像.

在PS中创建四个像这样的图片,两个来表现链接的状态,别外两个来表现鼠标滑动过的状态.正如你所看到的,图像的大小比文本要大的多,这是现

实随着文本变化而变化(即文本变大,那么背景图像还是可以看清楚的.)

这是导航的HTML代码:

=========================

• Recipes
• Contact Us
• Articles
• Buy Online

=========================

第一步:我们先来设置容器的样式.给导航定义一个下边框.

=========================

#header {

float: left;

width: 100%;

border-bottom: 1px solid #8DA5FF;

margin-bottom: 2em;

}

=========================

再给

• 定义样式.清除默认的小圆点,并设置填充.

=========================

#header ul {

margin: 0;

padding: 2em 0 0 0;

list-style: none;

}

=========================

效果如下: